HTML CSS 网页设计 CSS样式的运用CSS简要

最新推荐文章于 2024-03-23 01:00:00 发布

爱喝柠檬茶的猫

最新推荐文章于 2024-03-23 01:00:00 发布

阅读量266

点赞数 4

本文链接：https://blog.csdn.net/jereet/article/details/117531655

版权

HTML代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <link rel="stylesheet" href="五彩导航.css">
</head>
<body>
    <ul class="class1">
        <li>五彩导航</li>
        <li>五彩导航</li>
        <li>五彩导航</li>
        <li>五彩导航</li>
    </ul>
</body>
</html>

CSS样式示例：

.class1 {
    display: inline-block;
}

.class1 li {
    width: 120px;
    height: 58px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.class1 li:nth-of-type(1) {
    background: url(./images/bg1.png);
}

.class1 li:nth-of-type(2) {
    background: url(./images/bg2.png);
}

.class1 li:nth-of-type(3) {
    background: url(./images/bg3.png);
}

.class1 li:nth-of-type(4) {
    background: url(./images/bg4.png);
}

.class1 li:nth-of-type(1):hover {
    background: url(./images/bg5.png);
}

.class1 li:nth-of-type(2):hover {
    background: url(./images/bg6.png);
}

.class1 li:nth-of-type(3):hover {
    background: url(./images/bg3.jpg);
}

.class1 li:nth-of-type(4):hover {
    background: url(./images/bg7.png);
}

效果显示：

HTML代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电器分类表</title>
    <link rel="stylesheet" href="电器分类表.css">
</head>
<body>
    <div class="class2"> 
        <p class="title">家用电器</p>
        <p class="sub_title">大家电</p>
        <ul class="sub_context">
            <li>平板电视</li>
            <li>洗衣机</li>
            <li>冰箱</li>
            <li>空调</li>
            <li>烟机/灶具</li>
            <li>热水器</li>
            <li>冷柜/酒柜</li>
            <li>消毒柜</li>
            <li>家庭影院</li>
        </ul>
        <p class="sub_title">生活电器</p>
        <ul class="sub_context">
            <li>电风扇</li>
            <li>净化器</li>
            <li>吸尘器</li>
            <li>净水设备</li>
            <li>挂烫机</li>
            <li>电话机</li>
        </ul>
        <p class="sub_title">厨房电器</p>
        <ul class="sub_context">
            <li>榨汁机</li>
            <li>电压力锅</li>
            <li>电饭煲</li>
            <li>豆浆机</li>
            <li>微波炉</li>
            <li>电磁炉</li>
        </ul>
        <p class="sub_title">五金家装</p>
        <ul class="sub_context">
            <li>淋浴/水槽</li>
            <li>电动工具</li>
            <li>手动工具</li>
            <li>仪器仪表</li>
            <li>浴霸/排气</li>
            <li>灯具F</li>
        </ul>
    </div>

</body>
</html>

CSS样式示例：

.class2 {   /* div样式*/
    width: 220px;
    font-family: '宋体';
}

.title {    /*标题的样式*/
    background-color: #0f7cbf;
    font-size: 18px;
    font-weight: bold;
    padding-left: 1em;
    line-height: 35px;
    color: #fff;
    margin-bottom: 0%;
}

.sub_title {     /*二级标题的样式*/
    background-color: #e4f1fa;
    font-size: 14px;
    font-weight: bold;
    padding-left: 2em;
    line-height: 30px;
    color: #0f7cbf;
    margin-top: 0%;
}

.sub_title:hover {  /*鼠标移入效果*/
    text-decoration: underline;
}

.sub_context {
    font-size: 12px;
    padding: 0 1em 0 0;
}

.sub_context li {
    padding-left: 1em;
    display: inline-block;
    line-height: 20px;
    color: #666;
}

.sub_context li:hover {
    text-decoration: underline;
    color: #F60;
}

效果显示：

CSS知识梳理：

爱喝柠檬茶的猫

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
HTML CSS 网页设计 CSS样式的运用CSS简要

HTML代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