css構築ブロックレベル要素
2121 ワード
<html>
<head>
<title>css </title>
<meta charset = "utf-8" />
<!--
1.
width: ;
height: ; ,【 】
2. :
(1)
background-color: ;
: transparent
【background-color 】
(2)
background-image none
， URL
background-image: url(bj.jpg);
(3)
background-repeat ， :
repeat-x ,repeat-y ,no-repeat
(4)
background-position
1) ：top, bottom, left, right, center
:
top left ; top center ;top right ; center left ;center center ;
center right ;bottom left; bottom center ; bottom right
2) background: 50% 50%;
3) , px background:40px 10px;
4)
5) background-repeat: no-repeat;
， 。
background-attachment:fixed;
： background: #00FF00 url(bj.jpg) no-repeat fixed center left;
3. :
border : 1px solid #ccc;
dashed
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
-->
<link rel = "stylesheet" style = "text/css" href = "style/css.css" />
</head>
<body>
<div class = "div1" >
div
<p> P </p>
<p> P </p>
</div>
<div>
div
</div>
</body>
</html> css.css
/*
body {
background-image: url(../images/2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
*/
.div1 {
width: 500px;
height: 500px;
border: 10px dashed red ;
background: #696 url(../images/1.jpg) no-repeat 10px;
/*
background-position
background-position: center center;
image repeat position position 。
1. left center right ， ： (y x )
2. ， background-position: 50% 4% ， (x y )
3. ， "center"。 ：0% 0%。
4. % position 。
*/
}
p {
background-color: red;
}