DIV与CSS划分页面布置

最新推荐文章于 2024-03-17 11:06:05 发布
最新推荐文章于 2024-03-17 11:06:05 发布
阅读量395 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/tianhuahua/blog/156329
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

听过网上用DIV和CSS布置网页，终于有了一个很好的整体思想，对于这方面的布置有了系统

些的了解，总结大体如下：
1、利用DIV布置出网页的头+体+脚（header+main+footer),并用CSS对应样式控制代码如下：
HTML:
<html>
<head>
    <title>DIV+CSS网页布置</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
    <div id="container">
        <div id="header">

        </div>
        <div id="main">

        </div>
        <div id="footer">

        </div>
    </div>
</body>
</html>
说明：（1）我们将header+main+footer放在一个容器（container）中，便于对整体控制页

面边距；（2）对于在HTML只用一次的标签，我们应用div中的id命名（对应CSS中#“ID名”

）。
CSS：
body{
    margin:0;
    padding:0px;
    font:12px Arial,宋体;
    text-align:center;
}

#container{
    margin-left:auto;
    margin-right:auto;
    width:960px;
    text-align:left;
    height:1200px;    <!--tem-->
}

#header{
    float:left;
    width:100%;
    height:300px;    <!--tem-->
    background:red;    <!--tem-->
}

#main{
    float:left;
    width:100%;
    height:820px; <!--tem-->
    background:yellow; <!--tem-->
}

#footer{
    float:left;
    width:100%;
    height:80px;
    background:blue;
}

说明：（1）为了避免不同显示器的效果不同，我们一般定义width:960px;（2）<!--tem-->

是临时定义，方便查看效果（后同）；（3）float:left;IE与FF居中不同，所以我们让标签

脱离文档流；

2、为了界面美观，在header+main+footer的中间加上间隔标签，代码如下：
HTML:
<html>
<head>
    <title>DIV+CSS网页布置</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
    <div id="container">
        <div id="header">

        </div>
        <div class="nav"></div>
        <div id="main">

        </div>
        <div class="nav"></div>
        <div id="footer">

        </div>
    </div>
</body>
</html>

说明：由于间隔标签在很多地方应用，所以定义为class类型（在CSS中：."条名")（下同）;

CSS:
.nav{
    float:left;
    width:100%;
    height:10px;
    clear:both; <!-- 清除两边颜色-->
    overflow:hidden;
}

    到这里页面我们已经分割三部分，接下来就是分别设计每一部分，设计出别具一格

的网页了。

3、header部分：
（1）我们将它分为logo+banner（网站大标题）+tool三部分。
HTML:
<html>
<head>
    <title>DIV+CSS网页布置</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
    <div id="container">
        <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

            </div>
            <div id="tool">

            </div>
        </div>
        <div class="nav"></div>
        <div id="main">

        </div>
        <div class="nav"></div>
        <div id="footer">

        </div>
    </div>
</body>
</html>

CSS:
#header #logo{
    float:left;
    margin-right:10px;
    width:200px;
    height:80px;
    background:#ff00ff;
}

#header #banner{
    float:left;
    width:600px;
    height:80px;
    background:blue;
}

#header #tool{
    float:right;
    width:140px;
    height:80px;
    background:#a12bbf;
}

说明：由于logo+banner+tool均在header内，因而，在定义样式时候，前面加上#header，这

样精准定位样式。

（2）我们在浏览网站时，会看到
，
所以我们在logo+banner+tool下面加menu标签，当然在logo+banner+tool和menu之间最好加

