一、列表
list-style-type:此处可以加disc/circle/square,分别表示实心圆、空心圆、方形的列表格式。
list-style-image:此处后面紧跟的是url(xxx.jpg),表示自定义排序图标
list-style-position:后面紧跟inside或者outside,inside表示换到第二行的文字和第一行文字对齐,不和圆点对齐。
同时也可以把以上一起写成list-style: outside circle等。如下是带有inside的代码和效果图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格样式</title> </head> <body> <ul style="list-style-type: square; list-style-position:inside"> <li>测试一下inside界面HTML5HTML5H5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5</li> <li>CSS</li> <li>JavaScript</li> <li>Python</li> </ul> </body> </html>
二、表格table
border:此处可以添加边界宽度px,样式solid/dotted/dashed等,颜色red/blue等信息。
border-collapse:后面跟着collapse/separate代表几个边框是合并还是分开。
width:宽度;height:高度
vertical-align:后跟top/right等代表垂直方向的位置;text-align:代表水平方向的位置。
padding:代表内边距。
caption-side:后面为bottom或者top(默认),表示标题在上面还是下面。
table-layout:后面跟auto/fixed代表布局自动或者固定,在有大量数据的时候用fixed可以加载更快速。
框模型里面有padding-top/padding-right/padding-left等,也可以写在一起,如padding: 10px 15px 20px 25px。padding的顺序是从top顺时针,即为top->right->bottom->left。 margin也是这样的顺序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <div> <p style="margin: 10px 50px 50px 10px"> 生而为人 </p> <p style="margin: 10px 50px 50px 10px"> 请务必善良 </p> </div> <table style="border: 1px solid blue; border-collapse: collapse; caption-side: bottom; table-layout: fixed"> <caption>学习前端</caption> <tr> <th style="border: 1px solid blue; width: 200px; vertical-align: top; text-align: right; padding: 10px 15px 20px 25px">HTML5</th> <th style="border: 1px dashed blue; width: 50px;height: 100px;">CSS</th> <th style="border: 1px dotted blue">JavaScript</th> <th style="border: 1px solid blue">Python</th> </tr> <tr> <td style="border: 1px solid blue">88</td> <td style="border: 1px solid blue">90</td> <td style="border: 1px solid blue">97</td> <td style="border: 1px solid blue">100</td> </tr> </table> </body> </html>
三、定位position
使用<div></div>将页面变成块状元素。<span>代表行内段</span>
定位有普通流、浮动流、绝对流三种。即position包含static/relative/absolute三种,默认是普通流。
浮动流里面float后面跟着位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--<div style="position: absolute; top: 120px">--> <div> <img src="laugh.png" width="398" style="float: right"></img> <p style="position: absolute; left: -20px; bottom:-20px"> 生而为人 </p> <p style="margin: 10px 50px 50px 10px"> 请务必善良 </p> </div> <table style="border: 1px solid blue; border-collapse: collapse; caption-side: bottom; table-layout: fixed"> <caption>学习前端</caption> <tr> <th style="border: 1px solid blue; width: 200px; vertical-align: top; text-align: right; padding: 10px 15px 20px 25px">HTML5</th> <th style="border: 1px dashed blue; width: 50px;height: 100px;">CSS</th> <th style="border: 1px dotted blue">JavaScript</th> <th style="border: 1px solid blue">Python</th> </tr> <tr> <td style="border: 1px solid blue">88</td> <td style="border: 1px solid blue">90</td> <td style="border: 1px solid blue">97</td> <td style="border: 1px solid blue">100</td> </tr> </table> </body> </html>
四、样式选择器
用<style></style>在head中写样式,再由下面选择样式。
1. 元素选择器
此种方式写一个元素后用花括号写里面的元素样式,如th{border:1px dashed blue};也可以多个元素一起,用逗号隔开。
2. 类选择器
这种方式最常用,写法类似p.important { }或者*.important{ },一个表示特指段落p一个表示泛指。
在选择这个样式的时候可以选择多个,如class="important warning"等,可以遵循多个样式规则。
3. id选择器
顾名思义,根据id选择。写法如*#important{ },选择时id="important"。
4. 属性选择器(CSS2引入的)
如 *[title] {color:red}代表有title属性的都为红色。
还有一类是伪类,如visited,hover等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <style> p,th,td{border: 1px dashed blue} p em{background-color: green} *.important{ color: #FF0000;} *[title]{color: red} a:visited{color: #000000} a:link{} a:hover{} a:active{} a.red:visited{color: red} </style> </head> <body> <div> <h1>请注意</h1> <a class="red" href="http://www.cumt.edu.cn">欢迎点这里</a> <img src="laugh.png" width="398" style="float: left"></img> <p title="Hello"> <!--<i>生而为<em>人</em></i> --> 生而为<em>人</em> </p> <!--<p class="important">--> <p> 请务必善良 </p> </div> <table style="border: 1px solid blue; border-collapse: collapse; caption-side: bottom; table-layout: fixed"> <caption>学习前端</caption> <tr> <th>HTML5</th> <th>CSS</th> <th>JavaScript</th> <th>Python</th> </tr> <tr> <td>88</td> <td>90</td> <td>97</td> <td>100</td> </tr> </table> </body> </html>