1. table标签中的标题
caption { caption-side: top; }
2.table标签中边框重合
table { width: 300px; height: 200px; border-collapse: collapse; /*边框可以重合*/ }
3. table表中的项居中
th, td { border: solid 2px red; text-align: center; }
4. 列表头和行表头
<!--默认列表头 scope="col"--> <table > <caption >学生信息表</caption> <tr><th>姓名</th><th>学号</th><th>性别</th></tr> <tr><td>张三</td><td>001</td><td>男</td></tr> <tr><td>李四</td><td>002</td><td>男</td></tr> <tr><td>王五</td><td>003</td><td>女</td></tr> <tr><td>赵六</td><td>004</td><td>女</td></tr> </table> <!--横表头--> <table > <caption >学生信息表</caption> <tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr> <tr><th scope="row">学号</th><td>李四</td><td>男</td></tr> <tr><th scope="row">性别</th><td>王五</td><td>女</td></tr> </table>
5. 按钮和文本框的边框,不显示或者只显示下划线
.btn { border-width: 0px; } .txt { border-width: 0px; border-bottom: solid 2px black; }
6. 去掉超链接的下划线
a { text-decoration: none; }
7. 设定鼠标的显示形状
p { cursor: pointer; }
8. 无序列表,更改无序编号样式
ul { list-style-type: none; }
9. 块级元素和行内元素
内联元素,行内元素:1. width和height不起作用 2.不会占满一行
内联元素包含:span input a label img textarea select等 行内元素用来做内容
块级元素:1. 设置width,height 2. 块级元素里面的内容,默认显示在块的左上角 3. 块级元素单独占满一行
块级元素包含:div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form等 块级元素用来做布局
<span>1</span><span>2</span>
span { /*width :100px; 不起作用*/ /*height :100px;不起作用*/ /*border :solid 1px red;*/ /*display :block 行内元素转化为块级元素*/ /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/ }
对于块级元素的两个重要CSS属性:float和clear
<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
.c1 { width: 100px; height: 100px; border: solid 1px red; /*display :inline 块级元素转化为行内元素*/ float: left; /*浮动,靠左对齐*/ } .c2 { width: 100px; height: 100px; border: solid 1px red; clear: left; /*因为受到前面块级元素float的影响,必须先清空下前面的格式*/ float: right; } .c3 { width: 100px; height: 100px; border: solid 1px red; float: right; }
10. 盒子模型 padding margin
<div id="d1">盒子模型 内间距</div> <div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>
#d1 { width: 100px; height: 100px; border: solid 1px red; clear: both; /*padding :10px; 上下左右都撑开10px*/ /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/ /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/ /*padding :10px 15px 20px 25px 顺时针,上10,右15,下20,左25*/ padding-top: 20px; padding-left: 15px; } #d2, #d3 { width: 100px; height: 100px; border: solid 1px red; float :left ; } #d3 { /*margin :20px; 这个用法和padding一样*/ margin-left :20px; }
11.所有的元素都顶住浏览器的边框
*{ padding :0px; margin :0px; }
12. 在google浏览器中调试,右键-Inspect
<div id="d4"> <ul > <li>盒子模型调试</li> <li>盒子模型调试</li> <li>盒子模型调试</li> </ul> </div>
#d4{ width: 200px; height: 100px; border: solid 1px red; clear :both ; margin :0px auto; /*代表上下是0,左右自动平分,这样就居中了*/ } #d4 ul{ width: 120px; height: 60px; margin :0px auto ; /*默认是div的宽度,先丈量下大小,修改高度和宽度*/ }
13. padding和Magin对行内元素一样有作用
<div> <span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span> </div>
#d5,#d6{ border: solid 1px red; padding :20px; margin :50px; }
看代码:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="CSS/demo.css" rel="stylesheet" /> </head> <body> <!--默认列表头 scope="col"--> <table > <caption >学生信息表</caption> <tr><th>姓名</th><th>学号</th><th>性别</th></tr> <tr><td>张三</td><td>001</td><td>男</td></tr> <tr><td>李四</td><td>002</td><td>男</td></tr> <tr><td>王五</td><td>003</td><td>女</td></tr> <tr><td>赵六</td><td>004</td><td>女</td></tr> </table> <!--横表头--> <table > <caption >学生信息表</caption> <tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr> <tr><th scope="row">学号</th><td>李四</td><td>男</td></tr> <tr><th scope="row">性别</th><td>王五</td><td>女</td></tr> </table> <!--按钮,文本框的边框--> <input type="button" value="我是一个按钮" class="btn"/> <input type="text" class="txt"/> <!--去掉超链接的下划线--> <a href="http://www.baidu.com" target="_blank">百度</a> <!--设定鼠标的形状--> <p>鼠标形状</p> <ul> <li>1111</li> <li>3333</li> <li>5555</li> </ul> <!--内联元素,行内元素:1. width和height不起作用 2.不会占满一行 内联元素包含:span input a label img textarea select 行内元素用来做内容--> <span>1</span><span>2</span> <br/> <br /> <!--块级元素:1. 设置width,height 2. 块级元素里面的内容,默认显示在块的左上角 3. 块级元素单独占满一行 有哪些块级元素:div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form 块级元素用来做布局--> <div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div> <br /> <br /> <!--盒子模型--> <div id="d1">盒子模型 内间距</div> <div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div> <!--在google浏览器中调试--> <div id="d4"> <ul > <li>盒子模型调试</li> <li>盒子模型调试</li> <li>盒子模型调试</li> </ul> </div> <!--padding和Magin对行内元素一样有作用--> <div> <span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span> </div> </body> </html>
body { font-size: 20px; font-family: "微软雅黑"; } caption { caption-side: top; } table { width: 300px; height: 200px; border-collapse: collapse; /*边框可以重合*/ } th, td { border: solid 2px red; text-align: center; } .btn { border-width: 0px; } .txt { border-width: 0px; border-bottom: solid 2px black; } a { text-decoration: none; } p { cursor: pointer; } ul { list-style-type: none; } span { /*width :100px; 不起作用*/ /*height :100px;不起作用*/ /*border :solid 1px red;*/ /*display :block 行内元素转化为块级元素*/ /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/ } .c1 { width: 100px; height: 100px; border: solid 1px red; /*display :inline 块级元素转化为行内元素*/ float: left; /*浮动,靠左对齐*/ } .c2 { width: 100px; height: 100px; border: solid 1px red; clear: left; /*因为受到前面块级元素float的影响,必须先清空下前面的格式*/ float: right; } .c3 { width: 100px; height: 100px; border: solid 1px red; float: right; } #d1 { width: 100px; height: 100px; border: solid 1px red; clear: both; /*padding :10px; 上下左右都撑开10px*/ /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/ /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/ /*padding :10px 15px 20px 25px 顺时针,上10,右15,下20,左25*/ padding-top: 20px; padding-left: 15px; } #d2, #d3 { width: 100px; height: 100px; border: solid 1px red; float :left ; } #d3 { /*margin :20px; 这个用法和padding一样*/ margin-left :20px; } /*所有的元素都顶住浏览器的边框*/ *{ padding :0px; margin :0px; } #d4{ width: 200px; height: 100px; border: solid 1px red; clear :both ; margin :0px auto; /*代表上下是0,左右自动平分,这样就居中了*/ } #d4 ul{ width: 120px; height: 60px; margin :0px auto ; /*默认是div的宽度,先丈量下大小,修改高度和宽度*/ } #d5,#d6{ border: solid 1px red; padding :20px; margin :50px; }
时间: 2024-10-11 22:03:50