上间隔标签：
HTML:
<html>
<head>
    <title>DIV+CSS网页布置</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
    <div id="container">
        <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

            </div>
            <div id="tool">

            </div>
            <div class="nav"></div>
            <div id="menu">
                <ul>
                    <li><a href="##">首页</a></li>
                    <li class="tiao"></li>
                    <li><a href="##">产品展示</a></li>        

                    <li class="tiao"></li>
                    <li><a href="##">联系我们</a></li>        
                    <li class="tiao"></li>
                    <li><a href="##">用户登录</a></li>        

                    <li class="tiao"></li>
                    <li><a href="##">联系方式</a></li>
                </ul>
            </div>
        </div>
        <div class="nav"></div>
        <div id="main">

        </div>
        <div class="nav"></div>
        <div id="footer">

        </div>
    </div>
</body>
</html>

CSS:
#header #menu{
    float:left;
    width:100%;
    background:#aaa;
    clear:both;
}

ul{
    margin:0;
    padding:0px;
    list-style:none;
}

#menu li{
    height:28px;
    line-height:28px;
    float:left;
    width:80px;
    text-align:center;
}

#header #menu .tiao{
    float:left;
    width:2px;
    height:12px;
    margin-top:8px;
    overflow:hidden;
    background:#000;
}

说明：到这里header部分设计基本完成，但不要着急，还有些东西调，当你将这三部完成的

时候，在显示器上一定发现header部分高度出现变化，这时候，我们要将header部分标有

<!--tem-->的全部部分去掉，才不影响效果：
CSS：
#header{
    float:left;
    width:100%;
}

4、main部分设计：
（1）首先，我们分为左右（leftbox+rightbox）两个栏：
HTML:
<html>
<head>
    <title>DIV+CSS网页布置</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
    <div id="container">
        <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

            </div>
            <div id="tool">

            </div>
            <div class="nav"></div>
            <div id="menu">
                <ul>
                    <li><a href="##">首页</a></li>
                    <li class="tiao"></li>
                    <li><a href="##">产品展示</a></li>        

                    <li class="tiao"></li>
                    <li><a href="##">联系我们</a></li>        
                    <li class="tiao"></li>
                    <li><a href="##">用户登录</a></li>        

                    <li class="tiao"></li>
                    <li><a href="##">联系方式</a></li>
                </ul>
            </div>
        </div>
        <div class="nav"></div>
        <div id="main">
            <div id="leftbox">

            </div>
            <div id="rightbox">

            </div>
        </div>
        <div class="nav"></div>
        <div id="footer">

        </div>
    </div>
</body>
</html>

注意：这里我们将main标签的CSS中带<!-- tem-->的都去掉了。

CSS:
#main{
    float:left;
    width:100%;
}

#main .leftbox{
    float:left;
    width:750px;
    height:410px;<!--tem-->
}

#main .rightbox{
    float:right;
    width:200px;
    height:410px;
    background:red;
}

（2）在leftbox中我们将其分成四份（left+right+left+right）；
HTML:
<html>
    <head>
        <title>CSS和DIV布置页面</title>
        <!--        <meta http-equiv="Content-Type"

content="text/html;charset=UTF8">-->
        <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="logo">

                </div>
                <div id="banner">

                </div>
                <div id="tool">

                </div>
                <div class="nav"></div>
                <div id="menu">
                    <ul>
                        <li><a href="##">首页</a></li>
                        <li class="tiao"></li>
                        <li><a href="##">产品展示

</a></li>
                        
                        <li class="tiao"></li>
                        <li><a href="##">联系我们

</a></li>
                        
                        <li class="tiao"></li>
                        <li><a href="##">用户登录

</a></li>

                        <li class="tiao"></li>
                        <li><a href="##">联系方式

</a></li>

                        <li class="tiao"></li>
                        <li><a href="##">新闻</a></li>
                    </ul>
                </div>
            
            </div>
            <div class="nav"></div>
            <div id="main">
                <div class="leftbox">
                    <div class="left">

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

                    </div>
                    <div class="nav"></div>
                    <div class="left">

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

                    </div>
                </div>
                <div class="rightbox">

                </div>
            </div>
            <div class="nav"></div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>

注意：这里leftbox中带有<!--tem-->的都删除了。
CSS:
#main .leftbox{
    float:left;
    width:750px;
}

