仿百度首页

• 实现的效果如下图:

  
  
  

  屏幕快照 2017-07-26 13.48.01.png
• 新手写代码的悲哀,知道代码一堆问题却无从下手,只能贴上实现代码了,html文件中代码:

    
    





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


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





    ![](baidu.png)


    
     百度一下


    

    
 设为首页
    
@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%