HTML、CSS常用技巧
一、HTML
在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些:
(一)、头部标签
1,Doctype
Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档。
有和无的区别:
BackCompat:标准兼容模式未开启(怪异模式、混杂模式);
CSS1Compat:标准兼容模式已开启(严格模式)。
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始,浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式;
如果你的页面添加了那么就等同于开启了标准模式,浏览器会老老实实按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器显示的就都是一样的了。
有,用什么?
Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,dtd文件则包含了标记、attributes、properties、约束规则,在这里推荐使用<!DOCTYPE html>。
更多规则请参考:https://hsivonen.fi/doctype/
2、Meta(metadata infomation)
提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。
页面编码(告诉浏览器是什么编码)
1
2
|
|
刷新和跳转
1
2
3
4
|
< meta http-equiv=“Refresh” Content=“30″> <!--页面30秒刷新一次--> < meta http-equiv=”Refresh“ Content=”5; Url = http ://www.autohome.com.cn“ /> <!--5秒后自动跳转到后面地址--> |
关键词
1
|
< meta name = "keywords" content = "python,java,C++,语言" > |
3、Title(页面头部信息)
4、Link
CSS
1
2
|
< link rel = "stylesheet" type = "text/css" href = "css/common.css" > <!--引入外部样式--> |
icon
1
2
|
< link rel = "shortcut icon" href = "image/test.ico" > <!--导入图片--> |
5、Style(在页面中写样式)
1
2
3
4
5
|
< style type = "text/css" > .hide{ display: none; } </ style > |
6、Script
引进文件
1
|
|
写JS代码(一般写在body的最底部)
1
2
3
|
< script type = "text/javascript" > ....... </ script > |
(二)、常用标签
标签一般分为两种:块级标签和行内标签。
块级标签:a标签、span标签、select标签等;
行内标签:div标签、h标签、p标签等。
1、p标签、br标签
p标签:表示段落,默认段落之间是有间隔的;
br标签:换行
1
2
|
< p >hello,world!!</ p >< br /> < p >hello,world!!</ p > |
2、a标签
target属性,_back表示在新的页面打开;
锚点
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< body > <!--加target生成新页面--> <!--寻找页面中id=i1的标签,将其标签放置在页面顶部--> < a href = "#i1" style = "color: green" ;>第一章</ a >< br /> < a href = "#i2" style = "color: fuchsia" ;>第二章</ a >< br /> <!--id没有一个标签的id属性值不允许重复,id属性可以不写--> < div id = "i1" style = "height: 500px" ;>第一章内容</ div > < div id = "i2" style = "height: 500px" ;>第二章内容</ div > </ body > |
3、HTML标题
标题(Heading)是通过<h1>--<h6>等标签进行定义的,<h1>定义最大的标题,<h6>定义最小的标题。
1
2
3
4
|
< h1 >1,br换行为自闭合标签</ h1 > < p >asdf< br />ghjkl</ p > < h1 >2,a标签</ h1 > < h2 >属性:</ h2 > |
4、select标签
这里有一个知识点,就是在标签上加默认值:
selected="selected"(下拉框默认值)
checked="checked"(复选框默认值)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
< p >城市: < select > < option >上海</ option > < option >北京</ option > < option >河北</ option > < option >山东</ option > </ select > <!--显示几条信息,size设置显示的条数--> <!--<select multiple size="10">--> < select multiple> < option >上海</ option > < option >北京</ option > < option >河北</ option > < option >广州</ option > < option >山西</ option > < option >河南</ option > </ select > <!--创建组--> < select > < optgroup label = "南方" > < option >上海</ option > < option >广州</ option > </ optgroup > < optgroup label = "北方" > < option >北京</ option > < option >河北</ option > </ optgroup > </ select > </ p > |
6、input标签
input标签的类型有:
text
password
redio
checkbox
file
button(普通按钮)
submmit(提交当前表单)
reset(清空内容)
textarea:备注框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Form</ title > </ head > <!--<body>传文件的时候要添加enctype="multipart/form-data--> < div style = "border: 1px solid chartreuse;" > < p >用户名:< input type = "text" name = "user" /></ p > < p >密码:< input type = "password" name = "pwd" /></ p > <!--<p>邮箱:<input type="email"/></p>--> <!--email支持IE9以上的版本,不兼容低版本--> < p >性别(单选框): <!--要想互斥的话,需添加属性name并将值设置成相同--> < br />男< input type = "radio" name = "ee" value = "1" /> < br />女< input type = "radio" name = "ee" value = "2" /> </ p > < p >爱好(多选框): < br />篮球< input type = "checkbox" value = "1" /> < br />足球< input type = "checkbox" value = "2" /> < br />乒乓球< input type = "checkbox" value = "3" /> < br />橄榄球< input type = "checkbox" value = "4" /> </ p > < p >城市: < select name = "city" > < option value = "1" >上海</ option > < option value = "2" >北京</ option > < option value = "3" >河北</ option > < option value = "4" >山东</ option > </ select > <!--显示几条信息,size设置显示的条数--> <!--<select multiple size="10">--> < select multiple> < option >上海</ option > < option >北京</ option > < option >河北</ option > < option >广州</ option > </ select > <!--创建组--> < select > < optgroup label = "南方" > < option >上海</ option > < option >广州</ option > </ optgroup > < optgroup label = "北方" > < option >北京</ option > < option >河北</ option > </ optgroup > </ select > </ p > < p >上传文件: < input type = "file" /></ p > < p >备注: < textarea name = "extra" ></ textarea ></ p > < input type = "submit" value = "提交" /> < input type = "button" value = "普通按钮" /> < input type = "reset" value = "重新设置" /> </ div > </ form > </ body > </ html > |
7、ul ol dl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < style > body{ margin: 0; } ul{ margin: 0; list-style-type: none; } ul li{ float: left; padding: 0 8px 0 8px; color: white; cursor: pointer; } /*当鼠标移动到li标签上时,自动应用以下样式*/ ul li:hover{ background-color: blueviolet; } .pg-header{ height: 44px; background-color: #2459a2; line-height: 44px; } .w{ width: 980px; margin: 0 auto; background-color: red; } </ style > </ head > < body > < div class = "pg-header" > < div class = "w" > < ul > < li >菜单一</ li > < li >菜单二</ li > < li >菜单三</ li > < li >菜单三</ li > < li >菜单三</ li > < li >菜单三</ li > < li >菜单三</ li > < li >菜单三</ li > </ ul > </ div > </ div > < div class = "pg-body" ></ div > < div class = "pg-footer" ></ div > </ body > </ html > |
8、table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
< html lang = "en" > < head > < meta charset = "UTF-8" > < title >Table</ title > </ head > < body > < table border = "5" > <!--border 表格外边框宽度--> < thead > < tr > <!--colspan是列合并--> < th colspan = "2" >ID</ th > < th >姓名</ th > < th >年龄</ th > <!--<th>性别</th>--> </ tr > </ thead > < tbody > < tr > <!--rowspan是行合并--> < td rowspan = "2" >1</ td > < td >张小凡</ td > < td >18</ td > < td >男</ td > </ tr > < tr > < td >2</ td > < td >田灵儿</ td > < td >18</ td > < td >女</ td > </ tr > </ tbody > </ table > </ body > </ html > |
9、fieldset (会在相关表单元素周围绘制边框)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< body > < form > < fieldset > < legend >Personalia:</ legend > Name: < input type = "text" >< br > Email: < input type = "text" >< br > Date of birth: < input type = "text" > </ fieldset > </ form > </ body > </ html > |
更多标签使用方法请参考:
http://www.runoob.com/html/html-tutorial.html
http://www.w3school.com.cn/h.asp
二、CSS样式
CSS是英文Casscading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
在标签中直接使用 style='xxx;'
在页面中嵌入<style type="text/css"></style>块
引入外CSS文件
(一)、CSS选择器
标签选择器
class选择器
id选择器
层级选择器
组合选择器
属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >CSS</ title > <!--link引入样式--> <!--<link rel="stylesheet" href="common.css" />--> < style > div{ /*标签选择器*/ color: chartreuse; } #i1{ /*id选择器*/ font-size: 56px; color: green; } .c1{ /*class选择器*/ background-color: green; } .c2 div p .c3{ /*层级选择器*/ background-color: red; } .c4,.c5,.c6{ /*组合选择器,找到class=c4,class=c5,class=c6的标签*/ background-color: red; } </ style > </ head > < body > <!--组合选择器--> < div class = "c4" >1</ div > < div class = "c5" >1</ div > < div class = "c6" >1</ div > < div class = "c2" > < div ></ div > < div > < p > < span >oo</ span > <!--层级选择器,只适用这一级--> < a class = "c3" >uu</ a > </ p > </ div > </ div > <!--这一层的c3格式不会受上面的影响--> < div class = "c3" >sdfsdf</ div > <!--class选择器--> < span class = "c1" >1</ span > < div class = "c1" >2</ div > < a class = "c1" >3</ a > <!--id选择器--> < a id = "i1" >baidu</ a > <!--标签选择器--> < div >99</ div > < div >99</ div > < div >99</ div > < div > < div >asdf</ div > </ div > </ body > </ html > |
属性选择器:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < style > /*<属性标签/>*/ .c1[jack='a']{ color: red; } </ style > </ head > < body > < input value = "123" > < textarea >123</ textarea > < select > < option >上海</ option > < option selected = "selected" >广州</ option > < option >北京</ option > </ select > 男:< input type = "radio" name = "g1" value = "1" /> 女:< input type = "radio" name = "g1" checked = "checked" value = "2" /> < input type = "checkbox" name = "c1" value = "1" checked = "checked" /> < input type = "checkbox" name = "c1" value = "2" /> < input type = "checkbox" name = "c1" value = "3" checked = "checked" /> </ select > <!--<属性标签>--> < div > < div class = "c1" jack = "a" >1</ div > < div class = "c1" jack = "a" >2</ div > < div class = "c1" >3</ div > </ div > </ body > </ html > |
(二)、CSS常用属性
1、background属性:
background-color:设置背景色;
1
2
3
4
5
|
/*背景色定义的三种方式*/ /*background-color: #FF69B4;*/ /*background-color: rgb(25,180,10);*/ /*background-color: red;*/ font-size : 32px ; |
background-image:设置body元素的背景图像;
color:blue !important:优先级最高;
background-repeat:
no-repeat:background-image不会重复;
repeat-x:只在水平位置会重复背景图像;
repeat-y:只在垂直位置会重复背景图像;
background-position:如何定位background-image;
background-position的属性:
值 | 描述 |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
如果仅指定一个关键字,其他值将会是"center" |
x% y% | 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0% |
xpos ypos | 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions |
inherit | 指定background-position属性设置应该从父元素继承 |
2、border属性
1
2
3
4
5
6
7
8
9
10
11
12
|
#i 1 { border : 2px solid red ; /*边框2像素,实体,红色*/ } #i 2 { border : 2px dotted red ; /*边框2像素,小虚线,红色*/ } #i 3 { border : 2px dashed red ; /*边框2像素,大虚线,红色*/ } |
3、margin属性
围绕在元素边框的空白区域是外边距。设置外边距会在元素创建额外的"空白"。设置外边距最简单的方法就是使用margin属性,这个属性接收任何长度单位、百分数甚至负值。
margin属性
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top |
设置元素的上外边距。 |
1
2
3
4
5
6
7
|
line-height : 30px ; /*行居中*/ background : #F1F1F1 ; margin : 0 ; /*没有外边距,直接在页面顶部*/ margin : 0 auto ; /*居中*/ |
4、padding属性
元素的内边距在边框和内容区之间,控制该区域最简单的属性就是padding属性。CSS padding属性定义元素的内边距,padding属性接受长度值或百分比值,但不允许使用负值。
内边距属性
属性 | 描述 |
---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
1
2
3
4
5
6
|
h 1 { padding-top : 10px ; padding-right : 0.25em ; padding-bottom : 2 ex; padding-left : 20% ; } |
5、display属性
display属性规定元素应该生成的框的类型。下面主要说我们最常用的几种:
display:none 此元素不会被显示;
display:block 此元素将显示为块级元素,此元素前后会带有换行符;
display:inline 默认,此元素会被显示为内联元素,元素前后没有换行符;
display:inline-block 行内块元素。
6、cursor属性
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
CSS提供的cursor值:
pointer :小手指;
help:箭头加问号;
wait:转圈圈;
move:移动光标;
crosshair:十字光标。
通过pointer属性我们可以伪造超链接:
1
|
< span style = "cursor:pointer;color:blue;" >pointer</ span > |
7、float属性
float属性指定一个元素是否应该浮动。
CSS提供的float的属性值:
left:元素向左浮动;
right:元素向右浮动;
none:默认值,元素不浮动,并会显示在其文本中出现的位置;
inherit:规定应该从父元素继承float属性值。
在这我们在补充说明一个属性:
clear属性:指定段落的左侧或右侧不允许浮动的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > </ head > < body > < div style = "width: 500px;height: 500px;border: 1px solid red" > < div style = "width: 20%;background-color: green;float: left" >dadada</ div > < div style = "width: 80%;background-color: coral;float: right" >tatata</ div > < div style = "clear: both;" ></ div > </ div > </ body > </ html > |
8、position定位属性
position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。
position的属性值:
absolute:生成绝对定位的元素;
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位;
relative:生成相对定位的元素,相对于其正常位置经行定位。
z-index:指定一个元素的堆叠顺序。
两种返回顶部的定义方法,一般absolute和relative一起使用:
1
2
3
4
5
6
7
8
9
|
第一种: < div style = "height:1000px;background-color: #ddd;" ></ div > < div style = "position: fixed;right: 200px;bottom: 100px;" >返回顶部</ div > 第二种: < div style = "height: 500px;width: 500px;border: 2px solid green;position: relative" > < div style = "position: absolute;right: 0px;bottom: 0px;color: brown" >返回顶部</ div > < div style = "background-color: green;height: 100px;width: 500px" ></ div > </ div > |
9、透明度设置
设置图像透明度的两种方式:
opcity:0.6;
background:rgba(0,0,0,.6);
10、hover选择器
hover在鼠标移动到链接上时添加的特殊样式,hover选择器可用于所有元素,不仅是链接。
提示:link选择器设置了未访问的页面链接样式,:visited选择器设置访问过的页面链接的样式,:active选择器设置当你点击链接时的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >mytest</ title > < style > a.ex1:hover,a.ex1:active {color:red;} a.ex2:hover,a.ex2:active {font-size:150%;} a.ex3:hover,a.ex3:active {background:red;} a.ex4:hover,a.ex4:active {font-family:monospace;} a.ex5:visited,a.ex5:link {text-decoration:none;} a.ex5:hover,a.ex5:active {text-decoration:underline;} </ style > </ head > < body > < p >将鼠标移至链接上查看其样式改变.</ p > < p >< a class = "ex1" href = "/css/" >This link changes color</ a ></ p > < p >< a class = "ex2" href = "/css/" >This link changes font-size</ a ></ p > < p >< a class = "ex3" href = "/css/" >This link changes background-color</ a ></ p > < p >< a class = "ex4" href = "/css/" >This link changes font-family</ a ></ p > < p >< a class = "ex5" href = "/css/" >This link changes text-decoration</ a ></ p > </ body > </ html > |
11、before、after选择器
before:向选定的元素之前插入内容;
after:向选定的元素之后插入内容
12、font字体选择器
font-style:规定字体样式;
font-variant:规定字体异体;
font-weight:规定字体粗细;
font-size/line-height:规定字体尺寸和行高;
font-family:规定字体系列。
三、实例
1、清除浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >清除浮动</ title > < style > .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; (元素是否可见,hidden为不可见) height: 0; } .left{ float: left; } </ style > </ head > < body > < div style = "background-color: #00CC00" class = "clearfix" > < div class = "left" style = "height: 100px;background-color: red" >1</ div > < div class = "left" >2</ div > </ div > </ body > </ html > |
2、使用Font awesome插件渲染出小尖角
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >使用插件</ title > <!--<link rel="stylesheet" href="plugins/Font-Awesome-master/css/font-awesome.css"/>--> < style > .icon{ display: inline-block; border-top:20px solid red; border-right: 20px solid green; border-bottom: 20px solid transparent; border-left:20px solid transparent ; } </ style > </ head > < body > <!--<i class="fa fa-bug" aria-hidden="true"></i>--> < div class = "icon" ></ div > < a href = "Dy15/plugins/Font-Awesome-master/css/font-awesome.css" > </ body > </ html > |
3、常用的两种滚动条
第一种:页面整体滚动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < style > body{ margin: 0; } .pg-header{ height:48px; background-color: #012a62; } .pg-body .body-menu{ position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; /*bottom: 0;*/ background-color: #e67e4a; } .pg-body .body-content{ position: absolute; top: 48px; left: 220px; right: 0; background-color: green; } </ style > </ head > < body > < div class = "pg-header" ></ div > < div class = "pg-body" > < div class = "body-menu" ></ div > < div class = "body-content" > sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> </ div > </ div > </ body > </ html > |
第二种:页面内部分内容滚动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < style > body{ margin: 0; } .pg-header{ height:48px; background-color: #012a62; } .pg-body .body-menu{ position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; background-color: #e67e4a; } .pg-body .body-content{ position: absolute; top: 48px; left: 220px; right: 0; bottom: 0; background-color: green; overflow: auto; /*< overflow 添加滚动条>*/ } </ style > </ head > < body > < div class = "pg-header" ></ div > < div class = "pg-body" > < div class = "body-menu" ></ div > < div class = "body-content" > sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br /> </ div > </ div > </ body > </ html > |
HTML、CSS常用技巧的更多相关文章
- CSS 常用技巧
概述 相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚 ...
- api日常总结:前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
- css常用技巧集合
1 不想让按钮touch时有蓝色的边框或半透明灰色遮罩(根据系统而定) /*解决方式一*/ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-use ...
- css常用技巧:input提示文字;placeholder字体修改
1 很多网站都需要更改 <input>内部的placeholder 文字颜色属性:下面来介绍下这个技巧. 2 源代码: <!DOCTYPE html><html> ...
- css常用技巧1
css绘制三角形 <style> .triangle-box{ margin: 50px auto; height: 300px; width: 500px; box-shadow: 1p ...
- css常用技巧
去点号 list-style:none; 字体居中 text-align:center; 链接去下划线 text-decoration:none; 鼠标禁止右键 <body oncontextm ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- Css常用的技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...
- CSS兼容常用技巧
请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...
随机推荐
- shiro 登录
@Controllerpublic class LoginController { @RequestMapping(value="/login") public @Response ...
- Android偏好设置(7)自定义Preference,和PreferenceDialog
Building a Custom Preference The Android framework includes a variety of Preference subclasses that ...
- java数组实现红包的方法
package Hongbao; import java.text.DecimalFormat; import java.util.Scanner; public class Hongbao { pu ...
- 转 叫板OpenStack:用Docker实现私有云
http://www.cnblogs.com/alexkn/p/4239457.html 看到各大厂商的云主机,会不会觉得高大上?目前大公司的主流方案是OpenStack,比如某个公司的私有云
- [转]Using the Repository Pattern with ASP.NET MVC and Entity Framework
本文转自:http://www.codeguru.com/csharp/.net/net_asp/mvc/using-the-repository-pattern-with-asp.net-mvc-a ...
- Uediter的引用和取值
页面应用Uediter控件,代码如下: <tr> <td align="center" class="xwnr_j"> <asp: ...
- for循环的两种写法哪个快
结果如下: 其实工作中,也没有这么多数据需要遍历,基本上用foreach
- [BZOJ2002][Hnoi2010]Bounce弹飞绵羊 LCT
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 建图,每次往后面跳就往目标位置连边,将跳出界的点设为同一个点.对于修改操作发现可以用 ...
- CCF|公共钥匙盒|Java
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = ...
- 锐动SDK应用于行车记录仪
方案架构 手机端直播与录播功能忠实记录旅途中各种突发事件,还原事实真相,与家人和朋友分享沿途美景,一同感受美妙之旅. 强大的视频编辑功能,像编辑图片一样给视频添加各种滤镜,配音,配乐,标题文字等特效. ...