首页 > 代码库 > Html+Css——豆蔻年华(自学一个月)

Html+Css——豆蔻年华(自学一个月)

详细见千万别碰我——燕十三

html .htm .shtml三者区别是什么

1、.htm与.html没有本质上的区别,表示的是同一种文件,只是适用于不同的环境之下。

2、DOS仅能识别8+3的文件名,所以*.htm的命名方法可以被DOS识别,而*.html的文件命名方式不能被之识别。

3、在UNIX系统中,网页必须使用.html扩展名,如果是htm,在浏览器中打开时则出现源代码;Windows中支持两种扩展名。也可以说,htm和html是Windows和UNIX对抗的产物。

4、如果在网页中同时存在index.html与index.htm,这是浏览器将先解释index.html。

5、.shtml是一种用于SSI(Server Side Include,服务器端包含)技术的文件,是WEB在服务器提供的一种功能,并且在服务器端执行。

一般说来,要完成较复杂的任务(如:聊天室/留言本等),必须设计专门的CGI或ASP程序;

但是如果只是想给网页加上简单的功能(如:显示一篇文档,web服务器环境变量,关于该文档的更新日期/大小等),则只要SSI就可以完成了。

网页布局用div占位切开

技术分享

 

Css控制div显示

没给宽的话,会铺满整行

技术分享

思考

技术分享

浮动布局        

1普通div会上去并被压住

技术分享技术分享技术分享

 

清除浮动

1清除左浮动,没清除右浮动但右面被盖        2普通div声明清除浮动,不许被浮动盖住

技术分享技术分享

3 清除右浮动                                                                               4 左面被盖住                                                               5 用both都清楚了,都不会被盖住了

技术分享技术分享技术分享

 

完成首页的布局

技术分享

新手常犯的三点错误

技术分享

盒模型之margin讲解

1父级1000px,三个子集左浮动都400px,共1200px,会怎样    2 有一个被挤下来

技术分享技术分享

4第一个margin设为10px                                                       5 没写就取对边

技术分享技术分享技术分享 技术分享

margin首页实战

2 main没设置高,他的两个子元素是漂浮的,所以他没有实际的高度,会占蓝色部分                           3蓝色的footer怎么不见了

技术分享技术分享技术分享

4强行给main一个高度,蓝色就出来了

技术分享技术分享

 

Css画三角形

                                                                                                    2 像门四周                                                3白块变成0                                                                                                     

技术分享技术分享技术分享

 

4上右左边框都变成白色,会形成绿三角形,但是会

技术分享技术分享技术分享技术分享

 

盒模型之padding

1 padding主要控制文字距离

技术分享技术分享 

 padding与背景

1 宽高200px                                    2 灰色部分是200px,200px                                  3 加入padding20px                  4背景灰色会一直铺到边框包含padding,所以灰色变大了

技术分享技术分享技术分享技术分享

 

利用margin实现元素居中

技术分享

margin重叠现象研究

1 margin50px,50px                                      2 怎么不是100,是50?

技术分享技术分享

3 margin重叠                                                                                     4不是普通,悬浮的

技术分享技术分享          技术分享

 

 6 竖直重叠取最大值                                                7 父子div的重叠情况

技术分享技术分享

 

内联元素

                                                                     2 行内元素也称内联元素span,跑不出这行,设置margin什么的都没用,宽高也是,文字多大就占多大地  3 都没效果

技术分享技术分享技术分享

 

技术分享技术分享技术分享技术分享技术分享

 

内联和块状转化

1span内联(行内)元素设置宽高没用,怎么转化成块状   2变成块状后效果          3div块状变成内联                                              4块状变成了内联元素,宽高都不起作用了

技术分享技术分享技术分享技术分享

5作业导航条里把内联标签转化成快标签用的多

技术分享技术分享

Css控制段落

技术分享

Css控制文字大小字体和颜色

技术分享技术分享技术分享

字体深入无线有线字体备用安全

Css设置背景图片

技术分享

精确控制背景图片位置-一个大图做多个div背景,取里面的小图

1水平位置和竖直位置center,top

技术分享技术分享

3.都是center

技术分享技术分享

5同一个图片被好多div应用做背景,用background-position

技术分享技术分享技术分享技术分享

Css优先级

不用死记硬背控制的越精细优先级越高,f12能看出来 

技术分享

Css的四种引入方式

技术分享

Css初始化

      2初始化脚本代码有很多种,此为一个雅虎工程师的代码

技术分享技术分享

总结

技术分享技术分享技术分享技术分享


 

 

Html+Css——豆蔻年华(自学一个月)