周胤龙20227821038第三次作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景复合属性</title>
<style type="text/css">
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型的宽高属性</title>
<style type="text/css">
.box{
width: 400px;
height: 50px;
background: #F90;
border: 8px solid #63F;
}
</style>
</head>
<body>
<p class="box">盒子模型的宽高属性</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style type="text/css">
img{
border: 8px solid black;
border-radius: 50px 20px 10px 70px/30px 40px 60px 80px;
}
</style>
</head>
<body>
<img class="circle" src="t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片边框</title>
<style type="text/css">
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>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
.border{border: 5px solid #1d6398;}
img{
padding: 20px 20px 0px 20px;
}
p{padding: 5%;}
</style>
</head>
<body>
<img class="border" sre="t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg" alt="冰山"/>
<p class="border">冰山是指从冰川或极地冰盖临海......多见于南大洋、北冰洋和大西洋北部</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
img{
width: 200px;
border: 5px solid #09C;
float: left;
margin-right: 50px;
margin-left: 30px
}
p{text-indent: 2em;}
</style>
</head>
<body>
<img src="t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg" alt="重阳节简介"/>
<p>重阳节，是中国民间传统节日，节期在每年农历九月初九日......唐代是传统节日习俗糅合定型的重要时期，其主体部分传承至今。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style type="text/css">
img{
padding: 20px;
border-radius: 50%;
border: 1px solid #666;
box-shadow: 5px 5px 10px 2px #999 inset;
}
</style>
</head>
<body>
<img src="t\u_2305213653_944832396&fm_253&fmt_auto&app_138&f.jpeg" alt="爱护眼睛"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing属性</title>
<style type="text/css">
.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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style type="text/css">
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>
<h2>短歌行</h2>
<p>对酒当歌，人生几何！山不厌高，海不厌深。周公吐哺，天下归心。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置背景图像位置</title>
<style type="text/css">
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置多重背景图像</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid black;
background-image: url(),url(),url();
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景复合属性</title>
<style type="text/css">
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素与行内元素</title>
<style type="text/css">
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>p文本</p>
<p>
<strong>strong文本</strong>
<em>em文本</em>
<del>del文本</del>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签的使用</title>
<style type="text/css">
#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>
<div id="header">
<span class="main">木偶戏</span>是中国一种古老的艺术，<span class="art">是中国艺术的瑰宝</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻块元素垂直外边距的合并</title>
<style type="text/css">
.one{
width: 150px;
height: 150px;
background: #FC0;
margin-bottom: 20px;
}
.two{
width: 150px;
height: 150px;
background: #63F;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="one">1</div>
<dir class="two">2</dir>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套块元素上外边距合并</title>
<style type="text/css">
*{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>
<div class="father"><div class="son"></div></div>
</body>
</html>
