<!DOCTYPE html>

<head>

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

div{

width: 200px;

height: 200px;

border: 5px dashed black;

padding: 25px;

background: #ffcc33 url(t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg) no-repeat right bottom padding-box;

}

</style>

</head>

<body>

<div>杜甫不仅是一位诗人，还是唐代伟大的现实主义文学奖。</div>

</body>

</html>

<!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>

<!DOCTYPE html>

<head>

img{

border: 8px solid black;

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

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

div{

width: 362px;

height:362px;

border-style: solid;

border-image-source: ;

border-image-slice:33%;

border-image-width: 40px;

border-image-outset: 0;

border-image-repeat: repeat;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

.border{border: 5px solid #1d6398;}

img{

padding: 20px 20px 0px 20px;

}

p{padding: 5%;}

</style>

</head>

<body>

<p class="border">冰山是指从冰川或极地冰盖临海......多见于南大洋、北冰洋和大西洋北部</p>

</body>

</html>

<!DOCTYPE html>

<head>

img{

width: 200px;

border: 5px solid #09C;

float: left;

margin-right: 50px;

margin-left: 30px

}

p{text-indent: 2em;}

</style>

</head>

<body>

<p>重阳节，是中国民间传统节日，节期在每年农历九月初九日......唐代是传统节日习俗糅合定型的重要时期，其主体部分传承至今。</p>

</body>

</html>

<!DOCTYPE html>

<head>

img{

padding: 20px;

border-radius: 50%;

border: 1px solid #666;

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

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

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

.box1{

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>

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

</body>

</html>

<!DOCTYPE html>

<head>

body{

background-color: #000;

color: #fff;

background-image: t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg;

}

h2{

font-family: "微软雅黑";

color:#FFF;

background-color: #fff;

color: #000;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

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

body{

background-image:t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg ;

background-repeat: no-repeat;

/*background-position: right top;*/

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

/*background-position: fixed*/

}

</style>

</head>

<body>

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

<p>据说屈原死后，楚国百姓哀痛异常......以此来纪念爱国诗人屈原。</p>

</body>

</html>

<!DOCTYPE html>

<head>

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

div{

width: 300px;

height: 300px;

border: 1px solid black;

background-image: url(),url(),url();

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

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

div{

width: 200px;

height: 200px;

border: 5px dashed black;

padding: 25px;

background: #ffcc33 url(t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg) no-repeat right bottom padding-box;

}

</style>

</head>

<body>

<div>杜甫不仅是一位诗人，还是唐代伟大的现实主义文学奖。</div>

</body>

</html>

<!DOCTYPE html>

<head>

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

h2{

background-color: #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>

<strong>strong文本</strong>

<del>del文本</del>

</p>

</body>

</html>

<!DOCTYPE html>

<head>

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

#header{

font-family: "微软雅黑";

font-size: 16px;

color: #009;

}

#herder .main{

color: #F33;

font-size: 18px;

}

#herder .art{

color: #63F;

font-size: 18px;

}

</style>

</head>

<body>

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

</div>

</body>

</html>

<!DOCTYPE html>

<head>

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

.one{

width: 150px;

height: 150px;

background: #FC0;

margin-bottom: 20px;

}

.two{

width: 150px;

height: 150px;

background: #63F;

margin-top: 40px;

}

</style>

</head>

<body>

</body>

</html>

<!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: 400px;

background: #63F;

margin-top: 40px

}

</style>

</head>

<body>

</body>

</html>