前言

一个~~对技术不太自信的~~ 程序员参考尚硅谷的前端CSS讲义来做一个仿网易新闻的界面。

唉，写博客就能推着自己一路往前走呀，太不容易啦！

内容

主要是复习一下css的主要运用方法，怎么运用快捷键生成呀，比如div>li*3这种，然后熟悉一下CSS在实例中的运用。

问题

1. CSS颜色样式显示不出

CSS颜色样式没有
解决：
解决方法

重点：

1、把块元素设置为行内元素，那么它的宽度就和文字一样了。display:inline-block
2、把…压住…，可以用margin-top:负值
3、只有在a里面设置text-decoration才有用。
4、如果想要在每一个li的前面都加上一个方框，可以用前面学到的伪类选择器，这里真的真的很妙欸！
5、还可以在父元素里面用overflow：hidden来隐藏溢出的子元素

.news-list li::before
{
content:"(方框)"
}

最终成功的代码：

<!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>
    <link rel="stylesheet" href="./css/reset.css">

    <style>
        /* 设置容器的样式 */
        /* body{
            background-color: #bfa;
        } */
        .news-wrapper {
      
      
            width: 380px;
            height: 427px;
            background-color: #fff;
            margin: 50px auto;
            border-top:1px solid #e5e5e5;
        }

        .news-wrapper .news-title {
      
      
            /* 既有块元素的特点，又有行内元素的特点，为了边框和文字的宽度一致，需要将h2设置为行内块元素 */
            display: inline-block;
            padding-left: 10px;
            height: 54px;
            line-height:54px;
            
            border-top: 1px solid red;
            /* 现在需要让红色边框压住黑色边框 通过margin-top将h2上移*/
            margin-top: -1px;
        }
        .news-img{
      
      
            height:200px;
        }
        .news-title a{
      
      
            /* 只有在a里面设置text-decoration才有用 */
            text-decoration: none;
            color: black;
        }

        /* 设置图片的文字效果 */
        .img-title a{
      
      
            color: #fff;
            font-weight: bold;
        }
        .img-title{
      
      
            color: #fff;
            margin-top: -25px;
            padding-left: 30px;
        }
        a{
      
      
            text-decoration: none;
            /* text-decoration: line-through */
        }
        .news-list{
      
      
            margin-top: 10px;
            padding-left: 14px;
            list-style: circle;
            list-style-position:inside
        }
        .news-list li{
      
      
            margin-bottom:17px ;
            overflow: hidden;
            height:20px;
            line-height: 20px;
            
        }
        .news-list li a{
      
      
            font-size: 14px;
            color: dimgray;
        }
        .news-list li a:hover{
      
      
            /* font-size: 14px; */
            color: rgb(222, 27, 27);
        }
    </style>
</head>

<body>
    <!-- 创建外层容器 -->
    <div class="news-wrapper">

        <h2 class="news-title">
            <a href="#">体育</a>
        </h2>
        <!-- 创建一个存放图片的容器 -->
        <div class="news-img">
            <a href="#">
                <img src="./下载.jpeg">
                <!-- 创建图片标题 -->
                <h3 class="img-title">
                    <a href="#">我们甚至失去了黄昏</a>
                </h3>
            </a>

        </div>

        <!-- 新闻列表 -->
        <div>
            <ul class="news-list">
                <li class="news">
                    <a href="#">俄罗斯最后底线，深入北约的海外飞地</a>
                </li>
                <li class="news">
                    <a href="#">李想营销反感，理想汽车却卖爆款？</a>
                </li>
                <li class="news">
                    <a href="#">彼时你在哪里呢?那里有些什么?为什么当我感受到你的远离时,全部的爱才突如其来的降临呢?</a>
                </li>
                <li class="news">
                    <a href="#">彼时你在哪里呢?那里有些什么?为什么当我感受到你的远离时,全部的爱才突如其来的降临呢?</a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

以下是最终效果图
在这里插入图片描述

【CSS练习小项目】实现网易新闻界面

前言

内容

问题

1. CSS颜色样式显示不出

重点：

最终成功的代码：

猜你喜欢