-
實現的效果如下圖:
屏幕快照 2017-07-26 13.48.01.png - 新手寫代碼的悲哀,知道代碼一堆問題卻無從下手,只能貼上實現代碼了,html文件中代碼:
<!DOCTYPE html>
<html>
<head>
<title>baidu</title>
<link rel="stylesheet" type="text/css" href="baidu.css">
</head>
<body>
<!-- 頭部的div-->
<div class="header">
<ul class="left">
<li class="left"> 成都: 34C 輕度 122</li>
<li class="left width"><a > 換膚</a> </li>
<li class="left width"><a > 消息</a></li>
</ul>
<ul class="right">
<li class="right"> <button class="blue">更多產品</button></li>
<li class="right"> <a > 設置</a></li>
<li class="right"> <a > 聞人慕學</a></li>
<li class="right"> <a > 學術</a></li>
<li class="right"> <a > 貼吧</a></li>
<li class="right"> <a > 視頻</a></li>
<li class="right"> <a > 地圖</a></li>
<li class="right"> <a > hao123</a></li>
<li class="right"> <a > 新聞</a></li>
</ul>
</div>
<!-- 中間的圖片和搜索框 我這個是不是寫的有問題?用來兩個div-->
<div class="center">
</div>
<div class="center">
<input class="input" type="text" name="search">
<button class="baidu"> 百度一下</button>
</div>
<div class="bottom">
<ul class="bottom">
<li class="bottom"><a href="www.baidu.com"> 設為首頁</a></li>
<li class="bottom">@2017 Baidu</li>
<li class="bottom"><a href="">使用百度前必讀</a></li>
<li class="bottom"> <a href="">意見反饋</a></li>
<li class="bottom">京ICP證030173號</li>
</ul>
</div>
<br/>
<p class="bottom"> 京公網安備</p>
</body>
</html>
- CSS中的代碼:
/**使其是整個完整視圖 不會又邊距*/
* {
margin:0;
padding:0;
}
/**頭部css*/
div.header {
width: 100%;
height: 40px;
margin-top: 10px;
/*background-color: red;*/
text-align: center;
border-bottom-width: 1px;
border-color: gray;
border-bottom-style: solid; /*必須指定風格線條才會展示 默認為none*/
position: relative;
min-width: 1000px; /**避免外圍盒子的寬度大于內部盒子的寬度 導致浮動的問題*/
}
ul.left {
list-style-type: none;
margin-left: 10px;
text-align: center;
}
li.left {
float: left;
}
li.width {
width: 50px;
text-align: center;
}
ul.right {
list-style-type: none;
text-align: center;
}
li.right {
float: right;
width: 80px;
text-align: center;
}
button.blue {
background-color: blue;
color: white;
text-align: center;
width: 80px;
height: 40px;
margin-top: -10px;
padding-top: 0;
}
/**圖片和輸入框的*/
div.center {
text-align: center;
position: relative;
min-width: 500px;
}
.img {
width: 300px;
height: 150px;
li.left {
}
border-width: 1px;
}
button.baidu {
background-color: blue;
color: white;
text-align: center;
width: 80px;
height: 45px;
margin-top: 0;
padding-top: 0;
margin-left: -10px;
position: relative;
}
.input {
width: 50%;
height: 40px;
border-color: gray;
border-width: 1px;
margin-top: 10px;
min-width: 10cm; /*設置寬度最小值*/
}
/**底部*/
div.bottom {
position: relative;
text-align: center;
margin-top: 1cm;
}
/**如何讓他居中浮動 如何又使它固定距離底部多少*/
ul.bottom {
text-align: center;
list-style-type: none;
position: relative;
float: left;
left: 50%;
}
li.bottom {
float: left;
position: relative;
right: 50%;
}
p.bottom {
text-align: center;
}
知識點小結
- 外層盒子的寬度要大于內層盒子的寬度,否則浮動的展示會有問題,往第二層展示了
- 浮動居左,整體又要居中,可是使外層盒子向右移動50%,內存盒子向左移動50%
