您的位置：首页 > Web前端 > CSS

牛腩视频总结（二）Div+Css与Table

2016-06-08 12:01 363 查看
在以前布局中很多人会运用table来布局，table布局非常容易操作，但是它也有很大的不便，修改不灵活。由于CSS的普及，现在都不再采用table布局。而是运用DIV+CSS来制作网页。早期的网页，大多数是用table和内联样式组成，网页的结构和网站页的表现（样式）混合在一起，所以非常不好维护，并且重点不突出。垃圾代码多。但是如果用DIV+CSS制作网页，完全可以将网页的结构和表现（CSS）相分离。这样非常容易维护。这篇博客我为大家介绍的有关DIV+CSS和table的一些相关知识。
一、DIV+CSS：
1.[b]了解DIV+CSS[/b]
DIV+CSS是web设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
 
2.简单认识：
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式。网页设计者必须掌握的技术之一。
CSS特点：实现网页内容与样式的分离
CSS选择器优先级：ID选择器>类选择器 >HTML选择器
先来看段css基本代码，以下内容将围绕这段代码展开：
<span style="font-size:18px;">*{

margin:0;

padding:0;

}

body {

font-size:14px;

}

a:link,a:visited {

/*鼠标未移上去的超链接的样式,超链接访问后的样式*/

color:#000;

text-decoration:none;

}

a:hover {

/*鼠标移到超链接上的样式*/

color:#00f;

text-decoration:underline ;

}

.textcode {

width:72px;

}

/*error出错页样式*/

#errorfrm #error img {

width:230px;

float:right;

margin-right :50px;

margin-bottom :10px;

}
</span>

从以上代码我们知道，
①css代码中有两种样式，一种.一种#；
.后面的内容是自己定义的，
.就用class=”abc”;#就用id=”abc”
#和.区别就是级别不一样，#比.高，而且#是唯一的，如果定义#abc和.123这两个样式，那ID=”abc”在一个页面只能出现一次，而class=”123”可以在多个div里面调用，这就是id和class的区别！
②盒子模型；
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
（附：盒子模型的结构）
①内容（CONTENT）就是盒子里装的东西； 
②填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料； 
③边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。 
④填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；  
 
3.Div+CSS使用方法：
①建立html文件和css文件
②编辑css文件，设定样式
③在Html文件的<head></head>中调用css文件
（附：调用CSS方法：
<link href="css/style.css"type="text/css" rel="stylesheet"/>，在牛腩新闻发布系统中，老师直接将建好的cs类拖进去，自动生成一段代码。
）
 
二、与Table的区别

1.代码：div+css的代码比较简洁，不是很多，table的代码很繁琐，重复太多。div和table只不过是两个不同的HTML标签而已，talbe必须和tr td一起出现，而DIV可以单独出现，它没有任何默认样式。

2.页面优化：div+css有利于搜索引擎的搜索，而table不利于是搜索引擎的搜索。

3.打开速度：用div+css制作的网页，及时是网速非常卡的时候，当打开这个页面的时候这个页面会一点一点的出来的。而table做的页面，在网速非常卡时候，页面打开时开始会什么也没有，但是过了几分钟后，页面一下会全部打开。

4.table的优点：开发时间短，兼容性比较不错
 
div和table只不过是两个不同的HTML标签而以，talbe必须和tr td一起出现，而DIV可以单独出现，它没有任何默认样式。

三、总结：
通过这段时间的学习，初步认识了css，在这里总结一下，屡一下思路，有什么理解不到位的地方，望各位大神斧正！
 
感谢您宝贵的时间！
 

 
 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航