css 布局

2018-07-12 admin

HTML+CSS+DIV 实现布局

1.网页我们可以把它看成一个个的‘盒子’组成的,如下所示:

图片描述

由上图我们可以看出,页面是由上(顶部)、中(主体)、下(底部)组成的, 下面我们在详细划分一下:下面的主体又分成了三部分左、中、右。 图片描述

单列布局

代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>demo01</title>
    <style>
        .coninter{
            width:960px;
            margin:0 auto;
        }
        .header{
            height:100px;
            border:1px solid #f00;
        }
        .main{
            height:300px;
            border:1px solid #0f0;
        }
        .footer{
            height:100px;
            border:1px solid #00f;
        }
    </style>
</head>
<body>
    <div class="coninter">
        <div class="header"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </div>
</body>
</html>

效果如下: 图片描述

双列布局

代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>双列布局</title>
    <style>
.coninter{
    width:100%;
    margin:0 auto;
    overflow:hidden;
}
.left{
    width:30%;
    height:100px;
    background-color:#f00;
    float:left;
}
.right{
    width:70%;
    height:100px;
    background-color:#000;
    float:left;
}

    </style>
</head>
<body>
    <div class="coninter">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果图: 图片描述

三列布局

代码:

<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>三列布局 左右固定中间自适应</title>
    <style>
    .coninter{
    width:80%;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
.left{
    width:200px;
    height:100px;
    background-color:#f00;
    position:absolute;
    top:0px;
    left:0px;
}
.middle{
    height:100px;
    background-color:#00f;
    margin:0 150px 0 200px;
}
.right{
    width:150px;
    height:100px;
    background-color:#000;
    position:absolute;
    top:0px;
    right:0px;
}
    </style>
</head>
<body>

    <div class="coninter">
        <div class="left">
            123    
        </div>
        <div class="middle">
            456
        </div>

        <div class="right">
            789
        </div>

    </div>

</body>

</html>

效果图: 图片描述

混合布局

代码:

<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>混合布局</title>
    <style>
    body{
    margin:0;
}
.coninter{
    width:80%;
    margin:0 auto;
    overflow:hidden;    
}
.header{
    height:100px;
    background-color:#584665;
}
.main{
    height:400px;
    position:relative;
}
.left{
    width:200px;
    height:400px;
    background-color:#f00;
    position:absolute;
    top:0px;
    left:0px;
}
.middle{
    background-color:#00f;
    margin:0 160px 0 210px;
    height:400px;
}
.right{
    height:400px;
    width:150px;
    background-color:#000;
    position:absolute;
    top:0px;
    right:0px;
}
.fotter{
    height:100px;
    background-color:#333145;
}
    </style>
</head>

<body>

    <div class="coninter">
        <div class="header"></div>

        <div class="main">
            <div class="left">
                123    
            </div>
            <div class="middle">

            </div>

            <div class="right">
                789
            </div>
        </div>
        <div class="fotter"></div>

    </div>

</body>

</html>

效果图: 图片描述

原文链接:https://segmentfault.com/a/1190000015613253

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35834.html

文章标题:css 布局

相关文章
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下: 首先来看一下运行效果图: 具体实现代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W...
2017-03-23
js+css实现上下翻页相册代码分享
这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码。 &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; con...
2017-03-29
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果。 &lt;!DOCTYPE...
2017-03-23
JS+CSS实现的拖动分页效果实例
本文实例讲述了JS+CSS实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;拖动分页&lt;&#x2F;title&gt; &lt;meta ht...
2017-03-23
JS设置CSS样式的方式汇总
1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有’-‘号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style[‘text-align’] ...
2017-02-24
Zepto css
css(property) ⇒ value css([property1, property2, …]) ⇒ object v1.1+ css(property, value) ⇒ self css({ property: va...
2017-04-24
原生JavaScript和css实现图片轮播效果
本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE HTML&gt; &lt;html lang=&quot;zh-CN&quot;&gt; &lt;head&gt; ...
2017-03-20
回到顶部