前端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初始化脚本代码有很多种,此为一个雅虎工程师的代码
总结