实现的效果如下图:
屏幕快照 2017-07-26 13.48.01.png
新手写代码的悲哀,知道代码一堆问题却无从下手,只能贴上实现代码了,html文件中代码:
baidu![](baidu.png)
百度一下
京公网安备
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%