signed

QiShunwang

“诚信为本、客户至上”

html-6.3

2021/6/3 18:46:33   来源:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>家用电器分类</title>
    <style type="text/css">
        .box {
            width: 260px;
        }
        
        .box1 {
            position: absolute;
            margin-left: -40px;
            margin-top: -2.6%;
            width: 300px;
        }
        
        .box h2 {
            font-size: 20px;
            color: #fff;
            line-height: 35px;
            background: linear-gradient(to bottom, #0467AC, #63A7D6, #B6DBF5);
            text-indent: 1em;
        }
        
        .box ul li {
            list-style-type: none;
            font-size: 0;
        }
        
        span {
            font-size: 12px;
        }
        
        .box ul li h3 {
            font-size: 14px;
            line-height: 30px;
            background: linear-gradient(to top, #CEE7F9, #BDDFF7, #CEE7F9);
        }
        
        .box ul li h3 a {
            text-decoration: none;
            color: #0565C6;
        }
        
        .box ul li h3 a:hover {
            text-decoration: underline;
        }
        
        .box ul li p {
            font-size: 12px;
            line-height: 26px;
        }
        
        .box ul li p a {
            color: #666;
            text-decoration: none;
        }
        
        .box ul li p a:hover {
            color: #F60;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>家用电器</h2>
        <div class="box1">
            <ul>
                <li>
                    <h3><a href="#">大家电</a></h3>
                    <p>
                        <a href="#">平板电视</a>
                        <a href="#">洗衣机</a>
                        <a href="#">冰箱</a>
                    </p>
                    <p>
                        <a href="#">空调</a>
                        <a href="#">烟机</a>
                        <span>/</span>
                        <a href="#">灶具</a>
                        <a href="#">热水器</a>
                    </p>
                    <p>
                        <a href="#">冷柜</a>
                        <span>/</span>
                        <a href="#">酒柜</a>
                        <a href="#">消毒柜</a>
                        <a href="#">家庭影院</a>
                    </p>
                </li>
                <li>
                    <h3><a href="#">生活电器</a></h3>
                    <p>
                        <a href="#">电风扇</a>
                        <a href="#">净化器</a>
                        <a href="#">吸尘器</a>
                    </p>
                    <p>
                        <a href="#">净水设备</a>
                        <a href="#">挂烫机</a>
                        <a href="#">电话机</a>
                    </p>
                </li>
                <li>
                    <h3><a href="#">厨房电器</a></h3>
                    <p>
                        <a href="#">榨汁机</a>
                        <a href="#">电压力锅</a>
                        <a href="#">电饭煲</a>
                    </p>
                    <p>
                        <a href="#">豆浆机</a>
                        <a href="#">微波炉</a>
                        <a href="#">电磁炉</a>
                    </p>
                </li>
                <li>
                    <h3><a href="#">五金家装</a></h3>
                    <p>
                        <a href="#">淋浴</a>
                        <span>/</span>
                        <a href="#">水槽</a>
                        <a href="#">电动工具</a>
                        <a href="#">手动工具</a>
                    </p>
                    <p>
                        <a href="#">仪器仪表</a>
                        <a href="#">浴霸</a>
                        <span>/</span>
                        <a href="#">排气</a>
                        <a href="#">灯具</a>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

运行结果如下图所示:

 

1:内联式css样式
内联式css样式表就是把css代码直接写在现有的HTML标签中:

采用style属性。范围只针对此标签适用。

该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

2:嵌入式css样式
在HTML文档中的< head >中使用< style >标记,,被称为内嵌式。

在head标签中加入< style >标签,对多个标签进行统一修改,范围针对此页面。