利用html和css完成百度首页的制作（百度一下）

2.百度首页的制作：

 （1）分析可得百度首页的顶部是有俩部分得来的，所以可以采取二分法的办法来实现，用一个大盒子里放二个小盒子，才去左边的左悬浮和右边的右悬浮。里面的内容可以才标签的方式进行操作也可以采取表格的方式实现。具体代码如下：

<div id="top">
			<div id="left1">
				<ul>
					<li><a href="#">好123</li>
					<li><a href="#">地图</li>
					<li><a href="#">贴吧</li>
					<li><a href="#">视频</li>
					<li><a href="#">图片</li>
					<li><a href="#">网盘</li>
					<li><a href="#">更多</li>
				</ul>
			</div>
			<div id="right1">
				<a href="#">设置</a>
				<button>登录</button>

body{
	margin: 10px;
}
#top{
	width: 1600px;
	height: 100px;
	
	line-height: 10px;
}
#left1{
	width: 800px;
	height: 80px;
	
	float: left;
}
#left1 ul{
	margin: 0px;
	padding: 0px;
}
#left1 ul li{
	list-style: none;
	float: left;
	margin-left: 10px;
}
#left1 ul li a,#right1  a{
	text-decoration: none;
	margin-top: 1000px;
}
#right1{
	width:800px;
	height: 80px;
	
	float: left;
	text-align: right;
}
#right1 button{
	border: none;
	background-color: aqua;
	color: aliceblue;
	font-size: 12px;
	border-radius: 5px;
}

（2）百度logo的实现：

    分析可得只要使用一个盒子，盒子里面放一个百度的logo使用margin: 0 auto;进行居中，即可；

代码如下：

<div id="img1">
			<img src="\合肥培训班\图片\9.png" alt="">
		</div>

css代码如下：

#img1{
	width: 250px;
	height:125px ;
	
	margin: 0 auto;
	margin-top: 20px;
}
#img1 img{
	width: 250px;
	height: auto;

（3）接下来是搜索框和百度一下的按钮实现过程：

        分析可得可以采取在一个盒子里放置一个文本框和一个按钮，但是要做到和百度首页一样的程度要使用border-radius进行边框的优化，使其变的圆润。以及使用hover标记进行鼠标的触控反馈。代码如下：

<div id="img1">
			<img src="\合肥培训班\图片\9.png" alt="">
		</div>
		<div id="search">
			<input type="text" /><button>百度一下</button>

css代码如下：

#img1 img{
	width: 250px;
	height: auto;
}
#search{
	width: 700px;
	height: 45px;
	
	margin: 0 auto;
	display: flex;
}
#search input{
	width: 500px;
	height: 40px;
	border: 2px solid gray;
	border-radius: 5px 5px 5px 5px;
}
#search input:hover{
	outline: none;
}
#search button{
	width:191px ;
	height: 45px;
	background-color: aqua;
	border: none;
	color: white;
	border-radius: 5px 5px 5px 5px;
	font-size: 16px;
	margin-left: -2px;

（4）热点部分的设计和制作：

         通过分析可以知道该部分由俩个部分组成，这样就可以采取二分布局的方式进行布局，而其中的左右两个部分也各自分成二个部分但是由于是上下分布所以不需要采取二分布局，不需要使用悬浮的方式。其中的内容可以采取标签的方式，在标签中插入超链接。而前面的序号图片可以采取在超链接前面插入一个序号图片的方式实现，代码如下：

<div id="redian">
			<div id="left2" class="new">
				<div id="biaoti1">
					<img src="\合肥培训班\图片\bdrs2.png" alt="">>
				</div>
				<ul>
					<li><img src="\合肥培训班\图片\00.png" alt=""><a href="#">周加俊是大帅哥</a></li>
					<li><img src="\合肥培训班\图片\01.png" alt=""><a href="#">邢志鹏是小丑</a></li>
					<li><img src="\合肥培训班\图片\02.png" alt=""><a href="#">郑航是大傻逼</a></li>
				</ul>
			</div>
			<div id="right2" class="new">
				<div id="biaoti2">
					<img src="\合肥培训班\图片\10.png" alt=""><span>换一换</span>
				</div>
				<ul>
					<li><img src="\合肥培训班\图片\03.png" alt=""><a href="#">梦想俄罗斯极光</a></li>
					<li><img src="\合肥培训班\图片\004.png" alt=""><a href="#">新疆烤肉串</a></li>
					<li><img src="\合肥培训班\图片\05.png" alt=""><a href="#">北京天安门</a></li>
				</ul>
			</div>
		</div>

css代码如下：

#redian{
	width: 680px;
	height: 160px;
	
	margin: 0 auto;
	margin-top:50px ;
}
#left2{
	width: 50%;
	height: 160px;
	
	float: left;
}
#right2{
	width: 50%;
	height: 160px;

	float: right;
}
#biaoti1,#biaoti2{
	width: 100%;
	height: 30px;
}
#biaoti2{
	text-align: right;
}
#biaoti1 img {
	width: 70px;
	height: 18px;
	margin-bottom: -4px;
}
#biaoti2 img {
	width: 20px;
	height:20px ;
	margin-bottom: -5px;;
}
.new ul{
	padding: 0px;
}
.new ul li {
	list-style: none;
	margin-top: 15px;
}
.new ul li a{
	text-decoration: none;
	color:red;
}
.new ul li img {
	width: 20px;
	height: 20px;
	margin-bottom: -5px;
	margin-right: 7px;
}

（5）底部不动盒子的实现：

           使用一个盒子，使用position标签来实现快的位置的定位，绝对位置和相对位置的确定，代码如下：

<div id="fuzhu">
			<img src="\合肥培训班\图片\fuzhu.png" alt="">
			<img src="\合肥培训班\图片\erweima.png" alt="">
		</div>

css代码如下：

#fuzhu{
	width: 35px;
	height: 80px;
	background-color: beige;
	position: fixed;
	right: 10px;
	bottom: 50px;
	border-radius: 50px;
}
#fuzhu img:nth-child(1){
	width:35px ;
	height:35px;
	border-radius: 100%;
}
#fuzhu img:nth-child(2){
	width:35px ;
	height:30px;
	border-radius: 100%;
}

这样一个百度首页的网站的设计和实现就完成了，今天的分享就到这了！