1、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
p.big{
font-size:30px;
}
p.small{
font-size:50%;
}
p.small2{
font-size:0.5em;
}
</style>
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>
<style>
p.n{
font-style:normal;
}
p.i{
font-style:italic;
}
</style>
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p>
<style>
p.n{
font-weight:normal;
}
p.b{
font-weight:bold;
}
</style>
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>
<style>
p.f1{
font-family:"Times New Roman";
}
p.f2{
font-family:Arial;
}
p.f3{
font-family:宋体;
}
p.f4{
font-family:黑体;
}
p.f5{
font-family:楷体;
}
p.f6{
font-family:微软雅黑;
}
</style>
<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>
<style>
p.all{
font:italic bold 30px "Times New Roman";
}
</style>
<p>默认字体</p>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
</body>
</html>
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
span{
cursor:crosshair;
}
</style>
<span>鼠标移动到这段文字上,就看到鼠标样式变成了十字架</span>
试一下
<style>
table.t1{
table-layout:automatic;
}
table.t2{
table-layout:fixed;
}
</style>
<table class="t1" border="1" width="100%">
<tr>
<td width="10%">abcdefghijklmnopqrstuvwxyz</td>
<td width="90%">abc</td>
</tr>
</table>
<table class="t2" border="1" width="100%">
<tr>
<td width="50px">abcdefghijklmnopqrstuvwxyz</td>
<td >abc</td>
</tr>
</table>
<style>
table.t1{
border-collapse:separate;
}
table.t2{
border-collapse:collapse;
}
</style>
<table class="t1" border="1" width="200px">
<tr>
<td width="50%">边框分离</td>
<td width="50%">边框分离</td>
</tr>
</table>
<br/>
<br/>
<table class="t2" border="1" width="200px">
<tr>
<td width="50%">边框合并</td>
<td width="50%">边框合并</td>
</tr>
</table>
</body>
</html>
3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}
</style>
<div> 默认无边框div </div>
<div class="solid"> 实线边框 </div><br/>
<div class="dotted"> 点状边框 </div> <br/>
<div class="dashed"> 虚线边框 </div> <br/>
<div class="double"> 双线边框 </div> <br/>
<style>
.red{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色边框 </div><br/>
<style>
.red{
border-style:solid;
border-color:red;
border-width:1px;
}
.default{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<div class="default"> 实线红色默认宽度边框 </div><br/>
<style>
.red{
border:1px dotted LightSkyBlue;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 点状天蓝色细边框 </div><br/>
<style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>
<div>
只有上面有边框
</div>
<style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
<style>
.red{
border:1px solid red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<span class="red"> 实线红色细边框 </span><br/>
</body>
</html>
4、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.red{
border:5px solid red;
background-color:green;
}
.pad-left{
border:5px solid red;
background-color:green;
padding-left:50px;
}
</style>
<span class="red"> 无内边距的span </span><br/> <br/>
<span class="pad-left"> 左边距为50的span </span><br/>
<style>
.pad-left-one{
border:5px solid red;
background-color:green;
padding: 20;
}
.pad-left-four{
border:5px solid red;
background-color:green;
padding: 10 20 30 40;
}
</style>
<br/>
<span class="pad-left-one"> padding:20的span </span> <br/> <br/> <br/> <br/>
<span class="pad-left-four">
padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>
<style>
.red{
border:1px solid red;
background-color:green;
}
.margin{
border:1px solid red;
background-color:green;
margin-left:10px;
}
</style>
<span class="red"> 无外边距的span </span>
<span class="red"> 无外边距的span </span>
<br/>
<span class="red"> 无外边距的span </span>
<span class="margin"> 有左外边距的span </span>
<style>
.box{
width:70px;
padding:5px;
margin: 10px;
}
div{
border:1px solid gray;
font-size:70%;
}
</style>
<div>
其他元素
</div>
<div class="box">
内容宽度70px <br><br>
内边距:5px <br> <br>
外边距:10px <br>
</div>
<div>
其他元素
</div>
</body>
</html>
5、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="http://www.12306.com">超链的不同状态</a>
<style>
a.no_underline {text-decoration: none}
</style>
<a href="http://www.12306.com">默认的超链</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>
<style>
div.d{
display:none;
}
div.v{
visibility:hidden;
}
</style>
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
<div class="v">隐藏的div4,使用visibility:hidden隐藏</div>
<div>可见的div5</div>
</body>
</html>