首先我们先观察百度的页面是如何实现的
如图所示
如图所示这是基本的页面布局
然后我们一点一点的弄
先弄左上角这个ul列表，因为默认在左上角就不用弄div盒子了
代码如下
我们把它叫做navcss代码如下#nav{
/*background: lightblue;*/
width: 600px;
height: 30px;
list-style: none; /* 去除黑点*/
margin: 0;
padding: 0;
display: flex; /*弹性布局 均匀分布开了*/
justify-content: space-around; /*between 两边没有间距了*/
}把每个li的变成弹性布局，这样的话就能在一行中显示，不加
display: flex; /*弹性布局 均匀分布开了*/
justify-content: space-around; /*between 两边没有间距了*/的话效果就变成了
然后我们加上这行代码以实现鼠标放上变成小手和变色的效果
#nav a:hover{
color: rgb(60, 93, 242);
}
cursor: pointer; /*鼠标放上变成小手*/
如图所示
然后我们要设置右上角的效果
#topRight{
position: absolute;
right: 10px;
top: 10px;
width: 140px;
display: flex;
justify-content: space-between;
}
#topRight>input{
background: #fff;
border: 0;
cursor: pointer;
/*放到链接上变成小手*/
}这使得两个input按钮都出现
放到链接上变成小手的效果然后我们对登录进行颜色设置
#topRight>#login{
background: #38f; /*!important*/;
color: #fff;
width: 48px;
border-radius: 6px;
}
/*权重 权值
行内1000
id 100
class 10
tag（标签）1*/
然后我们进行中间图片和输入框的编写代码如下
css代码如下
#center{
width: 600px;
height: 250px;
margin: 150px auto 0; 居中显示
/* background: lightpink;*/
}
#imgBox{
width: 220px;
margin: 0 auto; 居中显示
/*background: lightblue;*/
}
#imgBox>img{
width: 100%; /*遵循父元素的高度 220px*/
}
#iptBox{
width: 100%;
height: 44px;
/*background: lightblue;*/
border: 1px solid lightgray; 添加灰色边框
border-radius: 10px 10px 10px 10px; 添加圆角边框 border——radius：10px 10px 10px 10px； 上 右 下 左
border——radius： 10px 10px 10px； 上 左右 下
border——radius：10px 10px； 上下 左右
border——radius：10px； 上下左右
}
#iptBox>input[type='text']{/*属性选择器*/
width: 500px;
height: 100%;
float: left;
border: 0;
border-radius: 10px 0 0 10px ;
}
属性选择器：
input[type='text']input 下 type名叫做 text的input按钮
子代选择器：
#iptBox>inputiptBox下的input的按钮>下 只能为上一个是下一个亲爸爸下一个是上一个的亲儿子
#iptBox>input[type='button']{/*属性选择器*/
width: 100px;
height: 100%;
float: left;
border: 0;
color: #fff;
background: #38f;
/* border-radius: 10px;*/但是如果不设置
input{
margin: 0;
padding: 0;
}的话我们会得到这样的结果如图所示
这样的话因为两个input框会有padding和margin值 这样会造成 两个框加起来会超出范围然后导致他们不在一行所以我们要设置padding 和 margin为零啊啊啊啊这样的话完成了大半部分最后我们弄最后底部的ul代码如下
css如下#nav1{
width: 1700px;
height: 30px;
list-style: none; /* 去除黑点*/
margin: 0 auto;
padding: 0;
display: flex; /*弹性布局 均匀分布开了*/
justify-content: space-around; /*between 两边没有间距了*/
position: absolute;
left: 80px;
top: 1100px;
/*postion: fixed
width: 1200px;
bottom: 0;
right: 0;
*/
#nav1 a{ /*后代选择器*/
color: lightgrey;
font-size: 10px;
text-decoration: none /*去除下划线*/;
line-height: 30px;/*垂直居中*/
}
#nav1 a:hover{
color: black;
}这样我们会制作成了一个简易的百度页面呀呀呀呀