CSS-家用电气商品分类

最新推荐文章于 2022-06-17 10:12:04 发布

云祁

最新推荐文章于 2022-06-17 10:12:04 发布

阅读量3.7k

点赞数 5

本文链接：https://blog.csdn.net/BeiisBei/article/details/99188418

版权

---- HTML & CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

创建一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器商品分类</title>
    <link rel="stylesheet" href="CSS/Demo4.css" TYPE="text/css">
</head>
<body>
<div class="type">
<div id="title">家用电器</div>
    <div class="title2"><a href=" ">大家电</a></div>
        <p> <a href=" ">平板点视</a>&nbsp;<a href=" ">洗衣机</a>&nbsp;<a href=" ">冰箱</a><br/>
            <a href=" ">空调</a>&nbsp;<a href=" ">烟机/灶具</a>&nbsp;<a href=" ">热水器</a><br/>
            <a href=" ">冷柜/酒柜</a>&nbsp;<a href=" ">消毒柜</a>&nbsp;<a href=" ">家庭影院</a>
        </p>
    <div class="title2"><a href=" ">生活电器</a></div>
        <p> <a href=" ">电风扇</a>&nbsp;<a href=" ">净化器</a>&nbsp;<a href=" ">吸尘器</a><br/>
            <a href=" ">净水设备</a>&nbsp;<a href=" ">挂烫机</a>&nbsp;<a href=" ">电话机</a>
        </p>
    <div class="title2"><a href=" ">厨房电器</a></div>
        <p> <a href=" ">榨汁机</a>&nbsp;<a href=" ">电压力锅</a>&nbsp;<a href=" ">电饭煲</a><br/>
            <a href=" ">豆浆机</a>&nbsp;<a href=" ">微波炉</a>&nbsp;<a href=" ">电磁炉</a>
        </p>
    <div class="title2"><a href=" ">五金家装</a></div>
        <p> <a href=" ">淋浴/水槽</a>&nbsp;<a href=" ">电动工具</a>&nbsp;<a href=" ">手动工具</a><br/>
            <a href=" ">仪器仪表</a>&nbsp;<a href=" ">浴霸/排气</a>&nbsp;<a href=" ">灯具</a></p>

</div>
</body>
</html>

创建对应的Demo4.css

@charset "UTF-8";

/*总div的宽度*/
.type{
    width:300px;
}

#title{
    font-size: 18px;
    font-weight: bolder;
    line-height: 35px;
    background-color: royalblue;
    color: white;
}
.title2{
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    background-color: skyblue;
    color: royalblue;
}

/*设置超链接没有下划线*/
a{
    text-decoration: none;
}

/*设置超链接鼠标悬浮其上有下划线*/
a:hover{
    text-decoration: underline;
}

p{
    font-size: 12px;
    line-height: 20px;
    color: #666666;
    text-align: left;
}

/*p标签下面的a标签鼠标悬浮时*/
p a:hover{
    color:crimson;
}