1、DIV+CSS布局

说明：在网页开发制作中，需要对页面内容进行“模块化标准布局”，把内容放入到某个位置，让页面形成固定规律展示出来

模块化：在网页中所有的内容都是以块来展示的

标准化：在开发网站时是有一定的标准的，W3C制定标准。

优点：为了把HTML页面和CSS代码进行分离，在以后的维护时和合作开发时有利于搜索引擎的抓取。

2、无意义的“div”和“span”

说明：在HTML标记中一般都是有自带“名称”，如：h1是标题，a是超链接

　　只有div和span是没有意义的，所以布局就使用div和span，div一般给大块的内容布局，span是给行内的内容布局。

块元素：不管内容多少，都会占一行，可以改变大小，还是独占一行

行内元素：内容多少占多少

3、块元素和行内元素的互相转换

display的描述：1块元素和行内元素的转换  Block（块）、inline（行内）、inline-block（行内块）

　　　　　　　　2显示和隐藏 None（隐藏）、block（显示）

<head>

    <style type="text/css">

        a{

            border: 1px solid red;

            width: 100px;

            display:block;/*转换成块元素*/

            display: inline-block;/*转换成行nne内块*/

            text-align: center;

        }

        a.a4{

            display: none;/*隐藏*/

            display: block/*显示*/

        }

    </style>

</head>

<body>

            <a href="#">首页</a>

            <a href="#">简介</a>

            <a href="#">新闻</a>

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

</body>

DIV+CSS标准化布局的更多相关文章

  1. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  4. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  5. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  6. 对于用div+css随心所欲布局的思考

    在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...

  7. 利用Div+CSS整体布局页面的操作流程

    简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head>  <meta chars ...

  8. 第6天：DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  9. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

随机推荐

  1. win7下mysql5.5与mysql5.6同时安装

    5.5己正常的情况下,用官方下载的安装包总是不成功,用的官方解压版5.6.44 1.复制my-default.ini到my.ini,只需要改端口就行了,设置base-dir/data-dir反而无法启 ...

  2. http://www.2cto.com/ 红黑联盟

    http://www.2cto.com/ 红黑联盟,一个不错的学习或者开阔眼界的网站,内部由中文书写.比较适合国人.

  3. Python 日期和时间_python 当前日期时间_python日期格式化

    Python 日期和时间_python 当前日期时间_python日期格式化 Python程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 cal ...

  4. 能量项链 /// oj23800

    题目大意: N( 4 ≤ N ≤ 100 ),表示项链上珠子的个数 第二行是N个用空格隔开的正整数,所有的数均不超过1000. 第 i 个数为第 i 颗珠子的头标记( 1 ≤ i ≤ N ), 当 1 ...

  5. typeerror: __init__() missing 2 required positional arguments: 'inputs' and 'outputs'

    1 问题描述 使用下边这条命令去检查 TensorFlow Object Detection API是否正确安装: python object_detection\builders\model_bui ...

  6. opencv编译：opencv 3.4.1 编译 contrib模块，增加人脸识别

    start cmake-gui select the opencv source code folder and the folder where binaries will be built (th ...

  7. HTML - 超链接标签相关

    1. <!-- href : 要跳转的网页资源路径 title : 链接的标题, 鼠标移动到超链接上面会显示出来 target : 要跳转的网页资源的显示位置 _blank : 在新标签页中打开 ...

  8. 莫烦pytorch学习笔记(一)——torch or numpy

    Q1:什么是神经网络? Q2:torch vs numpy Numpy:NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(neste ...

  9. [洛谷P1966] 火柴排队

    题目链接: 火柴排队 题目分析: 感觉比较顺理成章地就能推出来?似乎是个一眼题 交换的话多半会往逆序对上面想,然后题目给那个式子就是拿来吓人的根本没有卵用 唯一的用处大概是告诉你考虑贪心一波,很显然有 ...

  10. Quartz：Quartz

    ylbtech-Quartz:Quartz Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Qu ...