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="style.css">
</head>
<body>
<div class="nav ">
<div class="navleft">
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/?src=from_pc">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://tieba.baidu.com/">贴吧</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
<a href="http://image.baidu.com/">图片</a>
<a href="https://pan.baidu.com/?from=1026962h">网盘</a>
<a href="http://www.baidu.com/more/">更多</a>
</div>
<div class="navright">
<a href="#" id="login">登录</a>
<a href="#">设置</a>
</div>
</div>
<div class="main">
<div class="pic">
<img src="baidu.png" alt="">
</div>
<div class="search">
<div class="holder">
<input type="text" id="searchcontent" />
<a href="http://www.baidu.com">百度一下</a>
</div>
</div>
</div>
<div class="apple">
<a href="https://home.baidu.com/">关于百度</a>
<a href="http://ir.baidu.com/">about BaiDu</a>
<a href="https://www.baidu.com/duty">使用百度必读</a>
<a href="https://help.baidu.com/">帮助中心</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京备10212222200</a>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.navleft {
float: left;
height: 40px;
}
.navright {
float: right;
height: 40px;
}
.nav {
*zoom: 1;
}
.nav::after {
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
.navleft a {
font: 13px/23px Arial, sans-serif;
float: left;
text-decoration: none;
color: black;
margin: 10px;
padding: 5px;
}
.navright a {
font: 13px/23px Arial, sans-serif;
float: right;
text-decoration: none;
color: black;
margin: 10px;
padding: 5px;
}
.nav a:hover {
color: blue;
}
#login {
background-color: #4E6EF2;
color: white;
border-radius: 5px;
}
.main {
text-align: center;
}
.pic {
text-align: center;
}
.pic img {
width: 200px;
height: 100px;
}
.search {
text-align: center;
width: 100%;
height: 30px;
}
.apple {
position: fixed;
bottom: 0px;
}
.apple a {
padding-left: 150px;
text-decoration: none;
color: black;
}
.search {
text-align: center;
}
.holder {
display: inline-block;
}
#searchcontent {
height: 36px;
width: 500px;
float: left;
border-radius: 10px 0 0 10px;
border-width: 1px;
border-color: CEC7C4;
border-right: 0px;
}
.search a {
text-decoration: none;
display: inline-block;
width: 100px;
s height: 38px;
line-height: 36px;
text-align: center;
border-radius: 0px 5px 5px 0px;
font-family: "微软雅黑";
cursor: pointer;
background-color: #4E6EF2;
color: white;
float: left;
}
.search a:hover {
background-color: blue;
}
图例:
我会继续努力的,这个我承认很水。。。