利用html编写网站中的新闻快报模块

忘不了情

已于 2022-10-13 19:22:44 修改

阅读量3.2k

点赞数 2

文章标签： html 前端 javascript

于 2022-10-13 19:22:17 首次发布

本文链接：https://blog.csdn.net/y1059477028/article/details/127305949

版权

1、编写style样式时，首先要整体去除内、外边距、项目符号类型、文本修饰

2、在给文字设背景或者边框时，一定要注意包裹文字的标签类型，然后决定是否要进行标签类型转换，因为行内标签无法设置背景的宽和高

3、如果不进行span标签类型转换，可以通过设置pandding内间距也能实现同样效果

4、注意单层文本的省略号是如何设置的

五、最终浏览器编译结果

一、结构分析

编写代码之前首先要进行结构分析，如下右图

1、红线代表整个盒子模块的最外层；

2、上方绿线代表标题模块，下方绿线为列表内容区；

3、蓝线可以看成每个列表项；

4、黑线表示每个列表项里的具体内容。

二、代码编写

<!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>
        * {
            margin: 0;
            padding: 0%;
            list-style: none;
            text-decoration: none;
        }

        .news {
            margin-left: 100px;
            margin-top: 100px;
            width: 190px;
            height: 130px;            
        }

        h4 {
            color: #333;
            font-size: 14px;
            margin-bottom: 5px;
        }

        h4>a {
            color: #999;
            font-size: 12px;
            padding-left: 56px;

        }
        li {
            width: 160px;
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
        }

        li>a>span:first-child {
            /* 在给文字设背景或者边框时，一定要注意包裹文字的标签类型，然后决定是否要进行标签类型转换 */
            display: inline-block;
            width: 35px;
            height: 16px;
            background-color: rgba(225, 37, 27, .08);
            color: #e1251b;
            font-size: 12px;
            line-height: 16px;
            text-align: center;
        }
        li>a>span:last-child {
            color: #666;
            font-size: 12px;
        }
        a>span:last-child:hover {
            color: #e1251b;
        }
        a:hover {
            color: #e1251b;
        }
    </style>
</head>

<body>
    <div class="news">
        <h4>京东快报
            <a href="#">更多&gt;</a>
        </h4>
        <ul>
            <li>
                <a href="#">
                    <span>热门</span>
                    <span>重新定义旗舰处理器，AMD锐龙9 7950X究竟有多强</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>最新</span>
                    <span>总吃外卖要及时补充营养，汤臣倍健营养品来了</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>热评</span>
                    <span>重新定义旗舰处理器，AMD锐龙9 7950X究竟有多强</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>HOT</span>
                    <span>红米商务笔记本测评，让你体验出彩的轻薄猛机</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

三、代码分析

1、首先使用div块标签包住整个内容区，即红色外框线；

2、“京东快报”所在栏是标题栏，所以使用H标签，注意后面的超链接“更多”也要包在H标签内；

3、标题下方为列表内容区，使用ul列表标签；

4、li标签要包含两个span行内标签，因为需要代表不同类型的内容。