• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

第一节 overflow属性

1. overflow属性 hidden scroll auto

2. display属性 block inlineinline-block none

Block块显示

inline按行内显示

inline-block双重作用。既有行的特点又有块的特点

在一行内显示,有行高

None:不显示,display:none;

第二节 CSS引入的方式 行内,内嵌,外部

a)  行内

       i.     在标签内部,直接使用style=”CSS规则”

      ii.      容易写错:<p style=”color=red;”>文字</p>

1.  这个地方用冒号

b)  内嵌

       i.     写在<head></head>中

      ii.      写法

    iii.      <styletype=”text/css” >样式</style>

c)  外部

       i.     通过link,将外部的样式表文件(*.css),引入当前页面。

      ii.      写法:

1.  <linktype=”text/css”  rel=”stylesheet”href=”*.css” />

2.  Rel说明,当前文件与链接的文件是什么关系

3.  Stylesheet样式表的关系。

4.  Href:指定样式表文件在什么地方(路径)

5.  备注:我们在做网站时开发时,通常用的就是这种方式。

第三节 CSS优先级

当CSS冲突的时候

就近原则

行内样>内嵌样式>外部样式

行内样式>id>class>标签

//权重值,特性值

CSS继承

和文本相关的一般都会继承。、

边框,宽,高,margin,padding  背景等都不继承。

继承的权重为0

第四节 定位技术

1.  xhtml+css 定位技术

DIV布局就是DIV+CSS,标准的说法应该是xhtml+css。是一种网站设计标准。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading Style Sheets(层叠样式表单)的缩写。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。div是html(超文本语言)中的一个元素,div+css是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离。div是标签 css是层叠样式表。

2. 定位属性:position:static fixed relative absolute

n  position: (配合着定位坐标

u  Left距左边, top距上边, right 距右边, bottom距底边

n  )

u  static 静态,不定位

u  fixed 固定, 脱离正常的文档流,比普通元素层级要高。相对于浏览器窗口进行定位。

u  relative

l  相对定位。相对于谁?(相对于自己,霸道的相对)

u  absolute

l  绝对定位,相对于最近的具有定位属性(不管是相对定位,或者绝对定位都可以)的元素进行定位。

n 脱离正常文档流,层级高于普通元素。

n 相对于它的祖先,有定位属性的祖先。

n 如果没有,相对于body定位。

n  相对定位与绝对定位

n  外层元素通常设置相对定位,不用坐标。

n  内层元素设置绝对定位。配合着定位坐标。

第五节 限时抢


第六节 margin合并的问题

n  margin,上下合并(大吃小),左右叠加


第七节 常见布局






第八节 浏览器兼容性

浏览器市场份额:http://tongji.baidu.com/data/browser

常用兼容性技巧

初始化清除浏览器默认值及HACK法:

初始化清除浏览器默认值:ul,li,body{margin:0;padding:0}

.box{

color:white;

background:blue;/*ff,7*/

background:red\9; /*ie6 7 8*/

*background:black;/*ie6 7*/

_background:orange;/*ie6*/

}


第九节 HTML5

1. HTML5简介

HTML5前身为webapplications1.0,是作为下一代互联网标准,用于取代htm4.01和xhtml1.0.

增加了新的标签和属性

加强网页结构的语义化

增加本地存储等功能

万维网的核心语言、是超文本标记语言(HTML)的第五次重大修改,2014年10月28日,W3C万维网联盟宣布,经过近8年的艰苦努力,标准终于制定完成并发布。

广义HTML5:它包括,HTML5,CSS3,Javascript,API

HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准

http://www.chinaw3c.org/archives/677/

2.HTML5特性

•   语义特性

w 更好的意义和结构。更加丰富的标签  

•   本地存储特性

w 基于HTML5开发的网页有更短的启动时间,更快的联网速度,这些全得益于HTML5 APPCache,以及本地存储功能

•   设备兼容特性 

w HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

•   网页多媒体特性(Class:MULTIMEDIA)

w 支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

•   三维、图形及特效特性

w 基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

•   CSS3特性

w CSS3中提供了更多的风格和更强的效果

•   ……

•   多设备跨平台

•   自适应网页设计

音频

•     <audio></audio>

•     src 音频的路径

•     autoplay =“true,false”

•     controls=“是否显示控制面板”

•     loop =“” 循环的次数

•     格式:mp3,oga,wav

视频

•     <video></video>

•     src

•     width

•     height

•     controls

•     autoplay

•     格式:mp4,oga

新属性

•     autocomplete(off,on) 自动完成,默认是打开的

•     autofocus:自动获取焦点

•     required:要求需要填写

新input类型

•     email

•     url

•     color

•     date

•     month

•     time

•     number

•     tel

mark:高亮显示

progress:



布局小标签

•     header

•     nav

•     footer

•     article

•     aside

•     section

•     details

•     summary

 

 



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
让Tomcat支持PHP发布时间:2022-07-10
下一篇:
PHP性能优化的小技巧发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap