【CSS 基础】11 京东首页DIV分块布局

京东分块图解

京东分块图解

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="jd.css"/>
    </head>
    
    <body>
        
        <!--广告-->
        <div id="ad">
            <div class="bg"></div>
        </div>
        
        <!--头部-->
        <div id="header">
            <div class="content"></div>
        </div>
        
        <!--搜索-->
        <div id="search">           
            <!--图标-->
            <div class="logo"></div>
        </div>
        
        <!--导航-菜单-->
        <div id="nav">
            <div class="left"></div>
            <div class="center">
                <div id="one"></div>
                <div id="two"></div>
                <div id="three"></div>
            </div>
            <div class="right"></div>
        </div>      
        
    </body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
}

#ad{
    width: 100%;
    height: 80px;
    background: #161616;
}

#ad .bg{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    background: red;
}

#header{
    width: 100%;
    height: 30px;
    background: #E3E4E5;
}

#header .content{
    width: 1190px;
    height: 30px;
    background: #e19d59;
    margin: 0 auto;
}

#search{
    width: 1190px;
    height: 140px;
    background: #bbddb2;
    margin: 0 auto;
}

#search .logo{
    width: 190px;
    height: 170px;
    background: #008000;
    position: absolute;
    top: 80px;
}

#nav{
    width: 1190px;
    height: 480px;
    background: #efe49d;
    margin: 0 auto;
}

#nav .left{
    width: 190px;
    height: 480px;
    background: #161616;
    float: left;
}

#nav .center{
    width: 790px;
    height: 480px;
    background: #161616;
    float: left;
    margin-left: 10px;
}

#nav .center #one{
    width: 790px;
    height: 340px;
    background: #FF0000;
    float: left;
    margin-bottom: 10px;
}

#nav .center #two{
    width: 390px;
    height: 130px;
    background: #FF0000;
    float: left;
    margin-right: 10px;
}

#nav .center #three{
    width: 390px;
    height: 130px;
    background: #FF0000;
    float: left;
}

#nav .right{
    width: 190px;
    height: 480px;
    background: #161616;
    float: left;
    margin-left: 10px;
}
分块效果图

微信公共号

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,882评论 1 87
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 131,694评论 19 559
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 13,289评论 33 442
  • 对于过年走亲访友,很多人是又爱有怕,因为总有一些对话无法避免。 问成绩、问工资、问恋爱、问年终奖......没完没...
    mamiao阅读 59评论 0 0
  • (二)石老师 我被安排教一年级的语文、数学并任班主任。老师会比学生提前一周开学,先参加区进修学校组织的集体备课,再...
    朴朴儿阅读 34评论 0 1