百度⽹页简易制作在⽼师带领下，简易制作了百度的⽹页。 侧重于以下知识点：
1. diplay:fiex;
justify-content:space-around / between
弹性布局，两⾏同时使⽤
2. list-style : none
有序排列去前⽅⿊点
3. text-decoration : none
去下划线
4. cursor : pointer
⽂本可点击
5. 权值、权重
⾏内样式1000 ，id为100， class为10，tag为1
例：#iutBox>input[type='text']{
}
7. ⼦代选择器和（空格）后代选择器
例：#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="www.baidu/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> </div>
<div id="iptBox">
<input type="text" name="">
<input type="button" name="" value="百度⼀下">
</div>
</div>
</body>
</html>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议