国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

HTML--CSS--邊框、列表、表格樣式

2年前作者：零時(shí)搞學(xué)習(xí)分類(lèi)：Toy博客閱讀(24)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了HTML--CSS--邊框、列表、表格樣式。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

邊框樣式

屬性：

border-width 邊框?qū)挾?br> border-style 邊框外觀
border-color 邊框顏色
需要同時(shí)設(shè)定三個(gè)屬性

border-width 邊框?qū)挾?/h3>

取值為像素值

border-style 邊框樣式

none 無(wú)樣式
dashed 虛線(xiàn)
solid 實(shí)線(xiàn)

border-color 邊框顏色

如示例：
為div設(shè)定了一個(gè)邊框，虛線(xiàn)，寬度10像素，顏色是紅色

<!DOCTYPE html>
<html>
<head> 
    <title>表單</title>
    <meta charset="utf-8"/>
    <style type="text/css">

    </style>
</head>
<body>
    <div style="border-style: dashed; border-width: 10px; border-color: red;">
        <p style="text-transform: uppercase;"> my room Case</p>
        <p style="text-transform: lowercase;"> MY ROOOM Case</p>
        <p style="text-transform: capitalize;"> my room case</p>
    </div>
</body>
</html>

效果：
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3
另一寫(xiě)法：簡(jiǎn)寫(xiě),將配置都寫(xiě)進(jìn)border里，效果是一樣的

style="border: dashed 10px red;"

局部樣式 單獨(dú)設(shè)定上下左右邊框線(xiàn)，屬性一致

border-top 上邊框
border-bottom 下邊框
border-left 左邊框
border-right 右邊框

如下例子：

<!DOCTYPE html>
<html>
<head> 
    <title>表單</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div{
            border-top: dashed 10px red;
            border-bottom: solid 20px yellow;
            border-left: solid 15px blue;
            border-right-color: green;
            border-right-width: 2px;
            border-right-style: dashed;
        }
        
    </style>
</head>
<body>
    <div >
        <p style="text-transform: uppercase;"> my room Case</p>
        <p style="text-transform: lowercase;"> MY ROOOM Case</p>
        <p style="text-transform: capitalize;"> my room case</p>
    </div>
</body>
</html>

效果：
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3
PS：假如設(shè)定邊框?qū)挾葹?px，則去除掉了邊框

列表樣式 list-style-type

之前提過(guò)列表分為有序列表 ol 和無(wú)序列表 ul
參考：HTML–列表
這里的列表樣式就是針對(duì)這兩種列表的

用法 list-style-type:取值；

有序列表屬性：

decimal 阿拉伯?dāng)?shù)字（默認(rèn)值）
lower-roman 小寫(xiě)羅馬數(shù)字： i,ii,iii…
upper-roman 大寫(xiě)羅馬數(shù)字：I,II,III,IV…
lower-alpha 小寫(xiě)英文單詞：a,b,c…
upper-alpha 大寫(xiě)英文單詞：A,B,C…

無(wú)序列表屬性：

disc 實(shí)心圓（默認(rèn)）
circle 空心圓
square 正方形

由此可見(jiàn)，其實(shí)跟HTML中列表參數(shù)基本一致，參數(shù)不太一樣而已

<!DOCTYPE html>
<html>
<head> 
    <title>這是一個(gè)標(biāo)題</title>
    <meta charset="utf-8"/>
    <style>
        ol,ul{list-style-type: none;}
    </style>
</head>
<body>
    <ol type="a">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>
</html>

效果：
可以看到list-style-type優(yōu)先級(jí)比ol的type屬性優(yōu)先級(jí)更高，即使我定義了列表序號(hào)，但是使用list-style-type可以去除掉，或者重新定義成新的樣式
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3

列表項(xiàng)圖片 list-style-image

作用：使用圖片代替列表項(xiàng)的序列號(hào)

<!DOCTYPE html>
<html>
<head> 
    <title>這是一個(gè)標(biāo)題</title>
    <meta charset="utf-8"/>
    <style>
        ol,ul{list-style-image: url(x.gif);}
    </style>
</head>
<body>
    <ol type="a">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>
</html>

這里定義x.gif為列表序列號(hào),效果：
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3

表格樣式

表格標(biāo)題位置 caption-side

用法：
caption-side:取值；
屬性：

top 標(biāo)題在頂部（默認(rèn)值）
bottom 標(biāo)題在底部

參考之前的文章： HTML–表格

<!DOCTYPE html>
<html>
<head> 
    <title>這是一個(gè)標(biāo)題</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
        table{caption-side: bottom;}
    </style>
</head>
<body>
    <table>
        <caption>這是表格的標(biāo)題</caption>
        <tr>
            <td>姓名</td>
            <td>性別</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不詳</td>
        </tr>
    </table>

</body>
</html>

效果：
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3

表格邊框合并 border-collapse

屬性：

separate 邊框分開(kāi)，有空隙（默認(rèn)值）
collapse 邊框合并，無(wú)空隙
用法：
table{border-collapse: collapse;}

<!DOCTYPE html>
<html>
<head> 
    <title>這是一個(gè)標(biāo)題</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
        table{caption-side: bottom;}
        table{border-collapse: collapse;}
    </style>
</head>
<body>
    <table>
        <caption>這是表格的標(biāo)題</caption>
        <tr>
            <td>姓名</td>
            <td>性別</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不詳</td>
        </tr>
    </table>

</body>
</html>

效果：
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3

表格邊框間距 border-spacing(注意這個(gè)需要邊框是分開(kāi)的才能生效)

用法：
border-spacing:像素值;

<!DOCTYPE html>
<html>
<head> 
    <title>這是一個(gè)標(biāo)題</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
        table{caption-side: bottom;}
        table{
            border-collapse: separate;
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>這是表格的標(biāo)題</caption>
        <tr>
            <td>姓名</td>
            <td>性別</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不詳</td>
        </tr>
    </table>
</body>
</html>

效果：
HTML--CSS--邊框、列表、表格樣式,HTML學(xué)習(xí),css,html,css3文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-796010.html

三級(jí)標(biāo)題

四級(jí)標(biāo)題
五級(jí)標(biāo)題
六級(jí)標(biāo)題

到了這里，關(guān)于HTML--CSS--邊框、列表、表格樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包