超鏈接
<a href="跳轉的地址">可以是 文本/ img/ div...</a>
屬性：
href：跳轉地址
target：_self 本頁/ _blank 空白頁，新頁 設定網頁的打開方式，
base標記
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 配合超鏈接使用做全域的設定 href用來設定相同的基礎地址 target用于設定統一的打開方式-->
<base href="https://shop.mogu.com/detail/" target="_blank">
</head>
錨點功能
超鏈接跳轉到某一個界面的某一個部分
- 先要給鏈接的部分加一個id屬性 起一個id值
- 在a鏈接里href="#id值" 如要跳轉到其他界面的某一個部分 則 href=“界面地址#id值”
串列系列
無序串列
ul>li*n
type:標識的型別
<!-- type:square正方形 /circle空心圓 /desc實心圓 /none沒有 -->
<ul type="">
<li>無序串列資料項</li>
<li>無序串列資料項</li>
<li>無序串列資料項</li>
<li>無序串列資料項</li>
<li>無序串列資料項</li>
</ul>
有序串列
<!-- type: 1 /a/A/I/i start="數字" -->
<ol type="1" start="6">
<li>資料項1</li>
<li>資料項2</li>
<li>資料項3</li>
<li>資料項4</li>
<li>資料項5</li>
</ol>
自定義串列
<!-- dl define list > dt title + dd data-->
<dl>
<dt>購物指南</dt>
<dd>購物流程</dd>
<dd>購物流程</dd>
<dd>購物流程</dd>
<dd>購物流程</dd>
<dd>購物流程</dd>
</dl>
表格結構
二位結構 水平（行） 垂直（列）
寬度和高度自己適應結構
<table border="1px" cellpadding="0" cellspacing="0" style="border-collapse:collapse"
align="center" width="500px" height="300px" >
<tr bgcolor="red">
<td>姓名</td>
<td>基本工資</td>
<td>崗位工資</td>
<td>補助</td>
<td>其他</td>
</tr>
<tr align="center">
<td bgcolor="yellow">馬杰倫</td>
<td >800</td>
<td>100</td>
<td width="200px">0</td>
<td>0</td>
</tr>
<tr align="center">
<td>朱德華</td>
<td>2000</td>
<td>500</td>
<td>50</td>
<td>0</td>
</tr>
<tr>
<td>張榮浩</td>
<td>3000</td>
<td>1000</td>
<td>1000</td>
<td>0</td>
</tr>
</table>
默認屬性
? border:邊框 border=“1px”
? cellpadding:
單元格內部邊框和內容的距離
? ==cellspacing: ==
單元格與單元格之間的距離
? align:水平對齊方式 left right center
? (1)寫在table里 那就是表格大盒子對齊
? (2)寫在td單元格里 那就是單元格內容對齊 不要一個個的給td加 應該加在tr身上
? width:寬度
? height:高度
? bgcolor：背景色 table or tr or td
? css屬性: border-collapse:collapse細線邊框屬性
合并屬性
跨行合并
rowspan =“n” n你要合并的行數 rowspan=“2”
洗掉個數=合并的列數-1
跨列合并
colspan=“n” n你要合并的列數 colspan=“3”
css語言引入(html檔案里)的方法
css屬性寫法
{
屬性名：屬性值;
屬性名：屬性值;
屬性名：屬性值;
屬性名：屬性值;
…
}
行內引入
<div style="width:200px;height:200px;background-color: slateblue;">
div元素
</div>
缺點：1.代碼冗余 2.結構不清晰 3. 后期維護困難
內部嵌入
<!--內部 嵌入 -->
<style>
* {
color:tomato;
}
p {
font-size: 30px;
}
.list-data {
font-size: 22px;
color: springgreen;
}
.first {
color: #000;
}
#one {
color: #000;
}
</style>
</head>
缺點：1.沒有形成結構與樣式相分離 不利于后期代碼復用和維護
外部鏈接
1.創建一個.css檔案
2.把css樣式代碼寫入檔案里
3.引入 head>link
優點：徹底形成分離 復用 + 好維護匯入
優先級
行內 > 內部嵌入 >外部引入
行內:js獲取行內樣式是非常方便的 優先級高 覆寫外部樣式 ，內部嵌入
內部嵌入:覆寫公共樣式檔案里的樣式 common.css
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224813.html
標籤：其他