美文网首页
网页布局

网页布局

作者: huhu502 | 来源:发表于2016-09-04 17:51 被阅读11次
Paste_Image.png
 <!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="utf-8">
<style type="text/css">
    /* css初始化 */
    /* *{
        margin: 0;
        padding: 0;
    } */
    h1,h2,h3,h4,h5,h6,body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 980px;
        height: 700px;
        background-color: #DBDBE0;
        margin: 0 auto;
    }
    .header{
        height: 50px;
        background-color: black;
    }
    .container{
        height: 600px;
        background-color: pink;
    }
    .content{
        width: 680px;
        height: 600px;
        background-color: #1351EF;
        float: left;
    }
    .sidebar{
        width: 300px;
        height: 600px;
        background-color: green;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: black;
    }
</style>
 </head>
<body>  
    <!-- 主体盒子 -->
    <div class="box">
        <!-- 头部 -->
        <div class="header"></div>
        <!-- 内容部分 -->
        <div class="container">
            <!-- 内容左侧 -->
            <div class="content"></div>
            <!-- 内容右侧 -->
            <div class="sidebar"></div>
        </div>
        <!-- 尾部 -->
        <div class="footer"></div>
    </div>
</body>
</html>

相关文章

  • 1.网页布局基础

    网页布局基础 什么是网页布局?网页布局是网页制作的基础(DIV+CSS网页布局) 分类:流式布局,浮动布局,绝对定...

  • 6、盒子模型 边框、圆角、阴影、内外边距、外边距塌陷

    1、网页布局的本质 网页布局的核心本质: 就是利用 CSS 摆盒子。 网页布局过程: 先准备好相关的网页元素,网页...

  • 网页布局方式

    一、 网页的布局方式 1、 什么是网页的布局方式? 网页的布局方式就是指流浪器是如何对网页的元素进行排版的 2、 ...

  • DIV+CSS对SEO网站优化好处有哪些?

    div+css布局是一种网页的布局方法,是目前应用最广泛的网页布局方法。div css布局是把网页用div+css...

  • 京东登录

    =============网页内容============== ===========网页布局和样式=======...

  • 学习笔记(二)

    网页编写 网页编写习惯: ①清空所有的边距; ②从外向内,从上至下的编写网页。 网页的布局方式:网页的布局方式其实...

  • 08-CSS浮动流

    网页布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/...

  • CSS-浮动流

    浮动 网页的布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(...

  • 浮动

    浮动 网页的布局方式 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流...

  • 浮动流

    网页的布局方式 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档...

网友评论

      本文标题:网页布局

      本文链接:https://www.haomeiwen.com/subject/zimlettx.html