div+css布局

已于 2023-12-19 23:35:37 修改
阅读量980 收藏 21
点赞数 18
文章标签： css 前端
于 2023-12-19 23:05:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74105106/article/details/135087587
版权

 二、三列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head></p>
<p><body>
<div id="content"><!--margin:o auto是为了居中对齐-->
  <div id="side">此处显示 id "side" 的内容</div>
  <div id="main">此处显示 id "main" 的内容</div>
</div>
</body>
</html>

块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

 也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style>

#content {margin:0 auto;}

#side {width: 202px; float: left; }

#main { margin-left: 202px; margin-right: 400px; }

</style>

</head></p>

<p><body>

<div id="content"><!--margin:o auto是为了居中对齐-->

  <div id="side"><img src="./2.jpg" width="192" height="142"></div>

  <div id="main">细心的朋友已经发现，上例中#main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？如果你能想到这一点，你的确是太聪明了，事实确实是这样，在css样式表中加上下面一行

    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。

    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。

    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。

    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。

 float浮动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#content {margin:0 auto;}
#side {width: 202px; float: left; }
#main { margin-left: 202px; margin-right: 400px; }
</style>
</head></p>
<p><body>
<div id="content"><!--margin:o auto是为了居中对齐-->
  <div id="side"><img src="./2.jpg" width="192" height="142"></div>
  <div id="main">细心的朋友已经发现，上例中#main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？如果你能想到这一点，你的确是太聪明了，事实确实是这样，在css样式表中加上下面一行
    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。
    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。
    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。
    文章出处：标准之路(http://www.aa25.cn)大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。
    文章出处：标准之路(http://www.aa25.cn)</div>
</div>
</body>
</html>

 三列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { margin:0;}
#content{width: 800px;margin: 0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 ; }
</style>
</head></p>
<p><body>
    <div id="content">
        <div id="side">此处显示 id "side" 的内容</div>
        <div id="side1">此处显示 id "side1" 的内容</div>
        <div id="main">此处显示 id "main" 的内容</div>
    </div>
</body>
</html>

 纵向导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            font-family: Verdana;
            font-size: 12px;
            line-height: 1.5;
        }
        #menu{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
            width: 100px;

        }
        #menu ul{
            list-style-type:none;
            padding: 0px;
            margin: 0px;
        }
        #menu ul li{
            background-color: #eee;
            padding: 0px 8px;
            line-height: 26px;
            border-bottom: 1px solid #ccc;
        }
        a{
            color: #000;text-decoration: none;
        }
        a:hover{
            color: #f00;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="@#">首页</a></li>
            <li><a href="#">网页版式布局</a></li>
            <li><a href="#">div+css教程</a></li>
            <li><a href="#">div+css实例</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>
</body>
</html>

 二级纵向列表

<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</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>

 标签的默认样式
大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。

横向列表菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            font-family: Verdana;
            font-size: 12px;
            line-height: 2;
        }
        #menu{
            border:1px solid #ccc;
            width: 370px;height: 30px;
            margin: 0 auto;background-color: #eee;
        }
        #menu ul{
            list-style-type:none;
            padding: 0px;
            margin: 0px;
        }
        #menu ul li{
            float: left;
        }
        #menu ul li a{
            display: block;/*还是把a转换成块级元素*/
            padding: 0px 8px;
            height: 26px;
            color: #000;text-decoration: none;
            float: left;
        }
        a:hover{
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="@#">首页</a></li>
            <li><a href="#">网页版式布局</a></li>
            <li><a href="#">div+css教程</a></li>
            <li><a href="#">div+css实例</a></li>
            <li><a href="#">常用代码</a></li>
        </ul>
    </div>
</body>
</html>

最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。以前许多朋友提问怎么让它水平居中，其实很简单，首先导航的宽度是固定的，然后设置margin:0 auto;即可实现了

大布局

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大布局</title>
    <style type="text/css">
    #center{
        margin: 0 auto;
        width: 900px;
    }
    #header{
        height: 700px;
        background-color: #CCFFCC;
        margin-bottom: 8px;
    }
    #nav{
        height:30px; background:#CCFFCC; margin-bottom:8px
    }
    #content{
        margin-bottom: 500px;  
    }
    #main{
        float: left;
        width: 664px;
        height: 500px;
        background-color: #FFFF99;
    }
    #side{
        float:right; width:228px; height:500px; background:#FFCC99;
    }
    #footer{
        height: 70px;
        background-color: #CCFFCC;
    }
    .clearfloat{
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }
    </style>
    
