華為榮耀手機最新款長沙關(guān)鍵詞優(yōu)化新報價
題目一：
? ? ? ? 使用CSS樣式對頁面元素加以修飾，制作“ 旅游攻略 ”網(wǎng)站。如下圖所示
運行效果：
代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>旅游攻略</title><style type="text/css">.whole {width: 780px; height: 600px; margin: 0 auto;}.first{width: 700px;}.second{margin-top: 10px;width:780px;height: 30px;background-color: black;}a{color: white;text-decoration: none;}a:focus{outline: 2px solid #00f; /* 藍色邊框，可根據(jù)設(shè)計調(diào)整顏色和寬度 */}.left{float: left;width: 350px;height: 500px;background-color: antiquewhite;margin-top: 10px;border: 1px solid;}.left1{height: 260px;background-color: #886666;}.left2{border-bottom: 2px dashed white;color: #ccc;}.new{font-size: 20px;color: #666;}.right{margin-top: 10px;float: right;height: 250px;width: 390px;}.right2{width: 390px;height: 300px;float: right;}.right3,.right4{margin-top: 0%;color: #333;background-color: #886666;font-size: 12px;}body{background-image: url(img/bg.JPG);}</style></head><body><div class="whole"> <div class="first"><img src="img/logo.JPG" width="780" height="100px" alt="網(wǎng)站logo"/></div> <nav class="second"><a href="#">首頁 | </a><a href="#">酒店 | </a><a href="#">旅游 | </a><a href="#">跟團游 | </a><a href="#">自由行 | </a><a href="#">機票 | </a><a href="#">火車 | </a><a href="#">汽車票 | </a><a href="#">機票 | </a><a href="#">門票 | </a><a href="#">攻略 | </a><a href="#">商旅 | </a><a href="#">更多</a></nav><div class="left"><a class="new">最新活動</a><div class="left1"><p class="left2">上海龍支付酒店 + 景點滿500減100</p><p class="left2">包車游世界，暢游當?shù)匦?#xff0c;還有出行補貼400元/人</p><p class="left2">新年紅包，你寫就有。請拿起手機，編輯你的信息。</p><p class="left2">女神節(jié)，特別好禮，送給漂亮的你。</p><p class="left2">寒假出去玩。溫泉滑血HIGH起來，酒店8折起!</p></div><div><img src="img/guanggao.jpg" width="350px" height="190px"/></div></div><div class="right"><img src="img/lijiang.jpg" width="390px" height="200px"/><p class="right3">2019的第一天，我遇見了下雪的麗江。<br />喜歡麗江這邊的藍天白云，一年中總會來上好幾次···</p></div><div class="right2"><img src="img/feilvbin.jpg" width="390px" height="200px"/><p class="right4">面面旅拍一宿務(wù)漁村麥克坦、墨寶鯨鹽甘米銀;<br />三入菲律賓之與反向錦鯉攜手的囧途紀行</p></div></div></body>
</html>代碼講解
- 這個網(wǎng)頁由導航欄（first、second）、左側(cè)的浮動盒子（left）和右側(cè)的浮動盒子（right）組成。
- ?margin: 0 auto;? 有居中的效果
-
其中 alt="網(wǎng)站logo" ，當這圖片加載不出來是會用 “網(wǎng)站logo” 的文字來替代圖片<img src="img/logo.JPG" width="780" height="100px" alt="網(wǎng)站logo"/>
題目二：
????????使用CSS對頁面網(wǎng)頁元素加以修飾，制作“青年志愿者”網(wǎng)站。
運行效果 ：
代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>青年志愿者</title><style type="text/css">.whole{width: 100%;height: 850px;border: 0px solid;margin: 0 auto;}.logo{width: 100%;height: 100px;}.logo img{width: 100%;height: 100px;}a{text-decoration: none;}.NavBar{width: 100%;height: 30px;margin-top: 5px;background-color:#686868;}.NavBar a{padding: 10px 20px;}.NavBar2{width: 900px;height: 30px;background-color: white;}.NavBar2 a{color:black;}.left{width: 350px;height: 600px;float: left;margin-left: 20%;margin-right: 10px;border: solid #686868;}.right{width: 350px;height: 600px;float: right;margin-right: 20%;margin-left: 10px;border: solid #686868;}.right1{font-family:fangsong;font-size: 20px;font-weight:bolder;}.right2{border-bottom: 3px solid;}li{list-style: none;text-indent: 4em;}.footer{width: 100%;height: 20px;margin-top: 670px;text-align: center;background-color: #686868;}</style></head><body><div class="whole"><div class="logo"><img src="img/logo2.JPG" width="100%" height="100px"/></div><div class="NavBar"> <span> <a href="#">首頁</a> </span><span> <a href="#">志愿組織</a> </span><span> <a href="#">志愿項目</a> </span><span> <a href="#">志愿文化</a> </span><span> <a href="#">志愿人才</a> </span><span> <a href="#">發(fā)布</a> </span><span> <a href="#">志愿服務(wù)交流會</a> </span><span> <a href="#">志愿社區(qū)</a> </span><span> <a href="#">登錄</a> </span> </div><div class=".NavBar2"><span><a href="#">中國青年誠信活動</a> </span><span><a href="#">志愿中國</a> </span><span><a href="#">青年之聲</a> </span><span><a href="#">中國青年公益行動專欄</a> </span><span><a href="#">2015年公益服務(wù)交流會官網(wǎng)</a> </span><span><a href="#">XXXX上線</a> </span></div><div class="left"><img src="img/left.JPG" width="350px" height="220px"/><img src="img/left2.JPG" width="350px" height="375px"/></div><div class="right"><p class="right1">“我和我的祖國”視頻征集活動啟動</p><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><p class="right2">公益快報</p><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><p class="right2">公益觀察</p><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li></div><div class="footer"><p>版權(quán)所有©中國青年志愿者</p></div></div></body>
</html>代碼講解：
（1）?.whole類
- 整個網(wǎng)頁的內(nèi)容被包裹在
<div class="whole">中，這是一個主要的容器 - width: 100%;? 使
whole容器將隨著瀏覽器窗口的大小變化而自動調(diào)整寬度 - margin: 0 auto; 使
<div class="whole">這個元素居中。
（2）.NavBar類和.NavBar2類
- 是用來設(shè)置導航欄的的樣式
（3）
- 此網(wǎng)頁設(shè)置了兩個左右浮動的盒子，從而將內(nèi)容分成兩塊
?
? ? ??
? ? ? ?
?
?