整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
這里我用的是vue框架和element ui組件庫(kù)寫的。主要就是一個(gè)點(diǎn)擊事件和一個(gè)for循環(huán)。
HTML
<div id="app">
<!-- 導(dǎo)航欄 -->
<div id="nav">
<router-link
@click.native="dianji(index)"
:class="{ clk: index == dynamic }"
v-for="(item, index) in navArr"
:key="index"
:to="item.path">
{{ item.content }}
</router-link>
</div>
<router-view />
</div>
@click.native和@click差不多，但是router-link會(huì)阻止click事件，所有加一個(gè)native就可以了。
JS
<script>
export default {
name: "app",
data() {
return {
// 導(dǎo)航按鈕數(shù)組
navArr: [
{ path: "/one", content: "第一個(gè)按鈕" },
{ path: "/two", content: "第二個(gè)按鈕" },
{ path: "/three", content: "第三個(gè)按鈕" },
{ path: "/four", content: "第四個(gè)按鈕" },
],
dynamic:0, //默認(rèn)第一個(gè)
};
},
methods: {
// 點(diǎn)擊切換導(dǎo)航欄背景色
dianji: function (index) {
this.dynamic = index;
},
},
};
</script>
css這里我就不寫了，就幾行代碼。
沒(méi)了，結(jié)束了，是不是很簡(jiǎn)單吶，如有問(wèn)題，歡迎留言。
如果此篇博文對(duì)您有幫助，還請(qǐng)動(dòng)動(dòng)小手點(diǎn)贊 收藏 ?留言 吶~，謝謝 ~ ~
、跳出新頁(yè)面：
<basetarget=”_blank”>target="_self"不跳轉(zhuǎn)
<form action="xxx.htm" target="_blank">form表單提交的跳轉(zhuǎn)設(shè)置
2、點(diǎn)擊按鈕跳出別的頁(yè)面添加
<a href="#" onclick="openZoosUrl();return false;">
onclick="return false"
3、display:block;塊級(jí)元素，也就是說(shuō)它可以設(shè)置一些寬高，獨(dú)占一行，比如，div元素，p元素等display:inline-block,行級(jí)元素，也就說(shuō)它可以使得同樣設(shè)置成行級(jí)元素的元素一起在一行，然后可以設(shè)置寬高，這個(gè)適應(yīng)于制作一個(gè)導(dǎo)航菜單，將每個(gè)菜單項(xiàng)設(shè)置成行級(jí)元素。它的寬和高默認(rèn)是內(nèi)容的寬和高,典型的元素是表單類的元素。dispaly:inline.行級(jí)元素，不可設(shè)置寬和高，默認(rèn)寬高是內(nèi)容的寬和高，典型的比如，span,
4、html鼠標(biāo)小手：
cursor:pointer;
5、html背景圖屬性：
background-size:100%;，但是你的圖片寬度，高度要設(shè)置成100% ，要注意的是.php的文件里面這個(gè)background-image:url();不好用，失效，你要使用網(wǎng)站的絕對(duì)路徑background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url("11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;
這個(gè)是給頁(yè)面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.
還有在設(shè)置背景圖片的時(shí)候可以使用背景background-image:url("");這個(gè)屬性來(lái)設(shè)置背景，但是圖片要用gif的格式
6、按輸出方式來(lái)顯示文本格式:<pre></pre>橫線:<hr /><q></q>雙引號(hào)標(biāo)簽下劃線<ins></ins>
7、html---position/relative/absolute/fixed/三種布局定位方式的總結(jié)relative是按照自身來(lái)說(shuō)，absolute是按照瀏覽器來(lái)說(shuō)，但是要注意的是，如果他有父級(jí)元素的話，那么他就是依照父級(jí)元素來(lái)進(jìn)行改變位置的。
8、無(wú)序列表去掉前面黑點(diǎn)li{list-style:none;}
9、隱藏元素 - display:none或visibility:hidden
display-這個(gè)元素，設(shè)置之后原本的元素不會(huì)占用當(dāng)前的空間，不會(huì)影響布局，但是后者，隱藏之后還會(huì)占用空間
10、HTML隱藏多余
Div{overflow:hidden}
10、隱藏自適應(yīng)：overflow:auto;
11、關(guān)于框架的問(wèn)題
這個(gè)是接受你要顯示頁(yè)面
indx.php是框架顯示的頁(yè)面，最上面，也就是沒(méi)按鍵顯示
<iframe src="index.php" style="width:100%;height:100%;border:none " name="main"></iframe>
這個(gè)是你點(diǎn)擊之后想在哪顯示后面加：target=""
<a href='../admin/shopclass/add.php' target="main">添加分類</a>
12、關(guān)于背景的高的問(wèn)題，也就是說(shuō)你定義了一個(gè)div但是沒(méi)有搞，是為了讓你的圖片在上面。那么就有這個(gè)屬性了
overflow:hidden;
也就是你本身是屬于父級(jí)元素的，但是你float就脫離了文本，變成浮動(dòng)的，所有就不會(huì)在用父子元素的空間，所以就父級(jí)加上這個(gè)overflow:hidden;
13、錨點(diǎn)的設(shè)置
在你想跳轉(zhuǎn)的頁(yè)面的地方加上：<a name="miao">
然后在你想加鏈接的地方加上<a href="#miao">去找錨點(diǎn)</a>
14.點(diǎn)擊換驗(yàn)證碼圖片
<img src="../public/common/yzm.php" alt="" style="cursor:pointer" onclick="this.src='../public/common/yzm.php?rand='+Math.random()">
15、圓角
border-radius:5px;
16、textarea的左側(cè)文字在最左邊
style="vertical-align:top"
17、html塊狀元素和內(nèi)聯(lián)元素的總結(jié)，塊狀元素可以設(shè)置margin，但是使用margin的時(shí)候要符合：1.塊狀元素，2.有寬高，其中內(nèi)聯(lián)元素不能設(shè)置margin和寬高的屬性，只能設(shè)置padding
TML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。
幾乎可以在所有的網(wǎng)頁(yè)中找到鏈接。點(diǎn)擊鏈接可以從一張頁(yè)面跳轉(zhuǎn)到另一張頁(yè)面。
實(shí)例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<a href="/index.html">本文本</a> 是一個(gè)指向本網(wǎng)站中的一個(gè)頁(yè)面的鏈接。</p>
<p><a >本文本</a> 是一個(gè)指向萬(wàn)維網(wǎng)上的頁(yè)面的鏈接。</p>
</body>
</html>
[/demo]
本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
將圖像作為鏈接
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
您也可以使用圖像來(lái)作鏈接：
<a href="/example/html/lastpage.html">
<img border="0" src="./imagecopy1234567890/test.gif" />
</a>
</p>
</body>
</html>
[/demo]
本例演示如何使用圖像作為鏈接。
（可以在本頁(yè)底端找到更多實(shí)例）
HTML 超鏈接（鏈接）
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
我們通過(guò)使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 <a> 標(biāo)簽的方式：
通過(guò)使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接
通過(guò)使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽
什么是超文本？
標(biāo)記語(yǔ)言的真正威力在于其收集能力，它可以將收集來(lái)的文檔組合成一個(gè)完整的信息庫(kù)，并且可以將文檔庫(kù)與世界上的其他文檔集合鏈接起來(lái)。
這樣的話，讀者不僅可以完全控制文檔在屏幕上的顯示，還可以通過(guò)超鏈接來(lái)控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它將整個(gè) Web 網(wǎng)絡(luò)連接起來(lái)。
超文本的基礎(chǔ)知識(shí)
超文本的基本特征就是可以超鏈接文檔；你可以指向其他位置，該位置可以在當(dāng)前的文檔中、局域網(wǎng)中的其他文檔，也可以在因特網(wǎng)上的任何位置的文檔中。這些文檔組成了一個(gè)雜亂的信息網(wǎng)。目標(biāo)文檔通常與其來(lái)源有某些關(guān)聯(lián)，并且豐富了來(lái)源；來(lái)源中的鏈接元素則將這種關(guān)系傳遞給瀏覽者。
超鏈接可以用于各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標(biāo)或在鍵盤上按下按鍵，從而選擇并自動(dòng)跳轉(zhuǎn)到文檔中自己感興趣的那個(gè)主題，或跳轉(zhuǎn)到世界上某處完全不同的集合中的某個(gè)文檔。
超鏈接還可以向?yàn)g覽者指出有關(guān)文檔中某個(gè)主題的更多信息。例如，“如果您想了解更詳細(xì)的信息，請(qǐng)參閱某某頁(yè)面。”。作者可以使用超鏈接來(lái)減少重復(fù)信息。例如，我們建議創(chuàng)作者在每個(gè)文檔中都簽署上自己的姓名。這樣就可以使用一個(gè)將名字和另一個(gè)包含地址、電話號(hào)碼等信息的單獨(dú)文檔鏈接起來(lái)的超鏈接，而不必在每個(gè)文檔中都包含完整的聯(lián)系信息。
超鏈接（hyper text），或者按照標(biāo)準(zhǔn)叫法稱為錨（anchor），是使用 <a> 標(biāo)簽標(biāo)記的，可以用兩種方式表示。錨的一種類型是在文檔中創(chuàng)建一個(gè)熱點(diǎn)，當(dāng)用戶激活或選中（通常是使用鼠標(biāo)）這個(gè)熱點(diǎn)時(shí)，會(huì)導(dǎo)致瀏覽器進(jìn)行鏈接。瀏覽器會(huì)自動(dòng)加載并顯示同一文檔或其他文檔中的某個(gè)部分，或觸發(fā)某些與因特網(wǎng)服務(wù)相關(guān)的操作，例如發(fā)送電子郵件或下載特殊文件等。錨的另一種類型會(huì)在文檔中創(chuàng)建一個(gè)標(biāo)記，該標(biāo)記可以被超鏈接引用。
還有一些與超鏈接相關(guān)聯(lián)的鼠標(biāo)相關(guān)事件。這些事件與 JavaScript 結(jié)合使用可以產(chǎn)生一些令人激動(dòng)的效果。
注釋
錨的這兩種類型都使用同樣的標(biāo)簽；也許這就是它們擁有同樣的名稱的原因。但是我們發(fā)現(xiàn)，如果將它們區(qū)分開(kāi)，把提供熱點(diǎn)和超鏈接地址的錨看作“鏈接”，而用于標(biāo)記文檔的目標(biāo)部分的錨稱為“錨”，那么您將更容易理解這兩種類型的錨。
HTML 鏈接語(yǔ)法
鏈接的 HTML 代碼很簡(jiǎn)單。它類似這樣：
<a href="url">Link text</a>
href 屬性規(guī)定鏈接的目標(biāo)。
開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。
實(shí)例
<a >Visit W3School</a>
上面這行代碼顯示為：Visit W3School
點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到 W3School 的首頁(yè)。
提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會(huì)在新窗口打開(kāi)文檔：
<a target="_blank">Visit W3School!</a>
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a target="_blank">Visit W3School!</a>
<p>如果把鏈接的 target 屬性設(shè)置為 "_blank"，該鏈接會(huì)在新窗口中打開(kāi)。</p>
</body>
</html>
[/demo]
HTML 鏈接 - name 屬性
name 屬性規(guī)定錨（anchor）的名稱。
您可以使用 name 屬性創(chuàng)建 HTML 頁(yè)面中的書簽。
書簽不會(huì)以任何特殊方式顯示，它對(duì)讀者是不可見(jiàn)的。
當(dāng)使用命名錨（named anchors）時(shí)，我們可以創(chuàng)建直接跳至該命名錨（比如頁(yè)面中某個(gè)小節(jié)）的鏈接，這樣使用者就無(wú)需不停地滾動(dòng)頁(yè)面來(lái)尋找他們需要的信息了。
命名錨的語(yǔ)法：
<a name="label">錨（顯示在頁(yè)面上的文本）</a>
提示：錨的名稱可以是任何你喜歡的名字。
提示：您可以使用 id 屬性來(lái)替代 name 屬性，命名錨同樣有效。
實(shí)例
首先，我們?cè)?HTML 文檔中對(duì)錨進(jìn)行命名（創(chuàng)建一個(gè)書簽）：
<a name="tips">基本的注意事項(xiàng) - 有用的提示</a>
然后，我們?cè)谕粋€(gè)文檔中創(chuàng)建指向該錨的鏈接：
<a href="#tips">有用的提示</a>
您也可以在其他頁(yè)面中創(chuàng)建指向該錨的鏈接：
<a >有用的提示</a>
在上面的代碼中，我們將 # 符號(hào)和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個(gè)命名錨了。
基本的注意事項(xiàng) - 有用的提示：
注釋：請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：。
提示：命名錨經(jīng)常用于在大型文檔開(kāi)始位置上創(chuàng)建目錄。可以為每個(gè)章節(jié)賦予一個(gè)命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問(wèn)百度百科，您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式。
提示：假如瀏覽器找不到已定義的命名錨，那么就會(huì)定位到文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。
更多實(shí)例
在新的瀏覽器窗口打開(kāi)鏈接
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a target="_blank">Visit W3School!</a>
<p>如果把鏈接的 target 屬性設(shè)置為 "_blank"，該鏈接會(huì)在新窗口中打開(kāi)。</p>
</body>
</html>
[/demo]
本例演示如何在新窗口打開(kāi)一個(gè)頁(yè)面，這樣的話訪問(wèn)者就無(wú)需離開(kāi)你的站點(diǎn)了。
鏈接到同一個(gè)頁(yè)面的不同位置
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
[/demo]
本例演示如何使用鏈接跳轉(zhuǎn)至文檔的另一個(gè)部分
跳出框架
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>被鎖在框架中了嗎？</p>
<a href="/index.html"
target="_top">請(qǐng)點(diǎn)擊這里！</a>
</body>
</html>
[/demo]
本例演示如何跳出框架，假如你的頁(yè)面被固定在框架之內(nèi)。
創(chuàng)建電子郵件鏈接
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
這是郵件鏈接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">發(fā)送郵件</a>
</p>
<p>
<b>注意：</b>應(yīng)該使用 %20 來(lái)替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。
</p>
</body>
</html>
[/demo]
本例演示如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶端程序后才能工作。）
創(chuàng)建電子郵件鏈接 2
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
這是另一個(gè) mailto 鏈接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發(fā)送郵件！</a>
</p>
<p>
<b>注意：</b>應(yīng)該使用 %20 來(lái)替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。
</p>
</body>
</html>
[/demo]
本例演示更加復(fù)雜的郵件鏈接。
HTML 鏈接標(biāo)簽
標(biāo)簽 描述
<a> 定義錨。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
