<html>
<head>
<title>
抬头
</title>
<meta charset="utf-8">
<link href = "main.css" rel = "stylesheet">
<style>
.InternalStyle1
{
width:660px;
height:660px;
background:green center bottom no-repeat url("dragon.png");
<!background:green url("dragon.png") no-repeat 220px 110px; 图片右移220px 下移110px>
<!repeat 重复 no-repeat 不重复 repeat-x 横向重复 repeat-y 纵向重复>
<!x轴 left center right>
<!y轴 top center bottom><!以上top、right、bottom、left、center、repeat、no-repeat、repeat-x、repeat-y等都是针对其中的背景图片做操作>
}
</style>
<style>
.InternalStyle2
{
width:400px;
height:660px;
background-color: aquamarine;
background-image: url("dragon.png");
background-repeat: repeat-y;
background-position: center;
}
</style>
<style>
#InternalStyle3
{
width:600px;
height:1500px;
background-color:bisque;
background-image: url("dragon.png");
background-repeat: repeat-y;
background-position: left;
background-attachment: fixed;/*fixed 不滚动、scroll 滚动、用来设置背景图片是否随页面滚动*/
}
</style>
</head>
<body>
<div style = "width:300px;height:100px;background:red">
inline style、行内样式
</div>
<div class = "InternalStyle1">
Internal Style1、内部样式1</div>
<div class = "InternalStyle2">
</div>
<div id = "InternalStyle3">
</div>
<div class = "ExternalStyle">
External Style、外部样式
</div>
</body>
</html>
扫一扫
8777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
