一、使用vscode制作一個靜態百度頁面
1.HTML代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="百度首頁.css"> </head> <body> <div class="header"> <span class="font1">杭州：</span> <span ><img src="cloud.png" alt="天氣" width="18" height="18"></span> <span class="font1">18℃</span> <span class="font1" style="font-size: 12px;color: #3388ff;">優</span> <span class="font1">39</span> <span class="font1"> |</span> <u class="font1" style="margin-left: 15px;">換膚</u> <u class="font1" style="margin-left: 15px;">消息</u> <u class="font1" style="margin-left: 15px;">顯示卡片</u> <div class="headerright"> <b class="font2" style="color: red;margin-right: 5px;">抗擊肺炎<img src="redpoint.png" alt="紅點" width="20"height="20" ></b> <b class="font2">新聞</b> <b class="font2">hao123</b> <b class="font2">地圖</b> <b class="font2">視頻</b> <b class="font2">貼吧</b> <b class="font2">學術</b> <u class="font2">醬爆鴨脖</u> <u class="font2">設置</u> <div class="more"> <div style="color: white;font-size: 13px;">更多產品</div> </div> </div> </div> <div class="content"> <div class="photo" align="center"> <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度一下" width="270" ; height="129"> </div> <div class="input"> <div class="camera"> <img src="camera.png" alt="拍照" width="18" height="16"> </div> </div> <div class="button"> <div class="word">百度一下</div> </div> </div> <div class="bottom"> <div class="left"> <span class="font3"> 設為首頁 </span> <span class="font3"> 關於百度 </span> <span class="font3"> About Baidu </span> <span class="font3"> 百度推廣 </span> <span class="font3"> 使用百度前必讀 </span> <span class="font3"> 意見反饋 </span> <span class="font3"> 幫助中心 </span> </div> <div class="right"> <span class="font4"> ©2020 Baidu </span> <span class="font4"> (京)-經營性-2017-0020 </span> <span class="font4"> 京公網安備11000002000001號 </span> <span class="font4"> 京ICP證030173號 </span> </div> </div> </body> </html>
2.百度首頁.css代碼
body{ margin:0;padding:0; }
.header {
width: 100%;
min-width: 1280px;
height: 24px;
border-bottom: 1px solid gainsboro;
}
.content {
width: 100%;
min-width: 1280px;
height: 752px;
overflow: hidden;
}
.photo {
margin-top: 80px;
}
.bottom {
width: 100%;
min-width: 1280px;
height: 40px;
float: right;
background:#fafafa;
}
.input {
width: 536px;
height: 41px;
border: 1px solid #3388ff;
float:left;
margin-left: 30%;
}
.button {
width: 104px;
height: 43px;
background: #3388ff;
float: left;
}
.word {
width: 100%;
height: 100%;
color: white;
text-align: center;
line-height: 43px;
}
.camera {
float: right;
margin-right: 15px;
margin-top: 10px;
float: right;
}
.font1 {
margin-top: 0px;
font-size: 12px;
margin-left: 5px;
}
.font2 {
margin-top: 0px;
font-size: 13px;
margin-right: 10px;
text-decoration: underline;
color: #555555;
}
.headerright {
width: 650px;
height: 24px;
float: right;
text-align: right;
line-height: 24px;
}
.more {
width: 86px;
height:24px;
float: right;
background: #3388ff;
text-align: center;
line-height: 24px;
margin-top: 0px;
}
.left
{float: left;
}
.font3{
font-size: 12px;
color: #999999;
line-height: 40px;
margin-left: 10px;
}
.right{
float: right;
}
.font4{
font-size: 12px;
color: #999999;
line-height: 40px;
margin-right: 10px;
}
二、運行截圖
二、遇到的一些問題
1、span內圖片居中問題
(1)設置寬高無效
(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
(3)不會自動進行換行
2、創建的div怎么從網頁左上角開始？
因為body有默認的8像素的margin，只要加上下面代碼就可以了。
body{ margin:0;padding:0; }