CSS的一个小案例——模拟soso搜搜导航器
生活随笔
收集整理的這篇文章主要介紹了
CSS的一个小案例——模拟soso搜搜导航器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS中最常用的個人認為是鏈接方式，即外部連接。通常剛學習的小白，容易忘記在頭部中加link標簽，比如我，我用的時候，容易忘記寫，所以，在使用外部連接方式時一定先把link標簽寫上。
html源代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模仿SOSO搜搜</title><link rel="stylesheet" href="Example2.css"> </head> <body> <div id="big"> <!--1.圖片--><div align="center"><img src="img/SOSO.jpg" alt="" ></div> <!--2.連接--><div class="div"><ul><li id="h"></li><li><a href="#">網頁</a></li><li><a href="#">圖片</a></li><li><a href="#">視頻</a></li><li><a href="#">音樂</a></li><li><a href="#">搜吧</a></li><li><a href="#">問問</a></li><li><a href="#">團購</a></li><li><a href="#">新聞</a></li><li><a href="#">地圖</a></li><li id="more"><a href="#">更多>></a></li></ul><p style="height: 44px"> </p></div> <!--3.表單--><div id="s"><form action="#" id="flg" name="flg"><input type="text" value=""><input type="submit" value="搜搜"></form></div> </div> </body> </html>源代碼
*{margin: 0;padding: 0; } p{margin: 0;padding: 0; } #div{margin: 0 auto;font-size: 12px;padding: 0;border-bottom: 1px solid #00c;background: #EEE;width: 800px;height: 18px; } div li a{display: block;text-decoration: underline;padding: 4px 0 0 0;margin: 0;font-size: 13px; } div li{float: left;list-style-type: none;margin: 0;padding: 0;width: 40px; } div li a:link,div li a:visited{color: #004276; } div li#h{width: 400px;height: 18px; }#s{background-color: #006eb8;width: 430px;height: 40px;margin: 0 auto; } form{display: block;padding-left: 120px;padding-top: 15px; } #big{width: 1200px; }總結
以上是生活随笔為你收集整理的CSS的一个小案例——模拟soso搜搜导航器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网络测试仪哪个牌子好
- 下一篇： 习题整理（简单01背包 可用查并集202