1. 首頁 > 生活百科 > >

day03-CSS( 二 )

生活百科day03-CSS


day03-CSS

文章插圖
3.4div和文本居中
  • div居中
屬性margin-left 和 margin-right 都設置為auto的話，表示左右居中
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>div居中顯示</title><style type="text/css">div {/*margin-left和margin-right都設置為auto的話 ， 表示左右居中*/margin-left: auto;margin-right: auto;border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 華文新魏;}</style></head><body><div>hello,北京</div></body></html>
day03-CSS

文章插圖
  • 文本居中
屬性text-align，值為center時表示文本居中
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文本居中顯示</title><style type="text/css">div {margin-left: auto;margin-right: auto;border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 華文新魏;/*文本居中*/text-align: center;}</style></head><body><div>hello,北京</div></body></html>
day03-CSS

文章插圖
3.5超鏈接去下劃線屬性text-decoration，值為none時表示無修飾
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超鏈接去下劃線</title><style type="text/css">a {/* decoration是修飾的意思*/text-decoration: none;}</style></head><body><a >點擊百度</a></body></html>
day03-CSS

文章插圖
3.6表格細線設置邊框 : border: 1px solid black
將邊框合并: border-collapse: collapse;
指定寬度： width
設置邊框： 給 td, th 指定即可 border: 1px solid black;
  1. table, tr, td 表示組合選擇器
  2. 就是 table 和 tr 還有 td ,都用統一的樣式指定, 可以提高復用性
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格細線</title><style type="text/css">/*設置邊框 : border: 1px solid black將邊框合并: border-collapse: collapse;指定寬度： width設置邊框： 給 td, th 指定即可 border: 1px solid black;1. table, tr, td 表示組合選擇器2. 就是 table 和 tr 還有 td ,都用統一的樣式指定, 可以提高復用性*/table, tr, td {width: 300px;border: 1px solid black;border-collapse: collapse;}</style></head><body><table><tr><td align=center colspan="3">星期一菜譜</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小蔥豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>葷菜</td><td>油悶大蝦</td><td>海參魚翅</td></tr><tr><td>紅燒肉</td><td>烤全羊</td></tr></table></body></html>
day03-CSS

文章插圖
3.7列表去修飾屬性list-style的值為none時，表示去掉默認的修飾
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表去修飾</title><style type="text/css">ul {list-style: none;}</style></head><body><ul><li>三國演義</li><li>紅樓夢</li><li>西游記</li><li>水滸傳</li></ul></body></html>
day03-CSS

文章插圖
4.css三種使用方式