国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 網站 > WEB開發 > 正文

[08]項目實戰-PC 端固定布局(8)

2024-04-27 15:16:06
字體:
來源:轉載
供稿:網友

一.歸類合并

在前幾節課中,有一部分 HTML 代碼比較松散,沒有統一到一個類別塊里。比如:很多的標簽超鏈接沒有歸類到 UL 里,導致一些問題等。

//松散的<a>標簽<a href="###">曼谷(12)</a><a href="###">東京(5)</a><a href="###">西雙版納(8)</a>...

這樣寫使用多個標簽有什么問題?具體如下:

1.從語義不明確,如果外部包含 UL 可以理解為標簽列表; 2.從 CSS 布局排版上,UL 作為一個整體,更容易統一排版; 3.從 SEO 角度考慮,大量 a 標簽有可能會被判定堆積關鍵字嫌疑,從而導致網站降權,

用 UL 包含判斷則讓搜索引擎判定為有條例的列表,對搜索引擎更加友好。

//改成這種形式<ul> <li><a href="###">曼谷(12)</a></li> <li><a href="###">東京(5)</a></li> <li><a href="###">西雙版納(8)</a></li></ul>//重新改寫的 CSS#container .tag { text-align: center; padding: 10px 0;}#container .tag li { display: inline-block; background-color: #eee; width: 100px; height: 35px; line-height:35px; text-indent:8px; text-align: left; margin:2px 0;}#container .tag a { display: block; color: #999;}#container .tag a:hover { color: #fff; background-color: #458B00;}

同樣,檢查了首頁,也有一個歸類的問題,就是<figcaption>標簽。字面上意思是表示圖片的標題或簡要信息。那我們設想一下,把除了標題和其他圖片有關的簡要信息都歸于<figcaption>可以達到更好的排版效果。

//改寫后的 HTML<figure> <img src="img/tour1.jpg" alt="熱門旅游"> <figcaption> <strong class="title">&lt;曼谷-芭提雅 6 日游&gt;</strong> 包團特 惠,超豐富景點,升級 1 晚國五,無自費,更贈送 600 元/成人自費券 <div class="info"> <em class="sat">滿意度 77%</em> <span class="二.子導航

旅游資訊在展示內容的上面,需要一個子導航塊。 這里寫圖片描述

//HTML 部分<div class="list"> <div class="infor"> <ul class="left"> <li><a href="###">限時特價</a></li> <li><a href="###">熱門推薦</a></li> </ul> <ul class="right"> <li><a href="###" class="selected">推薦</a></li> <li><a href="###">折扣</a></li> <li><a href="###">價格</a></li> </ul> </div> ...</div>//CSS 部分#container .list { width: 910px; float: left;}#container .infor { height: 45px; line-height:45px; margin: 0 0 20px 0; background-color: #eee;}#container ul.left { display: inline-block; float: left;}#container ul.left li { width: 150px; height: 43px; line-height:43px; font-size: 18px; display: inline-block;}#container ul.left li a { display: block; text-align: center; color: #666;}#container ul.left li:first-child { background-color: #fff; border-top: 2px solid #458B00; position: relative; left: 1px;}#container ul.right { float: right; padding: 0 20px 0 0;}#container ul.right li { width: 60px; height: 45px; line-height:45px; font-size: 16px; display: inline-block; text-align: center;}#container ul.right li a { padding: 3px8px; color: #666;}#container ul.right li a.selected, #container ul.right li a:hover{ background-color: #458B00; color: #fff;}
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 利川市| 乌拉特前旗| 靖边县| 天气| 凯里市| 洪雅县| 凭祥市| 潞西市| 滁州市| 中江县| 翁牛特旗| 璧山县| 莱州市| 黄山市| 兴义市| 博乐市| 武功县| 武隆县| 文安县| 元谋县| 江西省| 南开区| 金阳县| 集贤县| 清水县| 海盐县| 绥德县| 青铜峡市| 团风县| 准格尔旗| 博湖县| 青阳县| 云浮市| 龙口市| 阳城县| 湘潭县| 安国市| 长葛市| 通渭县| 阿拉尔市| 浠水县|