.leftbox .left{
    float:left;
    width:300;
    height:200px;
    background:yellow;
}

.leftbox .right{
    float:right;
    width:440px;
    height:200px;
    background:yellow;
}

#main .rightbox{
    float:right;
    width:200px;
    height:410px;
    background:red;
}

现在，一个网页大致的布局就划分完成了，接下来的美工工作要自己去设计了。

整体代码如下：

HTML:

<html>
    <head>
        <title>CSS和DIV布置页面</title>
        <!--        <meta http-equiv="Content-Type" content="text/html;charset=UTF8">-->
        <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="logo">

                </div>
                <div id="banner">

                </div>
                <div id="tool">

                </div>
                <div class="nav"></div>
                <div id="menu">
                    <ul>
                        <li><a href="##">首页</a></li>
                        <li class="tiao"></li>
                        <li><a href="##">产品展示</a></li>
                        
                        <li class="tiao"></li>
                        <li><a href="##">联系我们</a></li>
                        
                        <li class="tiao"></li>
                        <li><a href="##">用户登录</a></li>

                        <li class="tiao"></li>
                        <li><a href="##">联系方式</a></li>

                        <li class="tiao"></li>
                        <li><a href="##">新闻</a></li>
                    </ul>
                </div>
            
            </div>
            <div class="nav"></div>
            <div id="main">
                <div class="leftbox">
                    <div class="left">
                        <div class="tit"><h3>热点文章</h3></div>
                        <div class="content">
                            <ul>
                                <li><a href="##">*******</a></li>
                                
                                <li><a href="##">*******</a></li>
                                <li><a href="##">*******</a></li>
                                <li><a href="##">*******</a></li>
                                <li><a href="##">*******</a></li>
                                <li><a href="##">*******</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="right">

                    </div>
                    <div class="nav"></div>
                    <div class="left">

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

                    </div>
                </div>
                <div class="rightbox">

                </div>
                <div class="nav"></div>
                <div class="guanggao">广告</div>
                <div class="nav"></div>
                <div class="leftbox">
                    <div class="left">

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

                    </div>
                    <div class="nav"></div>
                    <div class="left">

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

                    </div>
                </div>
                <div class="rightbox">

                </div>
            </div>
            <div class="nav"></div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>

CSS:

body{
    margin:0;
    padding:0px;
    font:12px Arial,宋体;
    text-align:center;
}

#container{
    margin-left:auto;
    margin-right:auto;
    width:960px;
    text-align:left;
}

#header{
    float:left;
    width:100%;
}


#header #menu{
    float:left;
    width:100%;
    background:#aaa;
    clear:both;
}

ul{
    margin:0;
    padding:0px;
    list-style:none;
}

#menu li{
    height:28px;
    line-height:28px;
    float:left;
    width:80px;
    text-align:center;
}

#header #menu .tiao{
    float:left;
    width:2px;
    height:12px;
    margin-top:8px;
    overflow:hidden;
    background:#000;
}
#main{
    float:left;
    width:100%;
}

#main .leftbox{
    float:left;
    width:750px;
}

.leftbox .left{
    float:left;
    width:300;
    height:200px;
    background:yellow;
}


.tit{
    float:left;
    width:100%;
    height:21px;
    background:URL("image/title.png") no-repeat right;
}

.tit h3{
    margin:0px;
    padding:0px;
    padding-left:10px;
    width:100px;
    line-height:21px;
    font-size:14px;
    background:URL("image/title.png") no-repeat left;
}

.content{
    float:left;
    width:298px !important;
    width:300px;
    height:174px;
    border:1px solid #bbb;
}

.content ul{
    
}

.content li{
    width:280px;
    line-height:18px;
    text-align:left;    
}

.content li a{
    text-decoration:none;
    background:URL("image/bon.png") no-repeat center;
    padding-left:15px;
}

