关于div+css，一直以来都是听其名，而不知其为何。今天看了半天的视频，终于对此略有了解，感觉挺好的，相比之前的table布局页面，div+css就是一把页面布局利器！！

　　div全称division（分割、分开、部门），css全称Cascading style sheet（层叠式样式表）

　　网页的布局分为三个时期：table布局，table+css布局（过渡时期），div+css布局（当前主流）

　　相对于div+css布局，table布局的缺点：1、显示样式和数据绑定在一起；2、布局的灵活度不高；

　　　　　　　　　　　　　　　　　　　　 3、大量的<table>标签，造成代码冗余；4、带宽较大；5、搜索引擎不喜欢

　　　　　　　　　　　　　　　　　优点： 1、理解比较简单；2、不同浏览器，显示结果相同；3、显示数据效果很好

简单描述了div+css之后，那么如何使用它们呢？

　　使用css，需要小了解css的常用选择器：

　　1、类选择器：定义格式（.class1{属性1：值; 属性2：值;}）

　　　　引用格式：<div class="class1"> </div>

　　2、id选择器：定义格式（#id1{属性1：值; 属性2：值;}）

　　　　引用格式：<div id="id1"> </div>

　　3、html元素选择器：定义格式（元素{属性1：值; 属性2：值;}）

　　　　引用格式：<元素></元素>

　　4、通配符选择器：定义格式（*{属性1：值; 属性2：值;}）

　　　　应用于页面内的所有内容

　　5、父子选择器：定义格式（.class1 span{属性1：值; 属性2：值;}或.id1 span{属性1：值; 属性2：值;}）

　　　<div class="class1"或者id="id1">不<span>抛弃</span>不<span>放弃</span></div>

　　　　注意：父子选择器不能有太多级数

　　选择器的优先级：id选择器>类选择器>html元素选择器>通配符选择器

构造了css之后，那么如何在html文件中进行引用呢？

　　html中引用css有三种方式：

　　1、外部样式表：

　　<head>

　　<link rel="stylesheet" type="text/css" href="名字1.css"/>

　　<link rel="stylesheet" type="text/css" href="名字2.css"/>

　　<link rel="stylesheet" type="text/css" href="名字3.css"/>

　　</head>

　　2、内部样式表

　　<head>

　　<style type="text/css">

　　body{属性1：值; 属性2：值;}

　　p{属性1：值; 属性2：值;}

　　</style>

　　</head>

　　3、内联样式表

　　<p style="属性1：值; 属性2：值"></p>

　　优先级：内联样式表>内部样式表>外部样式表

css文件中，若多个选择器有相同的属性值，如何操作呢，或者一个css文件如何引入另一个css文件呢？

　　1、若一个css文件中的多个选择器有相同的属性值

　　.class1,#id1,p{属性1：值; 属性2：值;}　　/*相同属性进行合并*/

　　2、一个css文件引入另一个css文件

　　@import url()　　/*将多个css文件导入到一个css文件中，如今通常使用link方法*/

　　css的使用基本就是这些了，关于属性的设置还有很多内容，由于刚开始学习，知道的属性少之又少，看来这部分主要靠查阅帮助文档进行熟记了。。

　　　　　　　　　　　　　　　　　　　　　

(一)初识div+css的更多相关文章

  1. 初识DIV+CSS

    div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素. css是Cascading Style Sheets(层叠样式表单)的缩写,是一种用来表现html或xml等 ...

  2. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  5. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  6. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  7. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  8. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

随机推荐

  1. kali linux之skipfish，arachni

    c语言编写,实验性的主动web安全评估工具,递归爬网,基于字典的探测,速度较快--(多路单线程,启发式自动内容识别),误报率低 常用参数 -I 只检查包含/xx/的url -X 不检查包含/xx/的u ...

  2. 【bzoj2500】幸福的道路 树形dp+单调队列

    Description 小T与小L终于决定走在一起,他们不想浪费在一起的每一分每一秒,所以他们决定每天早上一同晨练来享受在一起的时光. 他们画出了晨练路线的草图,眼尖的小T发现可以用树来描绘这个草图. ...

  3. GitHub CEO：GitHub 十年，感谢有你

    简评:不知为何,总感觉 GitHub 成立不止 10 年了,你们有这种错觉么? 本文是 GitHub 联合创始人兼 CEO:Chris Wanstrath 在计算机世界杂志写的文章. 当我们回顾 Gi ...

  4. rpm命令-以jenkins为例

    1.列出所有安装的Jenkins rpm -qa | grep jenkins 2.软件是否安装:例如:jenkins是否安装 rpm -qa | grep jenkins 3.rpm -ql 列出软 ...

  5. C++_异常6-其他异常特性

    虽然throw-catch机制类似于函数参数和函数返回机制,但是还是有些不同之处. 其中之一是函数fun()中的返回语句将控制权返回到调用fun()的函数A中, 但throw语句将控制权向上返回到第一 ...

  6. Django 中 admin 的执行流程

    Django 中 admin 的执行流程 1 循环加载执行所有已经注册的 app 中的 admin.py 文件 def autodiscover(): autodiscover_modules('ad ...

  7. HDU_1043 Eight 【逆向BFS + 康托展开 】【A* + 康托展开 】

    一.题目 http://acm.hdu.edu.cn/showproblem.php?pid=1043 二.两种方法 该题很明显,是一个八数码的问题,就是9宫格,里面有一个空格,外加1~8的数字,任意 ...

  8. pip不是内部或外部命令也不是可运行的程序或批处理文件的问题

    当我用windows电脑 pip install missingno 时 它居然会报pip不是内部或外部命令也不是可运行的程序或批处理文件的问题! 解决方法: 1)找到 pip.exe 所在位置,一般 ...

  9. bzoj2190 仪仗队

    题目传送门 思路: 哪些点能被人看到,其实就是哪些点不会被其他点挡住,只要顶点的坐标互质就可以了,互质用欧拉函数算.特殊考虑一下n=1和0的情况. 欧拉函数,Φ(x)=x(1-1/p1)(1-1/p2 ...

  10. PHP返回变量或数组的字符串表示：var_export()

    使用var_export()函数可以在服务端程序没有在打印的情况下,配合file_put_contents方便的调试程序,查看变量和数组的内容. 在开发过程中,我们常用var_dump()来打印数组内 ...