请老师帮忙看一下代码还有哪些值得优化的地方(评论区感觉套个无序列表更清晰一些)

来源:2-6 编程练习

Bailey_

2021-03-17 16:15:10

<!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>Document</title>

    <style>

        h1 {

            colorgreen;

        }

        ul {

            list-stylenone;

        }

        .star {

            colororange;

        }

        a {

            text-decorationnone;

            color#009;

        }

    </style>

</head>

<body>

    <h1>大话西游之大圣娶亲的影评</h1>

    <div class="keyword">

        <a href="">热门/最新/好友</a>

    </div>

    <div class="comment-area">

        <hr>

        <ul class="user1">

            <li><a href="" class="name">罗红霉素</a><span class="star">★★★★★</span>2010-07-26</li>

            <li>有人跟我比赛背台词么</li>

            <li>阅读:1615 <a href="" class="useful">有用</a></li>

        </ul>

        <hr>

        <ul class="user2">

            <li><a href="" class="name">十七只猫和鱼</a><span class="star">★★★★</span>2006-04-26</li>

            <li>任何时候任何场合都可以再看一遍的电影</li>

            <li>阅读:515 <a href="" class="useful">有用</a></li>

        </ul>

        <hr>

        <ul class="user3">

            <li><a href="" class="name">暖家男</a><span class="star">★★★★</span>2006-04-22</li>

            <li>一定有一些电影 永远都不能被超越</li>

            <li>阅读:490 <a href="" class="useful">有用</a></li>

        </ul>

        

    </div>

</body>

</html>


写回答

1回答

好帮手慕久久

2021-03-17

同学你好,样式很整洁,只是效果与练习要求不符:

http://img.mukewang.com/climg/6051c37409e10fe706920465.jpg

原因就是嵌套的ul标签,左侧有自带的间隙样式。虽然嵌套列表后结构会更清晰,但是当前阶段,我们还没学习怎么去掉这个多余的间隙,所以可以不嵌套列表标签:

http://img.mukewang.com/climg/6051c4cf0954300d12210233.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程