HTML第6章上机练习4(制作美容热点产品列表)

思卿不见

已于 2022-05-25 16:17:15 修改

阅读量5.5k

点赞数 6

文章标签： HTML

于 2019-04-22 16:33:31 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/89454910

版权

ps:以后都是代码式…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作美容热点产品列表</title>
    <style>
        body{
            background-color: yellow;
        }
        .title{
            width: 330px;
        }
        .one{
            background: #e9185a;
            padding: 8px 0px 8px 5px;
            color: white;
            font-weight: bold;
        }
        .two{
            background: white;
        }
        a{
            text-decoration: none;
            color: #373b3c;
        }
        a:hover{
            color: #e9185a;
            text-decoration: none;
        }
        ul{
            margin:0px ;
            padding:0px;
        }
        li{
            list-style: none;
            line-height: 35px;
            border-bottom: dashed 1px #373b3c;
        }
        .two a span{
            color: #ffffff;
            font-weight: bold;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #373b3c;
            line-height: 20px;
            text-align: center;
        }
        .two a:hover span{
            background: #e9185a;
        }
    </style>
</head>
<body>
<div class="title">
    <div class="one">大家都喜欢买的美容品</div>
    <div class="two">
        <table>
            <tr>
                <ul>
                    <li><a href=""><span>1</span>&nbsp;&nbsp;雅诗兰黛即时修护眼部精华霜15ml</a> </li>
                    <li><a href=""><span>2</span>&nbsp;&nbsp;伊丽莎白雅顿显效复合活肤霜 75ml</a> </li>
                    <li><a href=""><span>3</span>&nbsp;&nbsp;OLAY玉兰油多效修护霜 50g</a></li>
                    <li><a href=""><span>4</span>&nbsp;&nbsp;巨型一号丝瓜水320ML</a></li>
                    <li><a href=""><span>5</span>&nbsp;&nbsp;倩碧保湿洁肤水2号 200ml</a></li>
                    <li><a href=""><span>6</span>&nbsp;&nbsp;比度克细肤淡印霜 30g</a></li>
                    <li><a href=""><span>7</span>&nbsp;&nbsp;兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
                    <li><a href=""><span>8</span>&nbsp;&nbsp;SK-II护肤精华露 215ml</a></li>
                    <li><a href=""><span>9</span>&nbsp;&nbsp;欧莱雅青春密码活颜精华肌底液</a></li>
                </ul>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

ps:附上完成后的效果图
在这里插入图片描述

思卿不见

关注

6
点赞
踩
44

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML第6章上机练习4(制作美容热点产品列表)

ps:以后都是代码式…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作美容热点产品列表</title> <style> body{ background-...
复制链接

扫一扫