web前端，css
????? css頁面中的body背景圖片，必須在此HTML頁面上，返回上一個文件夾，然后才能進(jìn)入img文件夾中，不需要重復(fù)。
?body {
????????? background-image: url(../img/3.jpg);
????????? background-repeat: no-repeat;
????? }
這是文件等級
鏈接另一個css樣式的代碼 <title></title><link href="css/s.css" rel="stylesheet" type="text/css" >
<p>標(biāo)簽的字體類型，行高和字體大小。
.p{
??? font-style:normal;
??? line-height:8px;
??? font-size:14px;
}
一個類選擇器，float左浮動，自己的邊框高度和寬度，背景顏色，行高。
.s1{
??? float:right;
??? color:white;
??? width:70px;
??? height:20px;
??? background-color:red;
??? line-height:14px;
?? ?
}
?? 另一個類選擇器，浮動分為絕對定位和相對定位，position=absolute/relative;
可以定位圖片最下方的字體，使用top的值大于div的高度（因為它是絕對定位，相當(dāng)于最近的div），也可以left，right=200px；設(shè)置位置。
.s2{
???? position: absolute;
??? width: 250px;/*自己框的寬高*/
??? height: 22px;
??? color:black;
??? background-color:pink;
??? top:200px;
}
div.d1 {
????????? background-image: url(../img/1.jpg);
????????? position: absolute;
????????? width: 250px;
????????? height: 222px;
????????? left:20px;
????? }
html總體代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
??? <title></title>
??? <link href="css/s.css" rel="stylesheet" type="text/css" >
? <!--<style>
????? body {
????????? background-image: url(img/3.jpg);
????????? background-repeat: no-repeat;
????? }
????? div.d1 {
????????? background-image: url(img/1.jpg);
????????? position: absolute;
????????? width: 50px;
????????? height: 100px;
????????? left:20px;
????? }
? </style>-->
</head>
<body>
??? <p><strong><span class="s">P</span>roducts </strong>/作品欣賞</p>
??? <p class="p">three color scenery services <span class="s1">+MORE</span></p>
??? <hr style="border:1px dashed #000; height:1px">
??? <div style="height:30px;"></div>
??? <div>
??????? <div class="d1">1<p><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></p></div>
??????? <div class="d2"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d3"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d4"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d5"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??? </div>
??? <div style="height:240px;"></div>
??? <div>
??????? <div class="d6"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d7"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d8"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d9"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??????? <div class="d10"><span class="s2">美麗的山灣小鎮(zhèn) 2014-09-15</span></div>
??? </div>
</body>
</html>
特別注意再title下的背景圖片的地址使用相對路徑，不需絕對路徑。
?body {
????????? background-image: url(img/3.jpg);
????????? background-repeat: no-repeat;
????? }
轉(zhuǎn)載于:https://www.cnblogs.com/0280-hnn/p/7157170.html
總結(jié)
- 上一篇： 钢铁雄心4禁止反苏空军思想怎么消
- 下一篇： 深圳南山亿利达大厦里面有装修设计公司吗?