a:hover {
    position:relative;
    top:1px;
    left:1px;
    color:red;
}

.leftbox .right{
    float:right;
    width:440px;
    height:200px;
    background:yellow;
}

#main .rightbox{
    float:right;
    width:200px;
    height:410px;
    background:red;
}

#main .guanggao{
    float:left;
    width:100%;
    height:80px;
    background:blue;
    clear:both;
}


#footer{
    float:left;
    width:100%;
    height:80px;
    background:blue;
}

.nav{
    float:left;
    width:100%;
    height:10px;
    clear:both;
    overflow:hidden;
}


转载于:https://my.oschina.net/tianhuahua/blog/156329

Vincent8080
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css页面布局.rar
06-06
《深入理解Div+CSS页面布局》 Div+CSS布局是现代网页设计中不可或缺的一部分，它以其灵活性、可维护性和易优化的特点，成为了构建响应式和动态网页的标准技术。本资料包"div+css页面布局.rar"包含了一篇教程文档...
Div+CSS仿支付宝登录页面
09-27
【Div+CSS仿支付宝登录页面】的实现是一个前端网页设计的示例，旨在教你如何使用HTML和CSS技术来创建一个类似支付宝登录界面的布局。这个教程对于初学者来说具有很高的参考价值，因为它提供了实际的代码实例，可以...
DIV+CSS实现网页布局
lllljz的专栏
06-15 1756
表格网页布局有很多弊端，例如定义繁琐，代码查看不方便等，用DIV+CSS模式实现网页布局较为系统、方便，通用性较强。 例如现在比较常用的在网页底部很长的一栏，就可以用其实现。 我们来看看具体实现方式，举例说明。为方便观看，我没用代码实现，而用直接点击鼠标来实现。 在Dreamweaver的常用工具栏中，点击div。弹出框中的ID项填入名称。 点击右侧的CSS栏，点击
计算机网页div怎么划分,《网页布局与实现（DIV+CSS）》
weixin_30800249的博客
07-26 197
编辑推荐：《高职高专计算机教学改革新体系规划教材》特色：·反映产业技术升级，符合职业教育规律和高端技能型人才成长规律，根据计算机类专业建设和教育教学改革而设计。·对接职业标准和岗位要求，以就业为导向，以提升职业岗位竞争力为目标，是适应新兴产业、新职业和新岗位要求的特色教材。·教材尽力配套教学资源库，包括精品课程的配套网站、教学大纲及考核方案、实训案例、通用素材库、习题及其答案，以及必要的多媒体光盘...
前端学习（38）：css颜色小练习
歌谣的博客
12-07 355
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
蓝色背景指的是哪部分+div分层展示
uaena的博客
01-23 214
讲定位还是得从 文档流与盒模型说起 border 给你2选项， 你会选择一还是二？ 1.红色边框内部围成的部分 2.红色边框外部围成的部分 正确答案是2 来通过设置border的透明度验证 按下之后border会越来越半透明，在他半透明时，后面逐渐有蓝色透出来 So，蓝色背景其实是在 border的外边缘分 div的分层 ps 软件名叫SketchUp 浮动中的文字和文字和比谁高，还是文字高（浮动元素就会被盖住） 块级元素中的文字和文字比谁高？（后...
如何在一个div中划分区域_蛋糕店设计，区域如何划分？
weixin_31320437的博客
01-20 671
点击上方 “阜龙企业”关注我们，订阅最新资讯 ！随着时间的发展，现在的蛋糕店已经不像以前那样，只是卖产品，现在的蛋糕店，除了产品外，还有自己的服务。哪家店的产品好、服务好、装修设计好，是吸引和留住顾客的重要方面。蛋糕房必须有自己独特的设计风格才能在竞争中占据一席之地。让我们来看看面包店的装饰设计以及区域如何划分。休闲区的设计设立休闲区，创造一个自然、放松和舒适的室内空间。这就要求设计师...
DIV+CSS简单登录界面模板
06-06
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的`Div`（Division，分块）元素并应用相应的`CSS`（Cascading Style Sheets，层叠样式表）样式来构建页面结构和外观。标题提到的“DIV+CSS简单...
Div+CSS仿微信公众平台登录页面
09-27
主要为大家详细介绍了Div+CSS仿微信公众平台登录页面的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用DIVCSS技术的WEB页面布局实践.doc
11-29
DIV+CSS 技术在 WEB 页面布局实践中的应用 随着互联网技术的发展，WEB 页面布局设计变得越来越重要。DIV+CSS 技术作为一种新的网页布局方法，正越来越多地被应用于 WEB 页面设计中。下面我们将通过对 DIV+CSS 技术...
如何在一个div中划分区域_儿童游乐空间如何进行区域划分？
weixin_31433527的博客
01-23 195
不同年龄段的孩子，对玩耍的方式有不同的需求；相同年龄段的孩子，对玩耍的方式也有各自的喜好。因此，为了满足儿童不同的游乐需求，在对儿童游乐空间进行设计时，应该做好不同功能区的分配，让每个孩子都能在游乐空间中找到自己理想的玩耍之地。下面，来跟小编一起看一下儿童游乐空间功能区该如何进行划分吧！一、体能拓展区奔跑、跳跃、爬行等一些体力性的活动需要一个宽敞的活动空间，在此区域配备一些模块化的游乐设备，并将地...
数据可视化之div大屏分区
最新发布
xiaoyue666_的博客
03-17 656
这段代码的目的是通过纯 HTML 和 CSS 创建一个具有明确区域划分的静态网页布局，通过颜色区分不同的区域，适用于展示具有层级结构的信息。的宽度的98%（通过边距实现），高度为20%。这部分位于页面的最上方。的部分后，高度大约为78%）。它是容纳其他子容器的主要区域。：代表中间主体区域，背景色为绿色，紧随。区域之后，占据剩余的宽度和高度（减去。：代表头部区域，背景色为蓝色，占据。
DIV区域图解
weixin_34220963的博客
10-27 207
转载于:https://www.cnblogs.com/sheseido/archive/2010/10/27/1862294.html
【如何进行div划分】云麓谷信息技术中心研发部中级作业【HTML+CSS静态页面】
weixin_51877075的博客
10-07 341
introduction 这是中南云麓谷信息技术中心2021年招新的中级作业的详细解析。 考察的技术点 考察 HTML 知识点：div/span ,class/id ，图片，超链接等。 考察 CSS 知识点： flex 布局，盒子模型，fixed 定位，background 背景图片，box-shadow 阴影，元素圆角的控制等。 参考标准 就照着这个图做： 技术挑战 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒子模型
前端利用div划分区域实战：猫脸动画
qq_51704382的博客
11-10 518
前端利用div划分区域实战：猫脸动画
DIV+CSS难点之经验总结
deepwishly专栏
03-03 1108
1、网页居中显示：    需要设置两个地方，一个是body，一个是外边框div。    CSS：body{ margin:0; padding:0; text-align:center;}#main{ /*最外层DIV*/ width:760px; margin:0 auto; padding:0}    2、文字垂直居中显示：
前端笔记-CSS布局使得网页分成3部（头，内容，脚）
IT1995的博客
08-06 5670
css代码如下： <style> * { margin: 0; padding: 0; } .top { width: 100%; height: 40px; background-color: #2fa8ec; font-size: 20px; line-height: 25px; } .middle ...
div实现页面划分为左，中，右三栏
qq_37555524的博客
09-17 8096
1、实现方法 2、注意的问题 1、实现方法 利用css分栏，一个整体的div id为wrap ，包含三个div，分别代表左栏（wrap-1）、中栏(wrap-m)、右栏（wrap-r） 通过float...
CSS+DIV三种布局方式
热门推荐
qq_34283987的博客
09-08 7万+
在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值