[TOC]
HTML_2.png
html结构
div布局,css控制。htm是一种标记语言。
查看网页的时候,选择审查元素、查看背景图像。
保存图片——>source->img->在新的tab打开,另存为。
div#test1 div的id为test1
ul#art>li*4>a>{文章$} ul下嵌套4个li,里面装着a标签,文章$符号代表
div布局
画一个田字格
#lside{
float: left;
background: gray;
}
.two{
float: left;
width: 200px;
height: 200px;
margin: 10px;
background: pink;
}
#clr{
clear: both;
width: 0px;
height: 0px;
}
.sec{
float: left;
width: 200px;
height: 200px;
margin: 10px;
background: pink;
}
画一颗圣诞树
.a,.b{
width: 0px;
height: 0px;
border-top: 80px solid transparent;
/*边框透明 */
border-right: 80px solid transparent;
border-bottom: 80px solid pink;
border-left: 80px solid transparent;
}
.b{
margin-top: -100px;
/*margin可以是负数,让两个div有重叠*/
}
盒子模型:上右下左,没有就取对边
padding 注意事项:padding不能解决的用blockquote来解决
css控制效果####css的引入方式
链接到一个外部样式表:link
内部样式表:style
内联样式:在标签中使用样式属性
颜色的写法
16进制,color:#234566
10进制,color:rgb(240,23,45)
html提供常用颜色的名称 color:orange
简写:EEEEEE->EEE
注意事项
浮动的时候,不设置浮动那么默认换行。在进行此操作的时候把格局内的每个元素都要创建出来。
浮动的上面一层是飘的,父布局不会因此被撑大。所以需要给父布局一个宽高。
利用行高来实现文字竖直居中:line-height 上下居中,这个值和高度一样。和16px/36px是一样的,不过这个兼容性更好。
css代码,布局都居中
margin: 300px auto; text-align: center;
html标签
-
独占一行
能设宽高
竖直方向的margin,padding
块状元素
是
是
有,可以设置
内联元素
否
否
没有,也不可以设置
内联元素与块状有关,可以通过display相互转换。
display:block;display:inline;
a标签 href属性表示超链接的地址,#默认的地址。
div标签 id属性
d07fe94b-69a7-4703-ad74-01aa9fd95b52.png
里面的controls属性提供播放、暂停和音量控件
Your browser does not support the audio tag.
表单
874d8b85-2aea-49af-9d1e-6f65e57e665f.jpg
表单的开头,post表示密文传输checked selected 表示默认添加
框架
IE bug及兼容测试
有些布局、样式要明确的声明,不然就很大可能出现兼容的问题。例如谷歌字体默认最小是10px,火狐默认是12px。
IE问题下bug的几种常见原因:
错误
原因
解决方法
————
doctype代表了不同的模式
正确声明doctype
在不同浏览器下css效果不同
各浏览器对不同标签的初始化不同
css初始化
——
浏览器标签bug引起
css hack
盒模型bug
使用严格doctype声明
IE下 左浮元素,左margin是定义的两倍。
双倍margin bug
把display:inline
IE下
a相对于a:link
3像素margin bug
规范浮动与清除浮动
定义特别小的元素的时候,老式浏览器可能会画出比较大
IE的最小限制
overflow:hidden