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>

文章插图

文本居中

属性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>

文章插图
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 href="https://www.baidu.com">点击百度</a></body></html>

文章插图
3.6表格细线设置边框 : border: 1px solid black
将边框合并: border-collapse: collapse;
指定宽度： width
设置边框：给 td, th 指定即可 border: 1px solid black;

table, tr, td 表示组合选择器
就是 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>

文章插图
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>