仿百度首页

实现的效果如下图:

屏幕快照 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">
    ![](baidu.png)
</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%

仿百度首页

知识点小结

推荐阅读更多精彩内容