01.

<!DOCTYPE html>

<head>

<title>div标签</title>

.one{

width:600px;

height:50px;

background:#BO8FB4;

font-size:14px

text-align:center;

}

.two{

width:600px;

background:#C1B0C6;

font-size:14px;

text-indent:2em;

}

</style>

</head>

<body>

国风.鄘风.相鼠

</div>

</body>

</html>

02.

<!DOCTYPE html>

<head>

<title>盒子模型的宽高属性</title>

.box{

width:400px;

height:50px;

background:#F90;

border:8px solid #63F;

}

</style>

</head>

<body>

<p class="box">盒子模型的宽高属性</p>

</body>

</html>

03.

<!DOCTYPE html>

<head>

img{

border:8px solid black;

border-radius:50px 20px 10px 70px/30px 40px 60px 80px;

}

</style>

</head>

<body>

</body>

</html>

04.

<!DOCTYPE html>

<head>

div{

width:362px;

height:362px;

border-style:solid;

border-image-source:url(images/3.png);

border-image-slice:33%;

border-image-outset:0;

border-image-repeat:repeat;

}

</style>

</head>

<body>

</body>

</html>

05.

<!DOCTYPE html>

<head>

.border{border:5px solid #id6398;}

img{

padding:20px 20px 0px 20px;

}

</style>

</head>

<body>

<p class="border">冰魄星：位于2360光年幽走兽统辖领域下的星球</p>

</body>

</html>

06.

<!DOCTYPE html>

<head>

/**{

maegin:0;

padding:0;

}*/

img{

width:200px;

border:5px solid #09C;

float:left

margin-right:50px;

margin-left:30px;

}

p{text-indent:2em;}

</style>

</head>

<body>

<p>父亲节(Father's Day)，顾名思义是感恩父亲的节日。约始于二十世纪初，起源于美国，现已广泛流传于世界各地，节日日期因地域而存在差异。最广泛的日期在每年6月的第三个星期日，世界上有52个国家和地区是在这一天过父亲节。节日里有各种的庆祝方式，大部分都与赠送礼物、家族聚餐或活动有关。</p>

</body>

</html>

07.

<!DOCTYPE html>

<head>

<title>box-shadow属性</title>

img{

padding:20px;

border-radius:50%;

border:1px solid #666;

box-shadow:5px 5px 10px 2px #999 inset;

}

</style>

</head>

<body>

</body>

</html>

08.

<!DOCTYPE html>

<head>

<title>box-sizing属性</title>

.box{

width:300px;

height:100px;

background:gray;

border:10px solid blue;

box-sizing:content-box;

}

.box2{

width:300px;

height:100px;

background:gray;

border:10px solid blue;

box-sizing:border-box;

}

</style>

</head>

<body>

<div class="box1">content-box属性</div>

<div class="box2">border-box属性</div>

</body>

</html>

09.

<!DOCTYPE html>

<head>

body{background-color:#000;

color:#fff;

/*background-image:url(images/7.jpg);*/

}

h2{

font-family:"微软雅黑";

color:#FFF;

background-color:#fff;

color:#000;

}

</style>

</head>

<body>

</body>

</html>

10.

<!DOCTYPE html>

<head>

<title>设置背景图像的位置</title>

body{

background-image:url(images/9.jpg);

background-repeat:no-repeat;

/*background-position:right top;*/

/*background-position:right:50px 80px;*/

/*background-attachment:fixed;*/

}

</style>

</head>

<body>

<h2>端午节的由来</h2>

<p>传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来

回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成粽子。以后，在每年的五月初五，就有了龙舟竞渡、吃粽子、喝雄黄酒的风俗以此来纪念爱国诗人屈原。</p>

</body>

</html>

11.

<!DOCTYPE html>

<head>

<title>设置多重背景图像</title>

div{

width:300px;

height:300px;

border:1px solid black;

background-image:url(images/dog14.png),url(imagrs/bg13.png),url(images/bg12.png);

}

</style>

</head>

<body>

</body>

</html>

12.

<!DOCTYPE html>

<head>

<title>背景复合属性</title>

div{

width:200px;

height:200px;

border:5px dashed black;

padding:25px;

background:#ffcc33 url(images/15.png) no-repeat right bottom padding-box;

}

</style>

</head>

<body>

<div>无脸男表面看起来可怕，其实心底十分善良，渴望交朋友。</div>

</body>

</html>

13.

<!DOCTYPE html>

<head>

<title>块元素和行内元素</title>

h2{

background:#39F;

width:350px;

height:50px;

text-align:center;

p{background:#060;}

strong{

background:#66F;

width:360px;

height:50px;

text-align:center;

}

em{background:#FF0;}

del{background:#CCC;}

</style>

</head>

<body>

<h2>h2标签定义的文本</h2>

<p>p标签定义的文本</p>

<p>

<strong>strong标签定义的文本</strong>

<em>em标签定义的文本</em>

<del>del标签定义的文本</del>

</p>

</body>

</html>

14.

<!DOCTYPE html>

<head>

<title>span标签的使用</title>

#header{

font-family:"微软雅黑";

font-size:16px;

color:#099;

}

#header .main{

color:#63F;

font-size:20px;

padding-right:20px;

}

#header .art{

color:#F33;

font-size:18px;

}

</style>

</head>

<body>

<span class="main">木偶戏</span>是中国的一种古老的民间艺术，<span class="art">是中国乡土艺术的瑰宝。</span>

/div>

</body>

</html>

15.

<!DOCTYPE html>

<head>

<title>相邻块元素垂直外边距的合并</title>

.one{

width:150px;

height:150px;

background:#FC0;

margin-bottom:20px;

}

.two{

width:150px;

height:150px;

background:#63F;

margin-bottom:20px;

}

</style>

</head>

<body>

</body>

</html>

16.

<!DOCTYPE html>

<head>

<title>嵌套块元素上外边距的合并</title>

*{margin:0; padding:0;}

div.father{

width:400px;

height:400px;

background:#FC0;

margin-top:20px;

}

div.son{

width:200px;

height:200px;

background:#63F;

margin-top:20px;

}

</style>

</head>

<body>

</div>

</body>

</html>