在老師帶領下，簡易制作了百度的網頁。
雖然相比較而言還有很大的差距，但也算是個開端。
側重於以下知識點：
-
justify-content:space-around / between
彈性布局，兩行同時使用
-
list-style : none
有序排列去前方黑點
-
text-decoration : none
去下划線
-
cursor : pointer
文本可點擊
-
權值、權重
行內樣式1000 ，id為100， class為10，tag為1
-
屬性選擇器
例：#iutBox>input[type='text']{
}
-
子代選擇器和 （空格）后代選擇器
例：#nav>li{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
input{
margin: 0;
padding: 0;
}
#down{
min-width: 800px;
position: relative; /*固定定位才可以bottom: 0*/
text-align: center;
left: 120px;
top: 650px;
}
#header{
min-width: 800px;
position: relative;
}
#nav2{
width: 1300px;
height: 30px;
/* background: lightblue;*/
/*float: left;*/
margin: 0;
padding: 0;
font-size: 12px;
list-style: none;
display: flex;
justify-content: space-around; /*彈性布局(和display:flex同時使用)*/
line-height: 30px;
position: fixed;
}
#nav{
width: 600px;
height: 30px;
/*background: lightblue;*/
/*float: left;*/
margin: 0;
padding: 0;
font-size: 14px;
list-style: none;
display: flex;
justify-content: space-around; /*彈性布局(和display:flex同時使用)*/
line-height: 30px;
}
#nav>li{ /*子代選擇器, （空格）為后代選擇器*/
/*display: inline-block;
list-style: none; 單獨去掉li前的黑點
margin: 0 19px;*/
}
#nav a{
color: #000;
text-decoration: none; /*去下划線*/
}
#b{
text-decoration: none;
color: gray;;
}
#topRight{
width: 140px;
height: 30px;
/*background: lightgreen;*/
position: absolute;
right: 10px;
top: 0;
display: flex;
justify-content: space-between;
}
#topRight>input{ /*權重101*/
background: #fff;
border: 0;
font-size: 13px;
cursor: pointer; /*可點擊*/
}
#topRight>#login{ /*權重200*/
width: 48px;
background: #38f;
border-radius: 6px;
color: #fff;
}
/* 權值、權重
行內樣式1000，id為100，class為10，tag為1*/
#center{
width: 600px;
height: 250px;
margin: 150px auto 0;
/*background: lightgreen;*/
}
#imgBox{
width: 220px;
margin: 0 auto;
/*background: lightcoral;*/
}
#imgBox>img{
width: 100%;
}
#iptBox{
width: 100%;
height: 44px;
/*background: lightblue;*/
border: 1px solid gray;
border-radius: 10px;
}
#iptBox>input[type='text']{ /*屬性選擇器*/
width: 500px;
height: 100%;
float: left;
border: 0;
border-radius:10px 0 0 10px;
}
#iptBox>input[type='button']{
width: 100px;
height: 100%;
float: left;
border: 0;
background: #38f;
color: #fff;
/*border-top-left-radius:10px ;
border-bottom-right-radius: 10px;*/
border-radius: 0 10px 10px 0;
}
</style>
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="">新聞</a></li>
<li><a href="">hao123</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>
</ul>
<div id="down">
<ul id="nav2">
<li><a href="" id="b">關於百度</a></li>
<li><a href="" id="b">About BaiDu</a></li>
<li><a href="" id="b">使用百度前必讀</a></li>
<li><a href="" id="b">幫助中心</a></li>
<li><a href="" id="b">京公網安備11000002000001號</a></li>
<li><a href="" id="b">京ICP證030173號</a></li>
<li><a href="" id="b">©2021 Baidu </a></li>
<li><a href="" id="b">互聯網葯品信息服務資格證書 (京)-經營性-2017-0020</a></li>
<li><a href="" id="b">信息網絡傳播視聽節目許可證 0110516</a></li>
</ul>
</div>
<div id="topRight">
<input type="button" name="" value="設置">
<input type="button" id="login" name="" value="登錄">
</div>
</div>
<div id="center">
<div id="imgBox">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</div>
<div id="iptBox">
<input type="text" name="">
<input type="button" name="" value="百度一下">
</div>
</div>
</body>
</html>