【Web前端HTML5&CSS3】07-實戰練習

筆記來源：尚硅谷 Web 前端 HTML5&CSS3 初學者零基礎入門全套完整版

目錄

• 實戰練習
  • 1. 京東圖片列表
    • 開發准備
    • 布局剖析
    • 結構搭建
    • 樣式添加
      • 方式 1
      • 方式 2
    • 細節完善
      • 背景色
      • 外邊距
    • 最終效果
    • 核心代碼
  • 2. 京東左側導航條
    • 開發准備
    • 布局剖析
    • 結構搭建
    • 樣式添加
    • 細節完善
      • 文字調整
      • 符號調整
      • 懸浮樣式
    • 最終效果
    • 核心代碼
    • 存疑問題
  • 3. 網易新聞列表
    • 結構搭建
    • 樣式添加

實戰練習

1. 京東圖片列表

開發准備

本來我們是想直接右鍵圖片另存為的，但是發現並沒有該選項，應該是京東對圖片做了一定的限制

不過，這不妨礙我們獲取這些圖片，當然你也可以采用截圖的方式獲取，這里我們采用另外一種方式

通過 F12 可以看到，img元素的src屬性，我們將三張圖片的這些地址 copy 出來，直接在地址欄進行訪問

//img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg.webp
//img12.360buyimg.com/babel/s380x300_jfs/t1/152314/13/19839/57522/603e118dE941f0ce9/fdff58457adbef3e.jpg.webp
//img10.360buyimg.com/babel/s380x300_jfs/t1/154848/7/7426/82296/5fc072eeE20809200/34dca267e049d035.jpg.webp

這里就可以進行圖片另存為了，當然你也可以直接在src上填寫這些地址

不過，細心的同學會發現，這張圖片的格式是jpg.webp后綴結尾的

因為我是在谷歌瀏覽器中訪問的，而谷歌瀏覽器有自己的特有的一種圖片格式 webp（這個我們在第三節-字符實體與語義標簽中介紹過）

當然這個格式不是谷歌自己進行轉換的，而應該是京東做了不同瀏覽器之間的適配，即不同的瀏覽器傳遞不同格式的圖片

Q：怎么驗證這種說法呢？

A：我們可以打開非 Chrome 內核的瀏覽器，使用 F12 查看img的src地址就會發現不一樣的地方了

這里我用微軟自帶的 IE 瀏覽器（溫馨提示：微軟官宣定於 2022 年 6 月 15 日完全停止對 IE 的支持）

對比就可以發現，無非就是在 Chrome 瀏覽器里后綴名多了一個.webp而已

<!-- IE中的src地址 -->
//img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg
<!-- Chrome中的src地址 -->
//img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg.webp

知道這個原理，我們除了可以直接在圖片另存為保存為jpg格式，其實還可以直接修改 url 地址

最后，我們將下載的圖片放入assets（自定義目錄）工程目錄下即可

布局剖析

我們使用 F12 進行調試，可以看到京東圖片列表的具體元素及屬性

