首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

div+css第一天

作者：手机用户2602887045_745 | 来源：互联网 | 2023-09-18 11:25
一、在没有出现divcss布局之前，我们都是用传统的table来布局的，但使用table来布局有这么几个缺点：1.显示的样式和数据绑定在一

一、在没有出现div&＃43;css布局之前&＃xff0c;我们都是用传统的table来布局的&＃xff0c;但使用table来布局有这么几个缺点&＃xff1a;

1.显示的样式和数据绑定在一起,不利于维护和扩展

2.布局的时候&＃xff0c;灵活度不高

3.一个页面会存在大量的

元素&＃xff0c;如嵌套的表格&＃xff0c;造成代码冗余

4.增加带宽,针对那种大型网站来说&＃xff0c;多一两百个字节一个月下来都是很可怕的开销

5.不利于搜索引擎的优化

但任何东西都是有两面性的&＃xff0c;使用table布局有以下几个优点&＃xff1a;

1.简单&＃xff0c;容易理解

2.浏览器的兼容性比较好

3.用来显示数据还是比较好的

 

二、div基本思想

数据和样式要分离

 

三、div&＃43;css是什么&＃xff1f;

div&＃43;css是目前比较流行的一种网页布局技术。

我们可以这样简单的来理解div&＃43;css

div:用来存放内容(文字、图片、元素等)的容器

css:用于指定放在div中的内容如何显示&＃xff0c;包括这些内容的位置和外观

 

四、div&＃43;css的优势

要深刻理解div&＃43;css的优越性,我们不得不提到网页设计的三个历史时期table,table&＃43;css,div&＃43;css.

table网页设计&＃xff1a;内容和样式(外观和布局)混合

table&＃43;css网页设计&＃xff1a;table布局&＃xff0c;css指定外观

div&＃43;css网页设计&＃xff1a;div存放内容&＃xff0c;css指定样式(外观和布局),内容和样式彻底分离

 

优势&＃xff1a;

1.符合W3C标准

2.搜索引擎更加友好

3.样式的调整更加方便

4.内容和结构分离

5.当前主流网站都使用div&＃43;css框架模式&＃xff0c;更加验证了div&＃43;css是大势所趋

 

注意&＃xff1a;div&＃43;css并不是要我们抛弃table,因为table在显示数据时&＃xff0c;更加方便&＃xff0c;因此在使用div&＃43;css时&＃xff0c;该使用table时&＃xff0c;就得使用table.

 

五、常用的四种css选择器

1.类选择器

语法&＃xff1a;

.类选择器名称{

　　属性名:属性值;

     属性名:属性值;

     ... 

}

2.id选择器

语法:

 

#id选择器名称{

 

　　属性名:属性值;

 

     属性名:属性值;

 

     ... 

 

}

3.html选择器

语法&＃xff1a;

 

html标签名{

 

　　属性名:属性值;

 

     属性名:属性值;

 

     ... 

 

 

}

 

4.通配符选择器

该选择器可以用到所有的html元素&＃xff0c;但其优先级是最低的。

语法&＃xff1a;

*&＃xff5b;

　　属性名:属性值;

      ......
&＃xff5d;

 

六、css滤镜技术

就像当年四川汶川大地震后&＃xff0c;很多网站所有的图片都变成灰色的&＃xff0c;这是怎么实现的呢&＃xff1f;

就是用到了css滤镜。

 

代码&＃xff1a;

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns&＃61;"http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" />
5 <title>css滤镜技术title>
6 <style type&＃61;"text/css">
7 img{
8 filter: gray;
9 }
10 style>
11 head>
12 <body>
13 <img width&＃61;"300px" src&＃61;"loginemail.JPG"/>
14 body>
15 html>

只要一句代码就可以让网页中的所有图片变灰色&＃xff0c;是不是很方便。

如果想要鼠标移到图片上的时候&＃xff0c;图片又变回原来的颜色怎么做呢&＃xff1f;

只要给图片加个链接&＃xff0c;然后稍微修改下样式就可以了

代码&＃xff1a;

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns&＃61;"http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" />
5 <title>css滤镜技术title>
6 <style type&＃61;"text/css">
7 a:link img{
8 filter: gray;
9 }
10 a:hover img{
11 filter: &＃39;&＃39;;
12 }
13 style>
14 head>
15 <body>
16 <a href&＃61;"#"><img border&＃61;"0" width&＃61;"300px" src&＃61;"loginemail.JPG"/>a>
17 body>
18 html>

 

七、margin属性详解

margin:auto|length

检索或设置对象四边的外延边距。

如果提供全部四个参数值&＃xff0c;将按上&＃xff0d;右&＃xff0d;下&＃xff0d;左的顺序作用于四边。

如果只提供一个&＃xff0c;将用于全部的四边。

如果提供两个&＃xff0c;第一个用于上&＃xff0d;下&＃xff0c;第二个用于左&＃xff0d;右。

如果提供三个&＃xff0c;第一个用于上&＃xff0c;第二个用于左&＃xff0d;右&＃xff0c;第三个用于下。

内联对象要使用该属性&＃xff0c;必须先设定对象的height或width属性&＃xff0c;或者设定position属性为absolute。

在IE4&＃43;&＃xff0c;margin属性不可用于td和tr对象。

外延边距始终透明。

转:https://www.cnblogs.com/zzwlovegfj/archive/2012/07/15/2592158.html



推荐阅读
author-avatar
手机用户2602887045_745
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有