-
实现的效果如下图:
屏幕快照 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 href="https://www.baidu.com/"> 换肤</a> </li>
<li class="left width"><a href="https://www.baidu.com/"> 消息</a></li>
</ul>
<ul class="right">
<li class="right"> <button class="blue">更多产品</button></li>
<li class="right"> <a href="https://www.baidu.com/"> 设置</a></li>
<li class="right"> <a href="https://www.baidu.com/"> 闻人慕学</a></li>
<li class="right"> <a href="https://www.baidu.com/"> 学术</a></li>
<li class="right"> <a href="https://www.baidu.com/"> 贴吧</a></li>
<li class="right"> <a href="https://www.baidu.com/"> 视频</a></li>
<li class="right"> <a href="https://www.baidu.com/"> 地图</a></li>
<li class="right"> <a href="https://www.baidu.com/"> hao123</a></li>
<li class="right"> <a href="https://www.baidu.com/"> 新闻</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%
