整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
過簡單的新聞列表demo制作，復習學到的布局、CSS樣式，還原設計圖，利用demo鞏固學到的知識點，以demo串聯各種HTML與CSS屬性。
面上大多數的熱點地圖，都是以 JavaScript 來做的，但是使用 CSS3 制作的熱點地圖倒還真的挺少見的。
其實 CSS3 的功能也很強大，能幫助我們實現很多用 JavaScript 實現的效果，最近小編剛學會 HTML5 和 簡單的 CSS3，在這里用 CSS3 實現了熱點地圖動畫，效果如下：
CSS3 實現熱點地圖動畫
下面給大家初步講講，如何用 CSS3 制作一個熱點地圖，你可以學到 HTML 的布局、HTML 列表、CSS 選擇器、CSS3 動畫、CSS3 的 2D 轉換等，對于練習 HTML、CSS 也有很好的幫助。
相關代碼下載命令：
點擊文末閱讀原文，獲取完整代碼。
首先我們來創建如下目錄結構：
在 img 目錄下獲取地圖圖片，打開終端，執行以下命令：
$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png在 index.html 文件中寫入如下代碼：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>熱點地圖</title> <!-- 引入CSS --> <link rel="stylesheet" href="./index.css" /> </head> <body> <!-- 地圖 --> <div class="china-map"></div> </body></html>為了讓我們的城市能夠顯示在地圖上，在這里我選擇使用 CSS 相對定位與絕對定位的方式。
在 index.css 文件中寫入如下代碼：
/* CSS 通配符 * 號，表示所有的元素一開始默認的內外邊距為 0 */* { margin: 0; padding: 0;}body { /* 背景色 */ background: #31363a;}.china-map { /* 給地圖加上相對定位 */ position: relative; /* 給地圖設置寬高 */ width: 747px; height: 617px; /* 設置背景圖片，指定為不重復，并且居中 */ background: url("./map_black_bg.png") no-repeat center; /* 將地圖設置為離頂部60px，左右居中 */ margin: 60px auto 0;}執行如下步驟預覽效果：
這下我們的地圖就顯示出來了。
地圖成功顯示后，我們需要在上面設置地點以及地點的樣式。
在 index.html 中加入以下代碼：
<div class="china-map"> <!-- 地點區域 --> <div class="region"> <!-- 地點顯示的小圓點 --> <div class="dot"></div> <!-- 向外擴散的圓圈 --> <div class="place"></div> <!-- 地名 --> <div class="txt">青海</div> </div></div>在 index.css 中加入以下代碼：
* { margin: 0; padding: 0;}body { background: #31363a;}/* 地圖 */.china-map { position: relative; width: 747px; height: 617px; background: url("./map_black_bg.png") no-repeat center; margin: 60px auto 0;}/* 區域地點 */.region { /* 絕對定位 */ position: absolute;}/* 小圓點 */.region .dot { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; background: #a2a9b4; opacity: 1; border-radius: 50%;}/* 向外擴散的圓圈 */.region .place { position: absolute; top: 50%; left: 50%; margin: -33px 0 0 -33px; width: 66px; height: 66px; border: 2px solid #b7b7b7; border-radius: 50%; /* 透明度 */ opacity: 0.12; /* 陰影 */ box-shadow: 0 0 4px #82878f inset;}/* 地名 */.region .txt { position: absolute; top: -20px; left: 10px; font-size: 14px; color: #ccc; width: 50px;}預覽效果：
如何將這個地點放置在相應位置上呢？這個時候就要使用 left 屬性和 top 屬性了，通過計算正確的偏移值，將地點放置在合適的位置上。
修改 .region 的樣式：
.region { position: absolute; top: 302px; left: 308px;}預覽效果：
青海就已經顯示在正確的地方上了。但是我們轉念一想，如果我們還有一個城市，比如北京，這個時候是不是該這樣：
.region2 { position: absolute; top: 229px; left: 559px;}不過如此一來，每當創建一個城市，就要新寫一個 CSS 類，并且每一個類中都會有同樣的代碼 position:absolute，如果大篇幅的重復會增加代碼的冗余度。所以這個時候，我們可以專門新建一個類來放置每一個城市的偏移值，修改 index.css 文件，增加如下代碼：
.region { position: absolute;}/* 青海 */.region-qh { top: 302px; left: 308px;}/* 北京 */.region-bj { top: 229px; left: 559px;}修改 index.html：
<div class="china-map"> <!-- 青海 --> <div class="region region-qh"> <div class="dot"></div> <div class="place"></div> <div class="txt">青海</div> </div> <!-- 北京 --> <div class="region region-bj"> <div class="dot"></div> <div class="place"></div> <div class="txt">北京</div> </div></div>預覽效果：
同樣的道理，如果我們想設置不同地點有不同顏色的顯示，我們可以專門新建一個顏色類：
修改 index.html：
<!-- 北京 --><div class="region region-bj blue"> <div class="dot"></div> <div class="place"></div> <div class="txt">北京</div></div>在 index.css 中加入以下代碼：
/* 顏色*/.region.blue .place { width: 120px; height: 120px; margin: -64px 0 0 -64px; border: 1px solid #009fd9; box-shadow: 0 0 12px #009fd9 inset;}.region.blue .dot { background: #0080d9;}預覽效果：
如此一來，如果我們想給一些地點加上樣式，只需要為它加上像 .blue 這樣的顏色類就好了。現在我們將其他的地點以及樣式增加上去。
小編學習的這個《CSS3 實現熱點地圖動畫》課程，目前正在限時免費中，感興趣的小伙伴趕緊點擊了解更多，進行學習吧！
說不定做出來的地圖比小編的更好看~
點擊了解更多，學習完整課程內容～
篇介紹了html 中文本格式及段落等標簽，今天說下列表，什么是列表？它就是一種數據排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：
無序列表在每行開始位置顯示一個符號，語法如下：
<html>
<body>
<h4>一個無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>顯示效果：
無序列表的符號可以通過在ul 標簽上設置 type 屬性顯示不同的符號，比如：
1、disc —— 實心圓點 (默認類型)
2、circle —— 空心圓圈
3、square —— 實心方塊
實例代碼：
<html>
<body>
<h4>一個無序列表：</h4>
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>顯示效果：
有序列表使用數字或字母符號排列，表示文本按一定順序顯示，語法如下：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>效果如下：
同無序列表一樣，在ol上通過type 屬性設置使用那種符號表示順序，有以下幾種：
1、1，表示數字 1、2、3..... （默認數字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....
顯示效果如下：
html代碼：
<!DOCTYPE html>
<html>
<body>
數字
<ol type="1">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫字母
<ol type="a">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫字母
<ol type="A">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>有序列表還可以通過start 屬性設置起始數組，如下：
<ol start="3">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>顯示效果：
不同以上2種列表，定義列表主要用來解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細地解釋文字，語法如下：
<html>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
顯示效果：
第一行<dt>是要解釋的名詞，第二行標簽<dd>是解釋文本，會自動縮進。
以上三種列表是可以嵌套使用的，看如下示例：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果：
每嵌套一層，它的符號是不一樣的，你可以試試再嵌套一層看看效果。
當然，不同列表類型也可互相嵌套，根據顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ol>
<li>中國茶</li>
<li>非洲茶</li>
</ol>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果如下：
列表是網頁制作中經常會使用的標簽，比如在制作網頁導航欄菜單時會經常用到ul列表，以后會講如何通過ul標簽制作一個下拉菜單，感謝您閱讀及關注，祝你學習愉快。
上篇：前端入門——html 文字格式、標題與段落
下篇：前端入門——html 超鏈接
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
