电商团购悬浮框+课程介绍专栏

最新推荐文章于 2024-04-09 14:02:49 发布

肥牛咩咩

最新推荐文章于 2024-04-09 14:02:49 发布

阅读量293

点赞数 3

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_44788552/article/details/137547426

版权

题目

题目一：电商团购悬浮框（效果图）

结构分析：

图中所示的电商“团购悬浮框”由团购时间、团购种类和返回顶部几个部分并列构成，可以通过无序列表<ul>来定义。

样式分析：

为<ul>设置宽度、高度和边框样式。
为<li>设置宽、高样式，并通过背景属性定义列表项目符号。

题目二：课程介绍专栏(效果图＋代码)

样式分析：

如图所示的课程介绍专栏由标题和课程分类两部分组成。其中课程类别，在排序上不分先后，可以使用无序列表ul进行定义，并且它们都是可以点击的链接，当鼠标移上时，其样式会发生变化，因此需要使用CSS伪类控制链接样式。效果图如下：

当鼠标移动到课程类别时，其链接样式会发生如下变化：

实现代码

题目一代码：

<body>
    <ul>
        <li>7月30日0:00开团</li>
        <li class="item">新品团</li>
        <li class="item">尝鲜团</li>
        <li class="item">秒杀团</li>
        <li class="item">清仓团</li>
        <li class="back">返回顶部</li>
    </ul>
</body>

    *{
            margin: 0;
            padding: 0;
            list-style: none;
            
        }
        body{
            font-size: 18px;
            font-family: "微软雅黑";
        }
        ul{
            width: 200px;
            height: 270px;
            margin: 20px;
            border: 3px solid #613e72;
            padding: 10px;
        }
        li{
            width: 142px;
            height: 40px;
            line-height: 40px;
            background: url(images/clock.png) no-repeat left center;
            padding-left: 40px;
            margin: 0 auto 5px;
            color: #613e72;

        }
        .item{
            background: #613e72 url(images/icon.png) no-repeat 5px center;
            color:#fff;

        }
        .back{
            background: url(images/back.png) no-repeat left center;
        }

题目二代码：

<body>
    <div class="bg">
        <h2></h2>
        <ul>
            <li>
                <a href="#">
                    <span>印刷流程<br>广告设计<br>企业形象设计</span>
                    <span class="num">1</span>
                    <span class="descript">平面设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
                    <span class="num">2</span>
                    <span class="descript">网页设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>视觉创意设计<br>人机交互原则<br>UI设计规范</span>
                    <span class="num">3</span>
                    <span class="descript">UI设计</span>
                </a>
            </li>
        </ul>
    </div>
</body>

*{
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
}
body{
    font-family: "微软雅黑";
    font-size: 14px;
}
a:link,a:visited{
    color: #f4f4e1;
    text-decoration: none;
}
.bg{
    width: 461px;
    height: 532px;
    background: #ce4d52;
    margin: 10px auto;
}
h2{
    width: 461px;
    height: 95px;
    background: url(images/head.png) no-repeat;
    border-bottom: 1px solid #8d2327;
}

ul{
    width: 461px;
    border-top: 1px solid #e68589;
}
a{
    display: inline-block;
    width: 451px;
    height: 103px;
    background: url(images/bg.png) no-repeat;
    padding: 42px 0 0 10px;
}
a span{
    display: inline-block;
    width: 110px;
    height: 60px;
    text-align: right;
}
a .num,a .descript{
    vertical-align: middle;
    width: 90px;
}
a .descript{
    text-align: left;
    padding-left: 35px;
}
a:hover{
    background: url(images/bg1.png) no-repeat;
}
F a:hover .num{
    color: #f4f4e1;
}

肥牛咩咩

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
电商团购悬浮框+课程介绍专栏

样式分析：如图所示的课程介绍专栏由标题和课程分类两部分组成。其中课程类别，在排序上不分先后，可以使用无序列表ul进行定义，并且它们都是可以点击的链接，当鼠标移上时，其样式会发生变化，因此需要使用CSS伪类控制链接样式。效果图如下：
复制链接

扫一扫