• 整體使用一個li元素包裹，里面又套了一層 div`元素，寬高比：190:470
• 每張圖片使用一個img元素，同時分別用a元素包裹，寬高比：190:150
• 三張圖片高度和為 150*3=450 < 470，注意到圖片之間存在 2*10px 的外邊距

這樣，整個京東的圖片列表的整體布局就非常清晰了

但是，我們不會那么去實現代碼。因為li元素應該包裹在ul元素或者ol元素中，而這里並沒有遵循 css 中的語義標簽使用規范

我們先看一下這么寫會有什么問題

<link rel="stylesheet" href="assets/reset.css" />
<!-- ul包裹li -->
<ul>
  <li>ul li</li>
  <li>ul li</li>
  <li>ul li</li>
</ul>
<!-- div包裹li -->
<div>
  <li>div li</li>
  <li>div li</li>
  <li>div li</li>
</div>

效果

由於使用了 reset 樣式，瀏覽器的默認樣式被我們去除了。但是使用ul包裹的li元素和使用div包裹的li元素存在明顯的區別：

• 使用ul包裹的li元素是沒有默認樣式的
• 使用div包裹的li元素前仍然存在黑點

我想是因為京東在這里實現了自己的樣式替換，所以為了避免重復 reset 默認樣式，我們采用正常的列表標簽

結構搭建

<ul>
  <li>
    <a href="javascript:;"><img src="assets/1.jpg" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="assets/2.jpg" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="assets/3.jpg" /></a>
  </li>
</ul>

到這里我們基本骨架已經有了，不過因為沒有寫 css 樣式，圖片幾乎占據了整個瀏覽器頁面

樣式添加

方式 1

還記得上面分析對布局結構的分析嗎？

我們首先調整整體的寬高比和單個圖片的寬高比

ul {
  width: 190px;
  height: 470px;
}

ul > li img {
  /* 
		這里其實只調整高度即可，因為我們下載的圖片寬高比跟F12中調試的是一致的
		而且一般情況下，不會固定或修改圖片在網頁中顯示的寬高比
		因為如果我們隨意調整css中的寬高比，會導致圖片變形 
    	這里任意只調整高度或寬度，圖片可以保持原比例大小
    */
  /* width: 190px; */
  height: 150px;
}

當然這只是其中寫法，我們還可以換個思路，退一步來思考

方式 2

我們呢不去限制圖片的寬或高，而是對超出ul元素部分（溢出部分）進行隱藏

ul {
  width: 190px;
  height: 470px;
  overflow: hidden;
}

但是因為圖片本身的大小還沒有做限制，所以圖片保持了原來的圖片比例和大小

小劇場：

我們發現下載下來的圖片分辨率大小為 380*300，寬和高都剛好是瀏覽器中圖片寬高的 2 倍

這只是巧合么？

不！這是京東為了高分辨率設備而做的適配，保證在一些高清屏下也能夠保持清晰

那我們再對圖片添加固定的寬或高不就行了？

不！我們直接指定寬或高的話，overflow屬性不就顯得多此一舉嘛

我們給 img 元素設定一個100%的width屬性

ul > li img {
  /* height: 150px; */
  width: 100%;
}

Q：為什么不能用auto呢？

A：我們前一節-盒模型中講過，水平布局必須要滿足一個等式，不滿足即存在過渡約束，會做自動調整

而ul元素是塊元素，塊元素什么特點？獨占一行啊！

圖片寬度為 380px，瀏覽器寬度為 1920px（我本機中最大化瀏覽器的寬度）

現在的等式為0 + 0 + 0 + 380px + 0 + 0 + 0 = 1920px

這七個值中沒有auto的情況，所以瀏覽器會自動調整margin-right值以使等式滿足

0 + 0 + 0 + 380px + 0 + 0 + (1920-380)px = 1920px

所以如果使用auto屬性值，整個過程中圖片的width不會發生變化，展現出來的效果就依然是裁剪的樣式

Q：為什么100%可以呢？

A：我們知道100%是會按照父元素計算的，img的父元素是a，a的父元素是li，li的父元素是ul

也就是說，由於我們沒有給a和li單獨設置樣式，因此img最終會根據ul的寬度計算

而如果只調整圖片的寬或高，圖片是會保持原比例進行縮放的

所以這個時候就相當於給img設置了一個width=190px的屬性值

細節完善

背景色

通過顏色拾取器，識別背景色（我這里使用的是FastStone Capture中自帶的Screen Color Picker）

ul{
    ...
    /* 添加背景色 */
    background-color: #F4F4F4;
}

外邊距

根據布局剖析結果，我們給每個li元素添加一個 10px 的下邊距

ul > li {
  margin-bottom: 10px;
}
/* 
	但是上述寫法有些問題，最后一張圖片也有10px的外邊距，有可能會影響到頁面布局 
	所以我們可以指定最后一個沒有外邊距，可以使用之前講到的偽類選擇器
*/
ul > li:not(:last-child) {
  margin-bottom: 10px;
}

Q：為什么是給li元素添加呢？

A：我們在調整布局結構的時候，特別是設置外邊距，一般是設置塊元素的，而不建議去調整行內元素或行內塊元素

最終效果

核心代碼

<link rel="stylesheet" href="css/reset.css" />
<style>
  ul {
    /* 寬高 */
    width: 190px;
    height: 470px;
    /* 處理溢出部分，這塊不寫效果也是一樣的 */
    overflow: hidden;
    /* 設置背景色 */
    background-color: #f4f4f4;
  }

  ul > li:not(:last-child) {
    /* 設置下外邊距 */
    margin-bottom: 10px;
  }

  ul > li img {
    /* 設定圖片寬度 */
    width: 100%;
  }
</style>

<ul>
  <li>
    <a href="javascript:;"><img src="assets/1.jpg" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="assets/2.jpg" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="assets/3.jpg" /></a>
  </li>
</ul>

2. 京東左側導航條

開發准備

我們需要的就是這些文字，事先復制下來

家用電器 手機 / 運營商 / 數碼 電腦 / 辦公 家居 / 家具 / 家裝 / 廚具 男裝 / 女裝
/ 童裝 / 內衣 美妝 / 個護清潔 / 寵物 女鞋 / 箱包 / 鍾表 / 珠寶 男鞋 / 運動 /
戶外 房產 / 汽車 / 汽車用品 母嬰 / 玩具樂器 食品 / 酒類 / 生鮮 / 特產 藝術 /
禮品鮮花 / 農資綠植 醫葯保健 / 計生情趣 圖書 / 文娛 / 教育 / 電子書 機票 / 酒店
/ 旅游 / 生活 理財 / 眾籌 / 白條 / 保險 安裝 / 維修 / 清洗 / 二手 工業品

布局剖析

• 整體使用ul和li元素，寬高比=190px:470px，其中上下存在 10px 的內邊距（影響盒子大小）和 10px 的外邊距（影響盒子布局）

• li中每個元素也比較簡單，用a包裹文字，用span包裹斜杠
• 每個li元素的寬高比=190px:25px，其中左邊存在 18px 的內邊距（注意右邊是不存在的）

• a 元素沒有什么大的布局，span元素左右存在 2px 的內邊距

結構搭建

<ul>
  <li>
    <a href="javascript:;">家用電器</a>
  </li>
  <li>
    <a href="javascript:;">手機</a>
    <span>/</span>
    <a href="javascript:;">運營商</a>
    <span>/</span>
    <a href="javascript:;">數碼</a>
  </li>
  <li>
    <a href="javascript:;">電腦</a>
    <span>/</span>
    <a href="javascript:;">辦公</a>
  </li>
  <li>
    <a href="javascript:;">家居</a>
    <span>/</span>
    <a href="javascript:;">家具</a>
    <span>/</span>
    <a href="javascript:;">家裝</a>
    <span>/</span>
    <a href="javascript:;">廚具</a>
  </li>
  <li>
    <a href="javascript:;">男裝</a>
    <span>/</span>
    <a href="javascript:;">女裝</a>
    <span>/</span>
    <a href="javascript:;">童裝</a>
    <span>/</span>
    <a href="javascript:;">內衣</a>
  </li>
  <li>
    <a href="javascript:;">美妝</a>
    <span>/</span>
    <a href="javascript:;">個護清潔</a>
    <span>/</span>
    <a href="javascript:;">寵物</a>
  </li>
  <li>
    <a href="javascript:;">女鞋</a>
    <span>/</span>
    <a href="javascript:;">箱包</a>
    <span>/</span>
    <a href="javascript:;">鍾表</a>
    <span>/</span>
    <a href="javascript:;">珠寶</a>
  </li>
  <li>
    <a href="javascript:;">男鞋</a>
    <span>/</span>
    <a href="javascript:;">運動</a>
    <span>/</span>
    <a href="javascript:;">戶外</a>
  </li>
  <li>
    <a href="javascript:;">房產</a>
    <span>/</span>
    <a href="javascript:;">汽車</a>
    <span>/</span>
    <a href="javascript:;">汽車用品</a>
  </li>
  <li>
    <a href="javascript:;">母嬰</a>
    <span>/</span>
    <a href="javascript:;">玩具樂器</a>
  </li>
  <li>
    <a href="javascript:;">食品</a>
    <span>/</span>
    <a href="javascript:;">酒類</a>
    <span>/</span>
    <a href="javascript:;">生鮮</a>
    <span>/</span>
    <a href="javascript:;">特產</a>
  </li>
  <li>
    <a href="javascript:;">藝術</a>
    <span>/</span>
    <a href="javascript:;">禮品鮮花</a>
    <span>/</span>
    <a href="javascript:;">農資綠植</a>
  </li>
  <li>
    <a href="javascript:;">醫葯保健</a>
    <span>/</span>
    <a href="javascript:;">計生情趣</a>
  </li>
  <li>
    <a href="javascript:;">圖書</a>
    <span>/</span>
    <a href="javascript:;">文娛</a>
    <span>/</span>
    <a href="javascript:;">教育</a>
    <span>/</span>
    <a href="javascript:;">電子書</a>
  </li>
  <li>
    <a href="javascript:;">機票</a>
    <span>/</span>
    <a href="javascript:;">酒店</a>
    <span>/</span>
    <a href="javascript:;">旅游</a>
    <span>/</span>
    <a href="javascript:;">生活</a>
  </li>
  <li>
    <a href="javascript:;">理財</a>
    <span>/</span>
    <a href="javascript:;">眾籌</a>
    <span>/</span>
    <a href="javascript:;">白條</a>
    <span>/</span>
    <a href="javascript:;">保險</a>
  </li>
  <li>
    <a href="javascript:;">安裝</a>
    <span>/</span>
    <a href="javascript:;">維修</a>
    <span>/</span>
    <a href="javascript:;">清洗</a>
    <span>/</span>
    <a href="javascript:;">二手</a>
  </li>
  <li>
    <a href="javascript:;">工業品</a>
  </li>
</ul>

我們引入reset.css樣式來去除瀏覽器的默認樣式

<link rel="stylesheet" href="css/reset.css" />

到這里，基本的骨架就有了

Q：那有些人會問了，我們不是引入了reset.css重置了瀏覽器的默認樣式嗎？為什么超鏈接還有樣式？

A：其實，如果仔細看 reset.css 的源代碼，會發現a元素只是重置了一些基本的內外邊距、邊框和字體大小，並沒有做完全把a元素的樣式去除。這個下面會具體介紹

樣式添加

根據布局剖析，我們可以直接設置整體的樣式

body {
  /* 這里順便添加下背景色，通過顏色拾取器識別 */
  background-color: #f4f4f4;
}

ul {
  /* 寬高 */
  width: 190px;
  height: 450px;
  /* 內外邊距 */
  padding: 10px 0;
  margin: 10px auto;
  /* 處理溢出部分 */
  overflow: hidden;
  /* 這里順便添加下背景色，通過顏色拾取器識別 */
  background-color: #fefefe;
}

ul > li {
  /* 寬高，根據繼承關系可以不寫寬度 */
  height: 25px;
  /* 內外邊距，這里只有一個內邊距 */
  padding-left: 18px;
  /* 設置背景色：不是必須的，這里只是為了發現一些問題 */
  background-color: #bfa;
}

ul > li span {
  /* 內外邊距*/
  padding: 0 2px;
}

到這里整體樣式就添加完畢，但我們發現有點問題

別急！我們繼續進行細節上的樣式調整和優化

細節完善

要求效果

目前的效果

兩個主要問題

1. 要求效果文字居中顯示，而我們的文字偏左上角，底部有一定間距
2. 文字存在換行和重疊現象

我們一個一個處理

文字調整

只需要給li元素添加一行屬性

line-height: 25px;

文字雖然在一行上了，但是依然有重疊問題啊，需要怎么處理呢？

要知道文字有幾個屬性：

• 文字大小
• 文字顏色
• 文字樣式

我們通過 F12 看下這些屬性

廢話少說，直接寫代碼

font-size: 14px;
color: #333;

我們這里先不寫text-decoration屬性，看下效果

寫上text-decoration屬性，再看下效果

text-decoration: none;

這里可以看到文字下划線消失了，因為我們使用的a標簽包裹文字，而超鏈接具有一定的文字樣式（就是藍色字體帶下划線），所以text-decoration屬性就是調整文字樣式的

到這里，我們的重疊問題還是沒有解決

穩住，我們能贏！ 我們再對比下要求的效果和我們現在的效果

看出來區別了嗎？（當然重點不是我們的背景色，這無關緊要）

我們是把/符號用span包裹起來的，但是我們的/符號似乎又大又粗

符號調整

廢話少說，上代碼

ul > li span {
  padding: 0 2px;
  /* 調整符號字體大小 */
  font-size: 12px;
}

不過到這里，還是存在問題，我把span元素的內邊距去除才可以 （這里我沒搞清楚為什么，知道的小伙伴可以評論或私信我哦；不過對比各個元素的盒子模型沒什么區別，而且字體樣式我也調整了；而且總感覺/符號之間間隙大了一點，這里存疑先不管了，我們繼續往下）

懸浮樣式

我們注意到，當鼠標懸浮在某一行時，其背景顏色會有變化；同時，懸浮在某一個超鏈接上時，字體顏色變紅

這里要用到一個偽類選擇器:hover，我們還是直接上代碼

ul > li {
  height: 25px;
  padding-left: 18px;
  /* background-color: #bfa; 同時注釋掉之前的一個輔助我們查看問題的背景色 */
  line-height: 25px;
}
/* 懸浮在某一行時，其背景顏色會有變化 */
ul > li:hover {
  background-color: #d9d9d9;
}
/* 懸浮在某一個超鏈接上時，字體顏色變紅 */
ul > li a:hover {
  color: #c81724;
}

至此，我們的京東左側導航欄的前端樣式就基本完成了

最終效果

核心代碼

<link rel="stylesheet" href="css/reset.css" />
<style>
  body {
    /* body背景色，通過顏色拾取器識別 */
    background-color: #f4f4f4;
  }

  ul {
    /* 整體寬高 */
    width: 190px;
    height: 450px;
    /* 整體內外邊距 */
    padding: 10px 0;
    margin: 10px auto;
    /* 處理溢出部分 */
    overflow: hidden;
    /* 整體背景色，通過顏色拾取器識別 */
    background-color: #fefefe;
  }

  ul > li {
    /* 每行寬高 */
    height: 25px;
    padding-left: 18px;
    /* 每行行高 */
    line-height: 25px;
  }

  ul > li:hover {
    /* 懸浮背景色 */
    background-color: #d9d9d9;
  }

  ul > li a {
    /* 字體大小、顏色、樣式 */
    font-size: 14px;
    color: #333;
    text-decoration: none;
  }

  ul > li a:hover {
    /* 懸浮字體顏色 */
    color: #c81724;
  }

  ul > li span {
    /* 內邊距，應該是有的，但是有點問題 */
    /* padding: 0 2px; */
    font-size: 12px;
  }
</style>

存疑問題

通過一番折騰和研究，終於發現問題的關鍵所在

因為在編寫 HTML 代碼時，每個li元素中的a的span標簽都是換行的

而 HTML 中會將多個空格合並成一個，所以a的span之間都多了一個空格

有幾種解決這個問題的方式

• 一是調整 HTML 中每個li元素中的代碼，使之在一行上

• 二是給 ul 元素或 li 元素設置一個font-size: 0的屬性值

• 三是通過 js 去除多余的換行字符（目前還沒有學習到，所以不用這種方式，而且較麻煩）

我這里采用第二種方式

ul > li {
  height: 25px;
  padding-left: 18px;
  line-height: 25px;
  /* 設置font-size */
  font-size: 0;
}

ul > li span {
  /* 設置內邊距 */
  padding: 0 2px;
  font-size: 12px;
}

到這里，我們往往會忍不住贊嘆一下自己：Nice !

3. 網易新聞列表

有了上面的實戰步驟，對於網易新聞列表，我們就不進行那么詳細的剖析了，直接上代碼

結構搭建

<div class="news_money">
  <div class="news_title">
    <h2 class="title"><a href="#">財經</a></h2>
  </div>
  <div class="news_img">
    <a href="#">
      <img
        width="300"
        height="150"
        alt="樓市＂加息潮＂來了?"
        src="assets/news.png"
      />
      <div class="bg">
        <h3>樓市"加息潮"來了?</h3>
      </div>
    </a>
  </div>
  <ul class="news_list">
    <li>
      <a href="#">太瘋狂！1000萬芯片投資 "換來"7個漲停</a>
    </li>
    <li>
      <a href="#">重磅定調！打擊比特幣挖礦和交易行為</a>
    </li>
    <li>
      <a href="#">拜登願將基建規模砍去6000億美元</a>
    </li>
    <li>
      <a href="#">呷哺呷哺高管大換血 經營模式要變？</a>
    </li>
  </ul>
</div>

樣式添加

/* ====================整體==================== */
.news_money {
  /* 整體布局 */
  width: 300px;
  height: 324px;
  margin: 35px auto;
}

a {
  /* 去除超鏈接樣式 */
  text-decoration: none;
}

/* ====================標題==================== */
.news_title {
  height: 40px;
  border-top: 1px #ddeedd solid;
}

.news_title .title {
  /* 標題整體布局 */
  width: 32px;
  height: 24px;
  line-height: 24px;
  padding-top: 6px;
  border-top: 1px #f34540 solid;
  margin-top: -1px;
}

.news_title a {
  /* 標題字體樣式 */
  font-size: 16px;
  font-weight: bold;
  color: #404040;
}

.news_title a:hover {
  /* 標題懸浮樣式 */
  color: red;
}

/* ====================圖片==================== */
.new_img {
  height: 150px;
}

.news_img:hover {
  /* 
    	圖片懸浮樣式
    	這部分知識還沒有學習到，所以只是做了一個簡單的放大效果
    	但現在的效果其實是不對的，標題文字也被放大了
    */
  transform: scale(2);
}

/* 圖片標題 */
.news_img .img_title {
  /* 圖片標題整體布局 */
  height: 40px;
  line-height: 40px;
  margin-top: -40px;
  padding-left: 30px;
}

.news_img a {
  /* 圖片標題字體樣式 */
  color: #fff;
  font-weight: bold;
}

/* ====================新聞列表==================== */
.news_list {
  height: 120px;
  margin-top: 12px;
}

.news_list li {
  /* 新聞列表整體布局 */
  width: 285px;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
}

.news_list a {
  /* 新聞列表字體樣式 */
  font-size: 14px;
  color: #666;
}

.news_list a:hover {
  /* 新聞列表懸浮樣式 */
  color: red;
}