前端基础-CSS基础（六）

2019-12-17 15:12:08 浏览数 (1)

本文目录

背景样式

文本样式字体样式列表样式表格样式轮廓样式参考

背景样式
代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                background: red;
            }
            body{
                background-image: url(img/小区说事.png);
                background-repeat: no-repeat;
                background-position: top center;
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </body>
</html>

文本样式

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                line-height: 20px; /*设置行高。*/
                letter-spacing: 5px; /*设置字符间距。*/
                text-align: center; /*规定文本的水平对齐方式。*/
                text-decoration: underline; /*通常用于去掉a标签的下划线*/
                text-indent: 2em; /*设置缩进*/
            }
        </style>
    </head>
    <body>
        <p>专注分享区块链、数据挖掘、前后端技术。</p>
        <p>一番码客：挖掘你关心的亮点。</p>
    </body>
</html>

字体样式

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                /*
                 * 字体设置的时候，一般会至少设置三种；
                 * 第一字体不生效的时候会尝试第二字体；
                 */
                font-family: "宋体";
                /*设置字体尺寸*/
                font-size: 20px;
                font-style: italic;
                font-weight: bolder;
            }
        </style>
    </head>
    <body>
        <p>专注分享区块链、数据挖掘、前后端技术。</p>
        <p>一番码客：挖掘你关心的亮点。</p>
    </body>
</html>

列表样式

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            list-style  在一个声明中设置所有的列表属性。
            list-style-image    将图象设置为列表项标记。
            list-style-position 设置列表项标记的放置位置。
            list-style-type 设置列表项标记的类型。
        -->
        <style type="text/css">
            ul.u1{
                list-style-image: url(img/小区说事.png);
            }
            ul.u2{
                list-style-type: upper-latin;
                list-style-position: inside;
            }
            ul.u3{
                list-style-type: upper-latin;
                list-style-position: outside;
            }
        </style>
    </head>
    <body>
        <ul class="u1">
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>

        <ul class="u2">
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>

        <ul class="u3">
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>
    </body>
</html>

表格样式

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             * border-collapse  设置是否把表格边框合并为单一的边框。
             * border-spacing   设置分隔单元格边框的距离。
             * caption-side 设置表格标题的位置。
             * empty-cells  设置是否显示表格中的空单元格。
             * table-layout 设置显示单元、行和列的算法。
             */
            table,th,tr,td{
                border: 1px solid red;
                /*border-collapse: collapse;*/
                border-spacing: 20px;
                empty-cells: hide; /*设置空单元格*/
                table-layout: fixed; 
            }
            table{
                width: 100%;
            }
            caption{
                caption-side: bottom;
            }
        </style>
    </head>
    <body>
        <table id="customers">
        <caption>
            公司信息统计
        </caption>
        <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        </tr>

        <tr>
        <td></td>
        <td>Steven Jobs</td>
        <td>USA</td>
        </tr>

        <tr class="alt">
        <td>BaiduBaiduBaiduBaiduBaiduBaiduBaiduBaidu</td>
        <td>Li YanHong</td>
        <td>China</td>
        </tr>

        <tr>
        <td>Google</td>
        <td>Larry Page</td>
        <td>USA</td>
        </tr>

        <tr class="alt">
        <td>Lenovo</td>
        <td>Liu Chuanzhi</td>
        <td>China</td>
        </tr>

        <tr>
        <td>Microsoft</td>
        <td>Bill Gates</td>
        <td>USA</td>
        </tr>

        <tr class="alt">
        <td>Nokia</td>
        <td>Stephen Elop</td>
        <td>Finland</td>
        </tr>

        </table>
    </body>
</html>

轮廓样式

代码语言：javascript复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <style type="text/css">
        .div1{
            border: 10px solid red;
            outline: 10px dashed blue;
            width: 300px;
            height: 300px;
        }
    </style>

    <body>
        <div class="div1">

        </div>
    </body>

</html>

参考

  • 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
表格 程序员 教程 区块链开发 全栈

0 人点赞