整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          技術(shù)貼:一篇文章看懂鏈接(超鏈接)設(shè)計(jì)

          人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】,BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營。

          產(chǎn)品設(shè)計(jì)時(shí)細(xì)節(jié)是產(chǎn)品經(jīng)理最頭疼的問題,一個(gè)button,一個(gè)鏈接都要考慮太多的細(xì)節(jié)問題。作者整理了常見的一些功能設(shè)計(jì)問題,一篇文章看懂這些功能設(shè)計(jì)。來學(xué)習(xí)吧。

          定義

          鏈接也稱為超鏈接,所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超鏈接的對象,可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上,并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。

          樣式

          鏈接可以是一個(gè)字或是一段字這樣的文本,也可以是一個(gè)按鈕,一張圖片,當(dāng)你點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)目標(biāo),當(dāng)你把鼠標(biāo)指針移到某個(gè)鏈接時(shí)會(huì)變成一個(gè)小手,當(dāng)然在手機(jī)上沒有這一特點(diǎn)。

          1. 文本樣式的鏈接

          文本樣式的鏈接一般在搜索引擎的網(wǎng)站呈現(xiàn)藍(lán)色字樣,大多會(huì)在下面加上下劃線以便識(shí)別,不過現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗(yàn),逐漸取消了下劃線。而在一些別的網(wǎng)站考慮到界面設(shè)計(jì)風(fēng)格各方面的因素而不用藍(lán)色。

          谷歌的文本鏈接是藍(lán)色,沒有下劃線

          百度的文本鏈接也是藍(lán)色,關(guān)鍵詞是紅色,有下劃線

          而京東的文本鏈接有灰色,有白色,有黑色

          2. 按鈕樣式的鏈接

          按鈕樣式的鏈接比文本樣式的更容易識(shí)別,每一個(gè)按鈕都是一樣鏈接。

          按鈕樣式鏈接

          3. 圖片樣式的鏈接

          圖片樣式的鏈接可以是單獨(dú)的一張圖片,也可以是文字與按鈕一起組成一張圖片,只是鼠標(biāo)指針掃過圖片的任何一個(gè)部位都會(huì)變成小手。

          如桌面彈出這種游戲小窗口的圖片式鏈接

          由文字/圖/按鈕樣式一起構(gòu)成的一張圖片式按鈕,鼠標(biāo)可以點(diǎn)擊圖中任何一部位

          打開方式

          鏈接打開的方式有三種:第一種是在當(dāng)前頁面刷新跳轉(zhuǎn),國外的網(wǎng)站大多是這樣的打開式;第二種是在新標(biāo)簽頁面打開鏈接,國內(nèi)大多采用這種;第三種是提示用APP打開。當(dāng)然現(xiàn)在出現(xiàn)了一種新的打開方式,那就是二維碼掃描。

          提示用美拍APP打開

          類型

          按照連接路徑的不同,網(wǎng)頁中超鏈接一般分為以下3種類型:內(nèi)部鏈接,錨點(diǎn)鏈接和外部鏈接。

          鏈接還可以分為動(dòng)態(tài)鏈接和靜態(tài)鏈接。動(dòng)態(tài)超鏈接指的是可以通過改變HTML代碼來實(shí)現(xiàn)動(dòng)態(tài)變化的鏈接,例如我們可以實(shí)現(xiàn)將鼠標(biāo)移動(dòng)到某個(gè)文字鏈接上,文字就會(huì)象動(dòng)畫一樣動(dòng)起來或改變顏色的效果,也可以實(shí)現(xiàn)鼠標(biāo)移到圖片上圖片就產(chǎn)生反色或朦朧等等的效果。而靜態(tài)鏈接,顧名思義,就是沒有動(dòng)態(tài)效果的鏈接。

          1. 內(nèi)部鏈接

          與外部鏈接(即反向鏈接)相反,內(nèi)部鏈接是指同一網(wǎng)站域名下的內(nèi)容頁面之間互相鏈接。如頻道、欄目、終極內(nèi)容頁之間的鏈接,乃至站內(nèi)關(guān)鍵詞之間的Tag鏈接都可以歸類為內(nèi)部鏈接,因此內(nèi)部鏈接我們也可以稱之為站內(nèi)鏈接,對內(nèi)部鏈接的優(yōu)化其實(shí)就是對網(wǎng)站的站內(nèi)鏈接的優(yōu)化。

          2. 錨點(diǎn)鏈接

          HTML中的鏈接,正確的說法應(yīng)該稱作"錨點(diǎn)",它命名錨點(diǎn)鏈接(也叫書簽鏈接)常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁,通過點(diǎn)擊命名錨點(diǎn),不僅讓我們能指向文檔,還能指向頁面里的特定段落,更能當(dāng)作"精準(zhǔn)鏈接"的便利工具,讓鏈接對象接近焦點(diǎn)。便于瀏覽者查看網(wǎng)頁內(nèi)容。類似于我們閱讀書籍時(shí)的目錄頁碼或章回提示。在需要指定到頁面的特定部分時(shí),標(biāo)記錨點(diǎn)是最佳的方法。

          3. 外部鏈接

          外部鏈接,又常被稱為:“反向鏈接”或“導(dǎo)入鏈接”,是指通過其他網(wǎng)站鏈接到你的網(wǎng)站的鏈接。

          外部鏈接指的是針對搜索引擎,與其它站點(diǎn)所做的友情鏈接。高質(zhì)量的外部鏈接指:和你的網(wǎng)站建立鏈接的網(wǎng)站知名度高,訪問量大,同時(shí)相對的外部鏈接較少,有助于快速提升你的網(wǎng)站知名度和排名的其他網(wǎng)站的友情鏈接。

          如果按照使用對象的不同,網(wǎng)頁中的鏈接又可以分為:文本超鏈接,圖像超鏈接,E-mail鏈接,錨點(diǎn)鏈接,多媒體文件鏈接,空鏈接等。

          鏈接是一種對象,它以特殊編碼的文本或圖形的形式來實(shí)現(xiàn)鏈接,如果單擊該鏈接,則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個(gè)位置,或打開一個(gè)新的網(wǎng)頁,或打開某一個(gè)新的WWW網(wǎng)站中的網(wǎng)頁。

          鏈接狀態(tài)

          鏈接在交互上一般會(huì)呈現(xiàn)4種狀態(tài),即默認(rèn)狀態(tài)/懸停時(shí)狀態(tài)/點(diǎn)擊時(shí)狀態(tài)/點(diǎn)擊后狀態(tài)。比如谷哥網(wǎng)站的交互體驗(yàn)。如下圖:

          點(diǎn)擊前

          懸停時(shí),下面浮現(xiàn)半透明線條

          點(diǎn)擊時(shí),有波紋暈開的動(dòng)態(tài)效果

          點(diǎn)擊后,下面線條粗

          有時(shí)候是3種狀態(tài),比如百度網(wǎng)和知乎應(yīng)用:

          默認(rèn)狀態(tài)

          點(diǎn)擊時(shí)鏈接變紅

          點(diǎn)擊后鏈接變成紫色

          IOS系統(tǒng)知乎應(yīng)用的3種狀態(tài),而在Android系統(tǒng)沒有用力點(diǎn)擊這一狀態(tài)。

          默認(rèn)狀態(tài)

          點(diǎn)擊狀態(tài)

          用力點(diǎn)擊會(huì)彈出預(yù)覽小窗口

          有些時(shí)候只有2種狀態(tài),如下圖谷歌網(wǎng):

          默認(rèn)和點(diǎn)擊后狀態(tài)一樣

          鼠標(biāo)懸停時(shí)出現(xiàn)下劃線

          默認(rèn)狀態(tài)

          點(diǎn)擊時(shí)

          而有時(shí)候比如在APP里有時(shí)候就一直只有一種狀態(tài),也可以稱靜態(tài)鏈接,之前的可以稱之為動(dòng)態(tài)鏈接。在不同的使用場景會(huì)因?yàn)楫?dāng)時(shí)的情況選擇最合適的交互體驗(yàn)設(shè)計(jì)。有的情況下還會(huì)加上點(diǎn)擊的音效,使用戶體驗(yàn)更暢快,這在移動(dòng)端用的使用情況多一些。

          總之鏈接是網(wǎng)頁不可缺少的構(gòu)成部分,每一個(gè)鏈接的呈現(xiàn)都是經(jīng)過深思熟慮的。

          作者:潘瑤瓊(簡書作者)

          本文由 @潘瑤瓊 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

          顏色設(shè)置的簡便方法

          昨天我們在《使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作》(目錄在結(jié)尾)中學(xué)習(xí)了設(shè)置單元格以及其中內(nèi)容的空間間距和背景顏色。

          其中添加列向單元格背景顏色只需要修改對應(yīng)的<tr>標(biāo)簽中的style屬性,而修改行向標(biāo)簽需要修改不同<tr></tr>標(biāo)簽中的<td>標(biāo)簽的style屬性,這樣操作起來就非常的麻煩,那有沒有簡便的修改行向單元格背景顏色的方法呢?

          當(dāng)然有!

          開發(fā)團(tuán)隊(duì)給出了<colgroup><col></col></colgroup>這樣的組合來解決這個(gè)問題,下面讓我們詳細(xì)學(xué)習(xí)。

          <colgroup></colgroup>標(biāo)簽是一個(gè)給行向單元格打組的標(biāo)簽,在頁面中不會(huì)顯示。

          <col></col>標(biāo)簽是來具體設(shè)置行向單元格數(shù)量和顏色的標(biāo)簽。

          示例代碼如下:

          <colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

          這段代碼添加到"第一個(gè)頁面.html"當(dāng)中就可以,具體代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個(gè)網(wǎng)頁</title>
            </head> 
            <body>
            <h1>第一個(gè)網(wǎng)頁</h1><hr>
            <h2>表格元素</h2><hr>
            <table border="1" width="100%">
            <thead>
            <tr>
            <td colspan="2">表格的頭部信息</td>
            </tr>
            </thead>
            <tfoot>
            <tr>
            <td colspan="2">表格的腳部信息</td>
            <tr>
            </tfoot>
            <tbody>
            <caption>表格標(biāo)題</caption>
            <colgroup>
            <col span = "1" style="background-color:#ff0000;"></col>
            </colgroup>
            <tr>
            <th>姓名</th>
            <th>年齡</th>
            </tr>
            <tr>
            <td>一列一行</td>
            <td>一列二行</td>
            </tr>
            <tr>
            <td>二列一行</td>
            <td>二列二行</td>
            </tr>
            </tbody>
            </table>
            </body> 
            </html>

          頁面效果如圖:

          因?yàn)榈谝涣泻妥詈笠涣兄挥幸恍兴裕捕甲兗t了。

          其中span的數(shù)量代表行數(shù)。

          如果把span等號后面的數(shù)改成2,因?yàn)楸砀裰挥袃尚校哉麄€(gè)表格都紅了。

          表格嵌套

          我們可以通過向表格中添加表格實(shí)現(xiàn)表格嵌套。表格嵌套可以把一個(gè)單元格分成行向或列向分割單元格。

          代碼示例如下:我們把"一列一行"分割成列向兩個(gè)單元格。

          <tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

          使用

          <table border = "1" width="100%">
          
          <tr>
          
          <td>1</td>
          
          <td>2</td>
          
          </tr>
          
          </table>

          這段代碼替換文字"一列一行"即可。

          頁面效果如圖所示:

          留個(gè)思考題,大家可以思考一下行向分割單元格怎么寫。

          今天的內(nèi)容結(jié)束了。

          全部示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個(gè)網(wǎng)頁</title>
            </head> 
            <body>
            <h1>第一個(gè)網(wǎng)頁</h1><hr>
            <h2>表格元素</h2><hr>
            <table border="1" width="100%">
            <thead>
            <tr>
            <td colspan="2">表格的頭部信息</td>
            </tr>
            </thead>
            <tfoot>
            <tr>
            <td colspan="2">表格的腳部信息</td>
            <tr>
            </tfoot>
            <tbody>
            <caption>表格標(biāo)題</caption>
            <colgroup>
            <col span = "1" style="background-color:#ff0000;"></col>
            </colgroup>
            <tr>
            <th>姓名</th>
            <th>年齡</th>
            </tr>
            <tr>
            <td>
            <table border = "1" width="100%">
            <tr>
            <td>1</td>
            <td>2</td>
            </tr>
            </table>
            </td>
            <td>一列二行</td>
            </tr>
            <tr>
            <td>二列一行</td>
            <td>二列二行</td>
            </tr>
            </tbody>
            </table>
            </body> 
            </html>

          喜歡的小伙伴請關(guān)注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯(cuò)誤歡迎大家斧正,不勝感激!

          學(xué)到這里,相信大家已經(jīng)有獨(dú)立讀懂HTML代碼說明的能力了,明天我會(huì)為大家講解16進(jìn)制顏色表示方法。之后會(huì)給大家推薦html代碼參考手冊的鏈接。如果您是零基礎(chǔ)的話,學(xué)完16進(jìn)制顏色表示方法后,基本上就可以無障礙的閱讀html代碼參考手冊了,如果閱讀起來還是有困難,請繼續(xù)看后面我為大家講解一些常用元素及屬性的文章,已及html中特殊符號的輸入方法,全部做完后再結(jié)束這套教程。

          如果您有任何疑問或不解歡迎關(guān)注并私信我。

          HTML完整學(xué)習(xí)目錄

          HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          先要安裝css的loader

          npm install css-loader style-loader --save-dev

          然后在webpack.config.js中配置如下代碼

          意思是先用css-loader加載css文件,再用style-loader添加在頁面中

          在app目錄下創(chuàng)建component.css文件

          body{
           background-color: red;
          }

          在app/index.js中引入css文件

          運(yùn)行npm run start命令。

          可以看到我們?yōu)g覽器整個(gè)背景都變成了紅色。

          webpack做了什么呢?

          看到build/app.js中有如下代碼。

          再看下我們生產(chǎn)的index.html文件

          奇怪了,并沒有內(nèi)斂樣式也沒有引入的css文件,那瀏覽器是為什么變紅的呢?

          我們在瀏覽器中打開調(diào)試工具。

          原來樣式在這!

          webpack動(dòng)態(tài)的添加了內(nèi)斂樣式在代碼中。

          如果多人協(xié)作開發(fā)的情況下,會(huì)有很大可能出現(xiàn)代碼命名重復(fù)的情況,如果出現(xiàn)這種情況怎么辦呢?

          來讓我們試驗(yàn)一下。

          在app目錄下添加兩個(gè)css文件,style1.css

          body{
           background-color: red;
          }.class1{
          color: green;
          }

          和style2.css

          body{
           background-color: black;
          }.class1{
           color: blue;
          }

          在index.js中引入這兩個(gè)文件

          修改component.js文件,使其給元素添加傳入的類名

          在webpack.config.js中添加如下配置

          我們執(zhí)行npm run start 命令若看到

          即為打包成功。

          打開瀏覽器http://localhost:8080/

          可以看到同樣的類名都正常顯示出來了,看下右邊的文檔結(jié)構(gòu),發(fā)現(xiàn)我們的類名不是class1了。

          原來CSS Modules對我們的類名做了哈希處理,我們再也不用擔(dān)心同事跟我們有相同的命名了。

          是不是很方便呢?

          讓我們再來面對另一個(gè)問題,現(xiàn)在這種情況下css是js動(dòng)態(tài)添加上去的,如果當(dāng)js文件有一個(gè)長時(shí)間的阻塞事件,頁面將會(huì)處于長時(shí)間的無樣式的狀態(tài)。

          這是我們不希望看到的,怎么把css文件和js文件分離呢?

          首先我們需要安裝一個(gè)插件

          npm install extract-text-webpack-plugin --save-dev

          安裝成功之后在webpack.config.js中添加如下配置

          完成之后運(yùn)行一下npm run start

          打開瀏覽器http://localhost:8080/

          可以看到我們兩個(gè)css文件合并為一個(gè)app.css文件并以外部樣式表的形式加載。

          而且css文件比js文件要先請求,這樣就避免頁面會(huì)出現(xiàn)FOUC-Flas Of Unstyle Content無樣式內(nèi)容閃爍。

          webpack關(guān)于css的加載就講到這里。


          主站蜘蛛池模板: 无码人妻一区二区三区免费手机| 中文字幕在线一区二区三区| 亚洲熟女一区二区三区| 色噜噜一区二区三区| 国偷自产Av一区二区三区吞精| 中文字幕在线观看一区二区三区| 国产福利视频一区二区| 亚洲av无码一区二区三区观看 | 日本一区二区在线播放| 五十路熟女人妻一区二区| 人妻无码一区二区三区四区| 中文字幕一区二区三区乱码| 国产一区二区久久久| 亚洲人成网站18禁止一区| 亚洲AV无码一区二区一二区| 亚洲国产精品一区二区三区久久| AV无码精品一区二区三区宅噜噜| 亚洲综合一区二区| 消息称老熟妇乱视频一区二区| 色屁屁一区二区三区视频国产| 日本不卡一区二区三区| 国产精品盗摄一区二区在线| 日韩人妻精品一区二区三区视频 | 亚洲AV日韩综合一区尤物| 色欲精品国产一区二区三区AV| 国产美女口爆吞精一区二区| 国产在线精品一区二区在线看| 91在线一区二区三区| 性色av一区二区三区夜夜嗨| 国产免费一区二区三区不卡| 精品国产一区二区三区久久| 中文字幕一区二区三区四区| 好吊视频一区二区三区| 一区二区三区午夜| 久久毛片免费看一区二区三区 | 国产日韩视频一区| 午夜福利国产一区二区| 一区二区高清视频在线观看| 亚洲性日韩精品国产一区二区| 一区二区三区AV高清免费波多| 国产成人高清精品一区二区三区|