- <!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>
页面效果图:
来源: http://www.bubuko.com/infodetail-2963491.html