PHP自学之路-----DIV+CSS(第一天)
2013-04-15 22:47
344 查看
传统页面使用table来布局和显示数据缺点:
1、 显示样式和数据时绑定在一起
2、 布局的时候,灵活度不高
3、 一个页面可以能会有大量的table元素,代码就会
4、 增加带宽
5、 搜索引擎不喜欢这样的布局
优点:
1、 理解简单
2、 不同浏览器看到的效果一般是相同的
3、 显示数据还是比较好的
Div+css 基本思想:数据和样式分离
Div+css是一种目前比较流行的网页布局技术,DIV用来存放需要娴熟的数据(文字,图表), CSS就是用来指定怎样显示,从而做到数据局和显示相互分离。
DIV是用于存放内容(文字,图片、元素的)容器。
CSS是用于指定放在DIV中的内容如何显示包括这些内容的位置和外观。
n CSS基本语法
选择器{
属性1:属性值;
属性2:属性值;
。。。。。。。
}
入门 代码:
1、 显示样式和数据时绑定在一起
2、 布局的时候,灵活度不高
3、 一个页面可以能会有大量的table元素,代码就会
4、 增加带宽
5、 搜索引擎不喜欢这样的布局
优点:
1、 理解简单
2、 不同浏览器看到的效果一般是相同的
3、 显示数据还是比较好的
Div+css 基本思想:数据和样式分离
Div+css是一种目前比较流行的网页布局技术,DIV用来存放需要娴熟的数据(文字,图表), CSS就是用来指定怎样显示,从而做到数据局和显示相互分离。
DIV是用于存放内容(文字,图片、元素的)容器。
CSS是用于指定放在DIV中的内容如何显示包括这些内容的位置和外观。
n CSS基本语法
选择器{
属性1:属性值;
属性2:属性值;
。。。。。。。
}
入门 代码:
<html> <head> <title>CSS入门案例</title> <!--引入我们的CSS--> <link rel="stylesheet" type="text/css" href="my.css"/> </head> <body> <div class="stylel"> <img src="C:\Users\jsh\Pictures\20071204082238746.jpg"/> </div> </body> </html>
.stylel{ width:400px; height:300px; background-color:red; border:3px solid black; margin-left:40px; margin-top:25px; padding-top:20px; padding-left:40px; }
span元素使用:存放小块内容:
<html> <head> <title>CSS入门案例</title> <!--引入我们的CSS--> <link rel="stylesheet" type="text/css" href="demo1.css"/> <link rel="stylesheet" type="text/css" href="demo2.css"/> </head> <body> <span class="s1">栏目一</span> <span class="s2">栏目二</span> <span class="s3">栏目三</span> <span class="s4">栏目四</span> <span class="s1">栏目五</span> </body> </html>
/*.s1用术语 类选择器*/ .s1{ color:green; font-size:30px; text-decoration:underline; } .s2{ color:yellow; font-size:12px; } .s3{ color:blue; font-style:italic; } .s4{ color:green; font-weight:bold; }
伪元素及滤镜效果
<html> <head> <title>滤镜技术</title> <!--将CSS嵌入到HTML文件中(内联CSS)--> <style type="text/css"> a:link img{ filter:gray; } a:hover img{ filter:""; } </style> </head> <body> <a href="3"><img src="1.jpg"/></a> <a href="demo2.html"><img src="2.jpg"/></a> <a href="demo2.html"><img src="1.gif"/></a> </body> </html>上面这个没有效果,不知道为什么?知道的麻烦给指出来!
<html> <head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} </style> </head> <body> <p>请把鼠标移动到这些链接上,以查看效果:</p> <p><b><a class="one" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变颜色</a></b></p> <p><b><a class="two" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变背景颜色</a></b></p> <p><b><a class="four" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变字体系列</a></b></p> <p><b><a class="five" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变文本装饰</a></b></p> </body> </html>
相关文章推荐
- PHP自学之路-----DIV+CSS(第四天)
- PHP自学之路-----DIV+CSS(第三天)
- PHP自学之路-----DIV+CSS(第二天)
- PHP自学之路-----DIV+CSS(第四天)
- PHP自学之路-----走进位运算
- PHP 自学之路-----XML编程(Xpath技术,simpleXml技术)基础入门
- 函数用户PHP自学之路----错误及异常处理机制、错误日志
- PHP自学之路---雇员管理系统(1)
- PHP 自学之路-----XML基本语法及DTD介绍
- 变量浮点型PHP自学之路-----PHP基础数据类型及运算符介绍
- 简单样例之:div+css+javascript+php+mysql
- PHP自学之路------HTML(第二天)
- PHP自学之路----面向对象的编程(类成员方法用法)
- div+CSS网页布局入门系列教程(来自标准之路)
- PHP自学之路------HTML(第一天)
- PHP自学之路------PHP文件编程
- PHP自学之路--------PHP数据库编程
- 我的技术学习之路--div+css篇
- 韩顺平_php从入门到精通_视频教程_第16讲_div-css作业评讲②_学习笔记_源代码图解_PPT文档整理
- PHP自学之路---PHP开发环境配置说明