當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端，css

發(fā)布時間：2024/10/12 HTML 81 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端，css 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

????? css頁面中的body背景圖片，必須在此HTML頁面上，返回上一個文件夾，然后才能進入img文件夾中，不需要重復。

?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>標簽的字體類型，行高和字體大小。

.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的高度（因為它是絕對定位，相當于最近的div），也可以left，right=200px；設置位置。

.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" >
? 
</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é)

以上是生活随笔為你收集整理的web前端，css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

HTML

web前端，css

總結(jié)