模擬百度首頁
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度首頁</title>
<link rel="stylesheet" href="../CSS/baidu.css" >
<!--引入標題圖片-->
<link href="../img/pas.ico" rel="shortcut icon">
</head>
<body>
<!--模擬百度首頁-->
<div id="header">
<ul id="header_nav">
<li><a name="" class="">新聞</a></li>
<li><a >hao123</a></li>
<li><a >地圖</a></li>
<li><a >視頻</a></li>
<li><a >貼吧</a></li>
<li><a >學(xué)術(shù)</a></li>
<li><a href="" class="login" name="lb">登錄</a></li>
<li><a href="" class="set" name="ss">設(shè)置</a></li>
</ul>
</div>
<!--網(wǎng)頁主體部分-->
<div id="main">
<img src="../img/baidu.png">
<form action="https://www.baidu.com/s" method="get" id="main_input"><!--action是？之前的提交地址，method的get是獲取的？后面的鍵值對-->
<input id="inp" type="text" name="wd"><!--wd是輸入的字符串對應(yīng)的鍵，而我們輸入的字符串為值-->
<input id="inp_text" type="submit" value="百度一下"><!--提交給action-->
</form>
</div>
<div id="footer">
<div >
<img src="../img/bbu.png" id="erv">
<br>
<b>百度</b>
</div>
<div id="footer_href">
<a name="" class="">把百度設(shè)為主頁</a>
<a >關(guān)于百度</a>
<a >About Baidu</a>
<a >百度推廣</a>
<br>
@2019 Baidu<a >使用百度前必讀</a>
<a >意見反饋</a>
京ICP證030173號<a >京公網(wǎng)安備11000002000001號 </a>
</div>
</div>
</body>
</html>
CSS外部聲明代碼
/*去掉內(nèi)外邊距*/
*{margin: 0;padding: 0;}
/*設(shè)置網(wǎng)頁導(dǎo)航欄大小*/
#header{width: 100%;height: 45px}
/*設(shè)置子標簽的樣式*/
#header_nav{position: absolute;top: 25px;right: 90px}
/*給子標簽添加浮動,并且刪除無序列表的小黑點,并設(shè)置a標簽之間的間距*/
#header_nav li{float: left;list-style: none;margin-left: 24px}
/*為a標簽添加顏色,字體大小,比重,行高*/
#header_nav li a{color: #333333;font-size: 13px;font-weight: 700;line-height: 24px}
/*設(shè)置網(wǎng)頁主題不分大小*/
#main{width: 100%;height: 384px; text-align: center}
#main img{margin-top: 60px ;width: 269px;height: 92px;margin-bottom: 21px}
/*設(shè)置搜索框?qū)ο?/
input[type=text]{height: 34px;width: 539px;border: solid 1px #4992ff;background-image: url("../img/inp1.png");background-repeat: no-repeat;background-position-x:500px;background-position-y: -1px}
input[type=submit]{height: 36px;width: 100px; font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top: 1px;}
/*設(shè)置網(wǎng)頁底部大小*/
#footer{width: 100%;height: 206px;text-align: center}
/*給二維碼添加樣式*/
#erv{width: 65px;height: 65px;margin-top: 8px}
/*給百度兩個字添加字體大小格式*/
b{font-size: 13px;}
/*給子div標簽添加行高,字體大小,及其位置*/
#footer_href{line-height: 30px; font-size: 11px;margin-top: 15px}
/*給a標簽中的字體添加顏色和字體間距*/
#footer_href a{color: gray;margin-left: 11px;}
/*使用偽類選擇器給超鏈接標簽添加顏色改變樣式*/
#header_nav li a:hover{color: darkblue}
顯示效果:
省略了右邊欄的js.png
