html css :百度界面,素材以及制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度界面</title>
<link rel="stylesheet" href="css/baidu.css">
</head>
<body>
<div id="all">
<div class="one" align="right"><a href="#" > 搜索设置</a> | <a href="#" > 登录</a> <a href="#" >
注册</a></div>
<div class="two" align="center"><img src="img/百度.jpg" / width="220px" height="70px"><br>
<br /> <br /> <br />
<a href="#" > 新闻</a> <a href="#" > 网页</a> <a href="#" > 贴吧</a> <a href="#" >
知道</a>
<a href="#" > 音乐</a>
<a href="#" > 图片</a> <a href="#" > 视频</a>
<a href="#" > 地图</a>
<br /> <input type="text" style="color: rgb(102, 102, 102);" name="keyword" class="text"
placeholder="" value="" />
<input type="submit" class="button" value="百度一下"/>
<br /> <br />
<a href="#" > 百科</a>
<a href="#" > 文库</a> <a href="#" >
hao123 </a> <a href="#" > | 更多>></a>
</div>
<div class="three" align="center"><a href="#" > 把百度设为主页</a>
<a href="#" > 下载百度浏览器</a>
<br><br>
<a href="#" > 加入百度推广</a>
<a href="#" > 搜索风云榜</a><a href="#" > | 关于百度</a> <a href="#" > |
About Baidu</a>
<br><br><font color="gray" size="2">Cright.2013Baidu 使用百度前必读 京JCP证030173号</font></div>
</div>
</body>
</html>
#all{
width: 100%;
height: 697px;
/* border:2px solid green;*/
}
.one{
width:100%;
height: 66px;
/*border:2px solid green;*/
}
a {
color: blue;
text-decoration: none;
}
.two{
width: 100%;
height: 480px;
/* border:2px solid green;*/
}
.button{
/*.banner .inner button中的空格不要少不然会没掉一些效果*/
margin-top: 20px;
padding: 10px 20px;
/*padding用撑开,从里往外撑,10px 20px是简写,分别对应上下和左右,
完整的是上右下左,比如:10px 20px 70px 90px，无逗号，border-radius是设置按钮的圆角
background: #e85e17;按钮设为橘色，border:none;为去除按钮的边框*/
border-radius: 0px;
background: blue;
border: none;
color: #fff;
outline: none;
cursor: pointer;
}
.text{
width: 600px;
height: 30px;
}
.three{
width:100%;
height: 150px;
/*border:2px solid green;*/
margin-right: auto;
}
