精华内容
下载资源
问答
  • CSS+DIV种布局方式

    万次阅读 多人点赞 2017-09-08 16:14:28
    绝大多数的模具工作是由CSS+DIV来完成的,因为表格布局 复杂页面时需要频繁的嵌套,代码比较复杂、难以维护,而使用CSS+DIV布局,内容和表现可以分离,代码干净整洁、可读性好、便于维护,并且样式代码可以复用

    在学习了盒模型、块级元素和行内元素得到概念后,我们来说一下CSS的一个比较重要的用途:布局。以前我们学过表格可以起到布局页面的作用,比如布局表单,但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的,因为表格布局 复杂页面时需要频繁的嵌套,代码比较复杂、难以维护,而使用CSS+DIV布局,内容和表现可以分离,代码干净整洁、可读性好、便于维护,并且样式代码可以复用,提高了开发效率,同时分离后美工和网站开发人员也可以协同合作,进一步提高了开发效率和整体网站的质量。

    一、 常规流式布局

    元素按照自身的常规显示方式显示,有两个特点:
    1.元素按照自身HTML元素定义的位置显示(怎么写的怎么显示)
    2.元素按照自身的常规显示特性显示
    比如块级元素垂直排列,行级元素水平排列。
    以前没学布局时,其实是用的就是常规流布局。

    二、 浮动(顺便讲解布局步骤)

    具体代码:
    左浮动 float:left;
    右浮动 float:right;

    我们知道编程一般都是有套路的,使用CSS+DIV布局也不例外,大体分为以下四步:
    布局步骤:
    一、画效果图
    在纸上先画出我们想要的页面的具体显示的框架。比如我们想要把一个网页分成上中下三个部分。
    二、使用DIV进行分割
    拿本例来说我们网页整体分为上中下三部分,所以我们可以使用三个div来先大体分割一下该网页.
    三、使用CSS来控制DIV布局
    使用CSS样式来控制布局的具体宽、高,并使用显著的背景标注,在需要修改时可以清楚的看到该模块。
    四、使用以上三步进行细分
    在每一模块都要通过以上三步具体划分。

    为什么使用DIV分割布局?
    我们知道HTML中的每个元素都像一个盒子一样,每个盒子都能容纳其他元素,比如div元素、p元素、h4元素等都能容纳其他元素,那么为什么我们布局的时候要用div容纳其他元素,而不用p元素、h4元素或者其他元素呢?这是因为div元素是最干净的盒子它没有其他的属性,换句话说如果只写div标签而不加任何属性的话,它只是一个没有任何特性的容器,而其他元素比如p元素,它就有自己格外的属性,比如用两个p元素布局,它们之间有空行。如果用h4布局,放在h4里面的文字都被加大了显示了,像p元素、h4元素这些容器如果用来布局的话会影响效果,所以我们使用不加带任何特性的最干净的盒子—–DIV来布局。

    示例代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style>
            *{
                margin:0px auto;
            }
    
            #all{
                text-align: center;
            }
    
            div.logo {
                width:1300px;
                height:60px;
                background-color: yellow;
            }
    
            div.copyright {
                width:1300px;
                height:60px;
                background-color: goldenrod;
            }
    
            div.middle {
                width:1300px;
                height: 500px;
            }
    
            div.menu {
                width:200px;
                height: 500px;
                background-color: #E4393C;
                /*菜单左浮动*/
                float:left;
            }
    
            div.main {
                width:1100px;
                height: 500px;
                background-color: #bad0ef;
                /*主题右浮动*/
                float:right;
                /*左浮动、右浮动都可以*/
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="all">
    
            <div class="logo">
                logo
            </div>
    
            <div class="middle">
                 <div class="menu">
                    menu
                 </div>
    
                <div class="main">
                    网站的主体内容
                </div>
            </div>
    
            <div class="copyright">
                bottom
            </div>
    
        </div>
    </body>
    </html>

    如果不使用浮动,则块级元素默认是垂直排列,而改为行级元素又无法调整宽高和边距,所以我们采用浮动,来使两个块级元素水平排列。

    多类症:不要过多的使用类选择器,这样会造成代码臃肿,可读性差,能使用其他选择器代替的就使用其他选择器

    • 浮动的若干特性
    • 1.框1向右移动
    • 2.框1向左浮动
    • 3.所有三个框向左浮动
      1框1向右移动

      2.框1向左浮动

       3.所有三个框向左浮动

    • 清除浮动

    如上图3的“被卡住”的情况,或者我们想要前两个框向左浮动,不想要第三个浮动,可以在第三个框的DIV处加 clear:left; 属性。意思是清除向左浮动的特性,第三个元素直接换行显示。

    • 使用浮动实现水平导航菜单
      示例代码:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style>
            * {
                margin:0px;
            }
    
            body {
                font: 12px/150% Arial, Verdana, "宋体";
            }
    
            /*水平导航菜单开始*/
            .horizontal-ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
    
            .horizontal-ul li {
                float: left;
            }
    
            .line {
                color: #ccc;
                padding: 0px 12px;
                /*background-color:green;*/
            }
            /*水平导航菜单结束*/
    
            a:link {
                text-decoration: none;
            }
    
            a:hover {
                text-decoration: underline;
            }
    
            .horizontal-ul li a {
                color: #666;
            }
    
            .horizontal-ul li span {
                color: #666;
            }
    
            div.horizontal-menu-div {
                width:1000px;
                height:auto;
                background-color:yellow;
    
            }
        </style>
    </head>
    <body>
        <div class="horizontal-menu-div">
    
        <ul class="horizontal-ul">
            <li><a href="">关于我们</a><span class="line">|</span></li>
            <li><a href="">联系我们</a><span class="line">|</span></li>
            <li><a href="">人才招聘</a><span class="line">|</span></li>
            <li><a href="">商家入驻</a><span class="line">|</span></li>
            <li><a href="">广告服务</a><span class="line">|</span></li>
            <li><a href="">手机京东</a><span class="line">|</span></li>
            <li><a href="">友情链接</a><span class="line">|</span></li>
            <li><a href="">销售联盟</a><span class="line">|</span></li>
            <li><a href="">京东社区</a><span class="line">|</span></li>
            <li><a href="">京东公益</a><span class="line">|</span></li>
            <li><a href="">English Site</a></li>
        </ul>
    
    
    </div>
    </body>
    </html>

    三、定位布局

    1.静态定位

    position:static;
    默认值,不写position相当于写上position:static;以前没学定位的时候其实都是静态定位,元素在它原本的位置显示,即使加了top、left等也不起作用。

    2.相对定位

    相对定位是相对于自身的原始位置进行平移,如果设置position:relative;表示相对定位。
    z-index:值越大越在上面
    注意:z-index必须加在已经定位的元素上才起作用。

    3.绝对定位

    子容器相对于父容器的定位,如果没有父容器,则相对于body定位。
    position:absolute;
    示例代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin:0;
            }
    
            div.grandpa{
                width: 100%;
                height:100%;
                background-color: gray;
                position: absolute;
            }
    
            div.father{
                width:100px;
                height:100px;
                top:100px;
                left:100px;
                position: absolute;
                background-color: blue;
            }
    
            div.son{
                width:50px;
                height: 50px;
                right: 0px;
                bottom:0px;
                position: absolute;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="grandpa">
            <div class="father">
                <div class="son"></div>
            </div>
        </div>
    
    </body>
    </html>

    4.fixed固定定位

    也是相对定位,相对于窗口的
    position:fixed;

    那么我们什么时候用相对定位,什么时候用绝对定位呢?
    一般顶层容器我们使用相对定位,子容器使用绝对定位,这样的好处是父容器移动时,子容器能够跟着父容器移动,而不用再调整子容器的位置。

    展开全文
  • 配合float一起做DIV的横行布局最好。 补充: 今天发现float+overflow的一个缺点: 场景:需要实现下图这个样的效果: 开始我是如下实现的: 上面红框是主要代码:为了实现“一段文字的两边各有...

    1.使用display: inline;将块级元素转变为行内元素:

    CSS

    .item-test{
        border: 1px solid black;
        padding: 7px;
        cursor: pointer;
        /*display: table-cell;*/
        /*float: left;*/
        width: 12px;
        height:214px;
        display: inline;
    }

    HTML

    <div class="item-test">
        <img style="" src="../Public/images/t1.png">
    </div>

    缺点:虽然可以做到横向布局,但是不能设置宽度和高度,padding和margin也是没有用,如果需要border就更加不堪入目:
    033958_1e3X_2487410.png

    而且,一旦你在使用了display:inline;的元素内添加块级元素,display:inline就会失效,变回块级元素的效果。

    2. 使用display: table-cell;模拟table的元素:

    这种方法比第一种方法要好很多,可以调是高度和宽度,padding也可以用,但是不能用margin(想想也明白,对td(table-cell就是模拟td)使用margin本来就不行)
     

    .item-test{
        border: 1px solid black;
        padding: 7px;
        cursor: pointer;
        /*display: table-cell;*/
        /*float: left;*/
        width: 300px;
        height:214px;
        display: table-cell;
        margin-right: 20px;
    }
    
    <div class="item-test">
        <img style="" src="../Public/images/t1.png">
    </div>
    <div class="item-test">
        <img style="" src="../Public/images/t1.png">
    </div>

    效果:

    034814_Eeym_2487410.png
    缺点:不能使用margin

     

    3. 使用float浮动属性:

    .item-test{
        border: 1px solid black;
        padding: 7px;
        cursor: pointer;
        float: left;
        width: 300px;
        height:214px;
        margin-right: 20px;
    }
    
    <div class="item-test">
        <img style="" src="../Public/images/t1.png">
    </div>
    <div class="item-test">
        <img style="" src="../Public/images/t1.png">
    </div>

    使用浮动就比上面的两种方法都要好了, 高度和宽度,padding,margin 都能用:
    035350_cH4r_2487410.png

    缺点:你给他加个父元素,并输出父元素的border就会发现,父元素没有被子元素的高度撑起来:
     

    .block-live,.block-review{
       padding: 0;
       border: 1px solid red;
    }
    
    
    <ul class="block-live">
       <div class="item-test">
           <img style="" src="../Public/images/t1.png">
       </div>
       <div class="item-test">
           <img style="" src="../Public/images/t1.png">
       </div>
    </ul>

    035707_7mJ3_2487410.png
    个人知道的解决方法有三个:

    1.给父元素也添加浮动属性,虽然可以 被子元素的高度撑起来 ,但是对于父元素的同级元素来说,父元素的布局就会走形,想要保持不走形,就得将所有的同级元素添加浮动属性。

    2.在最后一个元素后面添加一个任意元素,并添加  clear:both;  用于清除浮动:

    <ul class="block-live">
       <div class="item-test">
           <img style="" src="../Public/images/t1.png">
       </div>
       <div class="item-test">
           <img style="" src="../Public/images/t1.png">
       </div>
       <div style="clear:both;"></div>
    </ul>

    3.给父元素添加 overflow: hidden;属性:

    .block-live,.block-review{
       padding: 0;
       border: 1px solid red;
       overflow: hidden;
    }

    个人认为,这个是最好的方法了,既可以被子元素的影响,也不会对该元素原来的布局产生影响。

    配合float一起做DIV的横行布局最好。

    补充:
    今天发现float+overflow的一个缺点:
    场景:需要实现下图这个样的效果:

    143158_m1sr_2487410.png

    开始我是如下实现的:

    143517_LGID_2487410.png

    上面红框是主要代码:为了实现“一段文字的两边各有一天水平线的效果” ,我用了绝对定位 将“第三方登录”所在div上移13px,有一半移除了他的父元素。然后实现的效果是那面这样,被移除的一半消失了,我开始怀疑是显示的优先级,就用z-index来试了下,当然是不行的。


    143126_xY3X_2487410.png

    看到overflow:hidden我就醒悟了,被设置了该属性的元素,它所有溢出的内容都会被隐藏。

    最后是,去掉了 overflow:hidden ,在最后添加了一个元素用于清除浮动(即第二种让浮动的子元素影响父元素的方法):

    144318_lnYo_2487410.png

    144256_MaFq_2487410.png

    转载于:https://my.oschina.net/u/2487410/blog/685229

    展开全文
  • DIV+CSS布局

    2019-11-13 15:04:52
    DIV+CSS的网页标准化设计是web标准中的一新的布局方式,正逐渐代替传统的表格(Table)布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页,采用层(DIV布局,并且使用...

    DIV+CSS布局方法

    DIV+CSS的网页标准化设计是web标准中的一种新的布局方式,正逐渐代替传统的表格(Table)布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页,采用层(DIV)布局,并且使用层叠样式表(CSS)来实现页面的外观,给网站浏览者更好的体验。

    DIV+CSS布局的优势:

    1、表现和内容分离,便于站点重构页面
    DIV+CSS模式具有比表格更大的优势,他将网页结构与内容相分离,代码简洁,利于搜索,方便后期维护和修改。
    2、结构清晰,对搜索引擎更加友好
    DIV+CSS构架的页面具备搜索引擎SEO的先天条件,配合优秀的内容和一些SEO处理,可以获得更好的网站排名。
    3、便于web项目开发分工协作
    DIV+CSS构架的表现和内容分离的特性使得程序员和页面设计者只要通过一定页面元素的约定便可进行各自擅长的程序控制和页面展示部分的开发,减少相互的关联性,大大提高了开发效率。

    DIV+CSS布局的操作方法:

    布局的标准形式:
    头部+导航+内容+尾部
    内容部分的布局又可分为两列右窄左宽型、两列左窄右宽型,3列宽度居中几种方式。这些页面布局的基本原则是为每个独立的部分建立一个div层,以头部+导航+两列右窄左宽型+尾部布局为例,其div布局如下:

    <div id="container">
       <div id="header">This is the Header</div>
       <div id="menu">This is the Menu</div>
       <div id="mainContent">
         <div id="sidebar"> This is the sidebar</div>
         <div id="content"></div>
       </div>
       <div id="footer">This is the footer</div>
    </div>
      

    然后利用css属性对div层进行版式等相关信息的控制
    例如sidebar层和content层的相对位置可以通过设定#sidebar{float:right}和#content{float:left}进行,即通过设定层的向右浮动和向左浮动完成定位。
    CSS对层的控制主要体现在层容器与页面相对的上下左右边距、内容与边框之间的填充边距、内容区域大小、边框变化等几个方面问题,如图所示:
    在这里插入图片描述
    width和height定义的是content部分的宽度和高度,padding、border和margin的宽度依次加在外面,背景会填充padding和content部分,通常,与页面的相对位置主要由margin属性来控制,而padding是指元素的周边和内部的内容之间所空的空格,又称为填充区域。
    在CSS的样式表定义中,进行一般的网页布局需要了解以下几个方面的问题:
    1、保持居中
    保持整体页面居中
    通过CSS的margin属性对元素进行定义可以达到控制网页显示位置的效果

    body{text-align:center;margin:0 auto;}
    

    ”margin:0 auto“代表上下边距为0, 左右边距为自动调整。
    保持页面背景居中
    页面背景的居中包括左右居中和上下居中,可使用下面的定义:

    body{background:url()#FFF no-repeat center}
    

    让url指示图片设置背景不重复(no-repeat) 并将居中(center),这个居中是左右居中,而垂直居中不需要设置,会自动居中。
    文字图片内容居中
    对于左右居中:
    text-algin:center 即可让文字与图片内容居中
    对于文字垂直居中,则要设置行高 使用line-height来实现文字与图片的垂直居中。当line-height和height的值一样时 则居中。
    2、内容排版
    在需要水平排版内容时,通过margin-left和margin-right来调整左右间距达到合适的效果,在需要垂直排版内容时,通过margin-top和margin-bottom调整上下间距达到合适效果。
    3、浏览器的兼容性
    不同的浏览器由于设计的不同,对于同样的CSS设计可能效果略有不同,所以在完成页面的设计后需要在可能碰到的浏览器上进行测试。目前较常用的浏览器有:(IE9、IE10、Google Chrome、Firefox、Opera等)。
    页面DIV布局分析
    页面结构大致分为以下几个部分:
    (1)头部区域:包含网站的标题和说明文字。
    (2)导航区域:包含一组横向导航条。
    (3)主体部分:又分为侧边栏、主题内容。
    (4)底部:包括一些版权信息。
    设计结构如图:
    在这里插入图片描述其DIV结构如下面的代码块:

    <div id="Header"><!--页面头部--></div>
    <div id="menu"><!--页面导航--></div>
    <div id="content"><!--页面主体-->
       <div class="content_left"><!--侧边栏--></div>
       <div class="content_right"><!--主题内容--></div>
    </div> 
    <div id="Footer"><!--页面底部--></div>
    

    有了这些分析,页面布局与规划已经完成,接下来就是完成HTML代码和CSS搭建出整个页面的框架。

    展开全文
  • 下面是我写网页时记录div在页面居中的方法并进行了一点效果对比 一、 第一居中主要是通过设计多少像素来设计居中的 代码与效果图如下 看法:对于运用像素来设计元素居中达到的效果并不是很理想:首先我们要对像素...

    开发工具与关键技术:DW css
    作者:江金燕
    撰写时间:2019、2、17

    下面是我写网页时记录div在页面居中的方法并进行了一点效果对比
    一、 第一种居中主要是通过设计多少像素来设计居中的
    代码与效果图如下
    在这里插入图片描述
    看法:对于运用像素来设计元素居中达到的效果并不是很理想:首先我们要对像素值进行不断的调整,即使如此达到的效果也不完美 毕竟像素总有差异
    二、 第二种主要是通过百分比来完成的 主要就是对上下左右设计百分比 这里主要运用上
    代码与效果图如下
    在这里插入图片描述
    看法:大家可以看到我上外边距离设计了50% 可是效果却大到我想要居中的效果
    三、第三种主要是运用flex布局弄的
    代码与效果图如下
    在这里插入图片描述
    看法:大家可以看到对比前两个方法 第三种是唯一达到垂直和水平居中的完美效果:使用felx布局可以为页面格式布局提供具有更大的灵活性。

    以上是三种居中的方法

    知识扩展:flex容器与flex项目
    Flex容器有六大属性 (常用的有)
    一、 Flex—direction属性 包括四个值
    二、 flex—wrap属性(少用)
    三、 flex-flow 属性
    四、 justify—content属性对齐方式 包括四个值 用处多点
    1、 felx-start 左对齐
    2、 flext-end 右对齐
    3、 center居中对齐 (例如第三种方法)
    4、 space-around 相隔间隔相等
    五、 align-items 属性
    1、center 交叉轴对齐(常用)
    六、align-conter 属性

    Flex项目的属性也有六种
    一、 order 属性
    二、 flex-grow属性
    三、 flex-basis属性
    四、 flex-basic 属性
    五、 flex 属性(复合属性)
    六、align-self属性

    备注:flex容器与flex项目 在此只做此案例涉及的知识点解释,
    具体更多容器的属性和项目详解如果有兴趣可登录下面的一个网址 我也是通过老师上课在那里学习的哈

    希望对你居中布局有所帮助呀
    网址: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    展开全文
  • DIV+CSS布局大全

    千次阅读 2018-08-11 14:00:27
    Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine
  • DIV+CSS布局中的个重难点属性 1组织元素(SPan禾口 div ) SPan和div元素用于组织和结构化文档并经常联合 class和id属性一起使用 在这一课中我们将进一步探究 SPan和div的用法因为这两个HTML元素对于CSS是很重要的 ...
  • DIV+CSS布局和Table布局对比

    千次阅读 2017-06-14 19:42:13
    虽然目前大多数网页都是采用的DIV+CSS布局的方式,但是也有少数的老式Web网页采用的是Table布局,我们可以一起来看看两种布局方式的优劣。 布局对比 div+css布局 div+css的布局方式属于W3C...
  • div+css的几种常用的布局

    千次阅读 2009-05-07 20:29:00
    CSS常用布局实例一列单行一列 代码:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; margin-right:auto; width: 400px; }两行一列 代码:body { margin: 0px; ...
  • div+css布局

    千次阅读 2019-10-04 12:59:20
    重构”的春风吹遍大江南北,... 我们看到有嵌套6、7层的div布局,有不用table的表格,有纯div+a构成的页面,有成百上千的表现层class……现在关于标准的书籍越来越多,除了少数本标榜“高级技巧”的书籍以外,...
  • div+css布局与table布局比较

    千次阅读 2019-05-06 15:04:34
    div+css布局与table布局比较 一、背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本 以及静态图片等组成的,类似于报纸的形式,分区分块显示,table标签的结构表现恰好...
  • 简洁 DIV+CSS布局入门之二 作者:佚名 文章来源:蓝色理想 简洁 DIV+CSS布局入门二 ( DIV+CSS
  • pc端常见的几种布局:分栏布局,通栏布局,版心布局,版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度,让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+...
  • 一、左右两侧,左侧固定宽度200px,右侧自适应占满 ... ...<div class="divBox"> <div class="left"></div> <div class="right"></...这些只是实现经典布局的一些方法,还有其他的方法,这里就不一一列出了 。
  • DIV居中的几种方法

    2016-11-17 14:58:52
    DIV居中的几种方法
  • DIV+CSS布局基本流程及实例介绍

    千次阅读 2020-02-24 14:51:16
    都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了...
  • HTML CSS + DIV实现局部布局

    万次阅读 多人点赞 2012-08-19 00:16:57
    1、本章教大家掌握2种布局方式:  1)顶部导航菜单布局,效果图:   2)购物版块布局,效果图:   2、技术目标: 使用div + ul-li实现导航菜单布局  使用div + dl-dt-dd实现购物版块布局 3、一般的局部...
  • 题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 要求:允许增加额外的DOM节点,但不能修改现有节点...
  • div盒子的几种放置模式

    千次阅读 2014-10-18 13:56:28
    布局居中或div布局居中,此时将使用margin样式,可能对新手来说margin好像与居中这一词不相干,但恰巧margin对应div布局居中联系非常紧密。在不设置margin:0 auto时,最外层DIV布局有的浏览器默认居中、有的浏览器...
  • Web前端中的几种流行布局

    千次阅读 2019-01-26 15:56:58
    Web前端中的几种流行布局 欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间宽度自适应 圣杯布局可以将整个div.container看做一个奖杯,...
  • DIV 左右布局方案

    万次阅读 2017-03-01 20:59:26
    DIV 左右布局方案
  • Div+CSS 布局大全

    千次阅读 2013-03-29 10:15:56
    布局大全》               整理者:Jesse Zhao   网站:http://JesseZhao.cnblogs.co m                                                 ...
  • Web前端中的几种布局

    千次阅读 2019-01-24 02:52:51
    圣杯布局是一三列布局,两边定宽,中间宽度自适应 圣杯布局可以将整个div.container看做一个奖杯,div.left和div.right看做奖杯的两个耳朵 圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖...
  • 以下是几种常用的中间自适应,两边固定的布局方法。 一、flex弹性盒布局: 核心:将父元素设置为弹性盒布局:display:flex; html代码: <div id="father"> <div id="son1"><h3>宽度固定</h3&...
  • 理解Div布局

    千次阅读 2009-01-05 02:20:00
    很愚昧的用table布局很久,最近开始学习div+css布局,当初就是由于不理解div的位置控制,所以一直也顾不上深入去学习,加上好久不在开发web应用,所以就放下了,现在开始学习ajax,就必须要学习css+div了,呵呵!...
  • div布局,网页制作

    2009-02-09 17:55:08
    几种公司常用布局,大家下载下来看看,学习学习,看看
  • 网页设计(二)——DIV+CSS布局1

    千次阅读 2020-07-11 14:38:02
    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。最近打算把原来的一些资料整理一下...DIV+CSS布局方式并不是一新的语言或者体系,它就是html语言中的一部分。 简单来说就是把标签中的样式...
  • css 布局几种方式

    2019-03-25 15:51:44
    css 布局的几种方式 table布局:table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式。 display:table;dispaly:table-cell <div class="header">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,416
精华内容 18,566
关键字:

div几种布局