當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS的一个小案例——模拟soso搜搜导航器

發布時間：2024/3/12 CSS 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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"> <div align="center"><img src="img/SOSO.jpg" alt="" ></div> <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> <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搜搜导航器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。