第一个页面
<!DOCTYPE HTML>
<html>
<head>
<title>第一个页面</title>
<meta charset="utf-8"/>
</head>
<body>
这是我的第一个页面
</body>
</html>
第二个页面-行间样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div style="width:400px; height:200px; background:red;">块</div> 一个块，宽度300像素，高度是200像素，背景蓝色 <div style="width:300px; height:200px; background:blue;"></div> <!-- 行间样式 --> <!-- html 注释 --> </body> </html>
第三个-内部样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{width:400px; height:200px; background:red;} /* 内部样式表 */ /* css 注释 */ </style> </head> <body> <div id="box">块</div> </body> </html>
第四个-外部样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link href="style.css" rel="stylesheet"/> </head> <body> <div id="box">块</div> 科技 </body> </html>
style.css文件
#box{width:400px; height:200px; background:red;}
第五个-常见样式：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{ width:400px; height:200px; background:red; } /* XX:??; 属性:属性值; 结构样式： width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 */ </style> </head> <body> <div id="box">块</div> </body> </html>
第六个-border 边框
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{ width:0; height:0; border-top:100px solid white; border-right:100px solid blue; border-bottom:100px solid green; border-left:100px solid yellow; } /* border 边框 边框样式： solid 实线 dashed 虚线 dotted 点线（IE6不兼容） */ </style> </head> <body> <div id="box"></div> </body> </html>
页面效果图：