</head>
<body>
    <div id="center">
        <div id="header"></div>
        <div class="clearfloat"></div>
        <div id="nav"></div>
        <div class="clearfloat"></div>
        <div id="content">
            <div id="main"></div>
            <div id="side"></div>
        </div>
        <div class="clearfloat"></div>
        <div id="footer"></div>
    </div>
    
</body>
</html>

 

影Nothing
关注
  • 18
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
利用CSS+DIV进行网页布局
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
(前端)HTML之CSS(div+css布局)
weixin_65479202的博客
04-23 1万+
前端HTML的基础知识内容的更新已经更新完毕！！！打好基础，才能学好HTML的相关知识！！！
DIV+CSS网页布局（新手必备)
Darlingmi的博客
04-20 3万+
文章目录一：网页布局的目的二：如何布局（1）：确定“版心”（2）：分析模块三：页面元素的定位机制（1）流式布局（2）浮动-float（3）绝对定位(position:absolute)(4)相对定位(position:relative)四：布局中的常用属性(1)浮动属性(float)(2)清除属性(clear)(3)溢出属性(overflow)五：元素的定位六：偏移量七：层叠属性八：语义标签九：命名规范 一：网页布局的目的 通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。 二：如何布局 （1）
网站开发之DIV+CSS简单布局网站入门篇（五）
杨秀璋的专栏
11-08 1万+
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页，通常将网站划分为顶部（Logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。这是非常基础的一篇引入性文章，采用案例的方式进行介绍的，希望对你有所帮助。运行结果如下图所示：main.html主页面代码：主要通过div进行布局的，同时用户设置导航条，鼠标悬停时背景颜色切换。css/main.css代码：该部分代码主
div+css布局资料.zip
11-08
《深入理解Div+CSS布局：构建高效网页设计》 在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升...
div+css布局制作横向带箭头步骤流程样式
11-08
在网页设计中，`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容，并利用CSS（层叠样式表）来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
div+css布局大全
03-22
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
详解DIV+CSS布局的好处和意义
12-13
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？...
DIV+CSS 网页布局心得
09-27
在网页设计领域，DIV+CSS布局已经成为主流，因为它提供了更加灵活、可维护性更强的页面构建方式。相比于传统的TABLE布局，DIV+CSS更符合Web标准，有助于提升网页的性能和可访问性。下面将详细探讨DIV+CSS布局的核心...
自己整理div+css网页标准版式布局(50种布局方式)
12-09
大四了，把之前学的些东西整理整理分享给大家，适合老师网页设计教材及初学者，里面包含了以下内容： 1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后，下边的容器跟着浮动，造成页面错乱 当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？ 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图
CSS+DIV三种布局方式
热门推荐
qq_34283987的博客
09-08 7万+
在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用
DIV+CSS网页设计布局六大原则
qq_56769697的博客
04-04 288
网页布局
DIV+CSS常用网页制作布局技术技巧(1)
最新发布
peixiancccc的博客
05-05 1052
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
关于div+css的排版布局
浪子回头
09-11 3653
css css通常被称为风格样式表(Style Sheet)，是用来进行网页风格设计的。通过设立样式表，可以统一的控制HTML中标签的显示属性，精确地定位网页元素的位置，从而更有效的美化页面外观。CSS实现了网页内容HTML和表现的分离，使得页面布局更加灵活，还可以有效的节省网络带宽，调高用户的体验。 div是一个标签....通过这对标签可以定义HTML文档中的分区，即可以把H
使用DIV+CSS布局页面——1
qq_36461411的博客
07-01 2万+
1.什么是div        div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器，例如使用&lt;p&gt;段落的标签。&lt;p&gt;段落&lt;/p&gt;        &lt;p&gt;标签作为一个容器，其中放入了内容。同样的，div也是一个容器，能够放置内容，例如： &lt;div&gt; 文档内容 &lt;/div&gt;        在传统的表格样式...
div+css实现几种经典布局
nothingonyou4的博客
07-30 1407
1、右边固定，左边自适应 注意：右边的块写上面 <div class="right"></div> <div class="left"></div> .right{ width: 100px; height: 100px; position: absolute; background-color: red; right: 0px; } .left{ height: 100px; margin-right: 100px; background
CSS+div美化和布局
ss19920903的专栏
10-31 4757
1、标记与标记             (division)是一个区块容器标记 ，即与之间可以容纳段落，标题、表格、图片、乃至章节、摘要等各种HTML元素。         因此可以把与的内容视为一个独立对象，用于CSS控制。             作为容器标记来讲，与区别不大；二者作用都是独立出各个区块。               区别：是一个块级元素，包围的元素会自动换行；  
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值