| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <base target="_blank" /> | |
| <style> | |
| a{ | |
| color: black; | |
| text-decoration: none; | |
| /*border:solid 1px #000000;*/ | |
| /*行內元素轉塊級元素*/ | |
| display: block; | |
| width: 100px; | |
| height: 40px; | |
| /*文本對齊*/ | |
| text-align: center; | |
| line-height: 40px; | |
| /*改爲左浮動*/ | |
| float: left; | |
| /*設置外邊距*/ | |
| margin: 10px; | |
| } | |
| /*設置鼠標懸停*/ | |
| a:hover{ | |
| color: #ffffff; | |
| background-color: #FF0000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="#" class="">首頁</a> | |
| <a href="#" class="">公司簡介</a> | |
| <a href="#" class="">產品中心</a> | |
| <a href="#" class="">人才招聘</a> | |
| <a href="#" class="def">聯繫我們</a> | |
| </body> | |
| </html> |
運用簡單的標籤和標籤樣式設計自己喜歡的鼠標懸停樣式：
<a href="網址"></a> //可以點擊文本使之跳轉到相應的網址。
<style></style>中設置各個標籤的樣式，設置標籤樣式可以使用class名，例如：class="btn"
在<style></style>中設置其樣式時用 .btn{...}表示；還可以使用id名，例如：id="bn" 用 #bn{...}表示。其
中class名可以有多個，而id名只能有一個。
設置鼠標懸停樣式：標籤名：hover{...}。
行內元素轉化爲塊級元素（方便改變其排版樣式）：display：block；
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <base target="right" /> | |
| <style> | |
| body{ | |
| margin: 0px; | |
| padding: 0; | |
| background-color: #1C2B36; | |
| } | |
| a{ | |
| color: #869FB1; | |
| text-decoration: none; | |
| display: block; | |
| width: 150px; | |
| height: 50px; | |
| line-height: 50px; | |
| text-align: center; | |
| } | |
| a:hover{ | |
| background-color: #131E26; | |
| color: #ffffff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="c.html">首頁</a> | |
| <a href="gsjj.html">公司簡介</a> | |
| <a href="cpzx.html">產品中心</a> | |
| <a href="lxwm.html">聯繫我們</a> | |
| </body> | |
| </html> | |
這是一個初級者的知識記錄。