仿百度首页HTML和CSS,仿百度首页

实现的效果如下图:

屏幕快照 2017-07-26 13.48.01.png

新手写代码的悲哀,知道代码一堆问题却无从下手,只能贴上实现代码了,html文件中代码:

baidu

• 成都: 34C 轻度 122
• 换肤
• 消息

• 更多产品
• 设置
• 闻人慕学
• 学术
• 贴吧
• 视频
• 地图
• hao123
• 新闻


百度一下

• 设为首页
• @2017 Baidu
• 使用百度前必读
• 意见反馈
• 京ICP证030173号

京公网安备

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%