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