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="#" > 搜索設(shè)置</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="#" > 網(wǎng)頁</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="#" > 把百度設(shè)為主頁</a>
<a href="#" > 下載百度瀏覽器</a>
<br><br>
<a href="#" >? 加入百度推廣</a>
<a href="#" > 搜索風(fēng)云榜</a><a href="#" > | 關(guān)于百度</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是簡寫,分別對應(yīng)上下和左右,
完整的是上右下左,比如:10px 20px 70px 90px，無逗號，border-radius是設(shè)置按鈕的圓角
background: #e85e17;按鈕設(shè)為橘色，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;
}
