20、网易新闻列表

最新推荐文章于 2022-12-10 09:07:46 发布

五仁卤鸡翅

最新推荐文章于 2022-12-10 09:07:46 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106922679

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
网易新闻列表

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

网易新闻列表

在这里插入图片描述
仿写如上所示列表

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
    // 统一去除下划线
    a{
        text-decoration:none
    }
    .news-wrapper{
        width:300px;
        height:358px;
        // 设置居中
        margin:0px auto;
        // 设置上边框，注意修改高度，保持盒子定高
        border-top：1px solid #ddd;
    },
    .news-title{
        // 为了上边框和文字宽度一致，需要将h2转换为行内块元素
        display:inline-block
        // 设置高度
        height:30px;
        // 设置上边框
        border-top:1px red solid;
        // 通过margin-top将h2元素上移
        margin-top:-1px;
        // 设置padding-top，让超链接下移10元素,同时注意高度被拉长了
        // 要减去10
        padding-top:10px;
    }
    /* 设置title中超链接的样式 */
    .news-title a{
        text-decoration:none;
        color:black;
        // 设置加粗效果
        font-weight:bold;
       
        
    }
    // 设置图片容器高度，避免下面容器顶上来
    .news-img{
       height:150px 
    }
    .new-img .img-title{
        //设置字体颜色
        color:#fff
        // 向上移动文字
        margin-top:-30px
        // 设置加粗
        font-weight:bold；
        // 左侧有一段距离
        padding-left:30px;
        
    }
    // 设置新闻列表
    .news-list{
        // 设置上外边距
        margin-top:20px;
        // 设置左侧外边距
        padding-left:14px;
    }
    .news-list li{
        margin-bottom:17px
    }
    .news-list li a{
        // 设置字体大小
        font-size:16px;
        color:#666;
        
    }
    // 通过before伪元素，为每个li添加一个项目符号
    .news-list li::before{
        content:'.';
        color:red;
        font-size:12px;
        margin-right:10px;
    }
    
    // 设置超链接鼠标移入样式
    .news-list li a:hover{
        color:red
    }
    
         
    </style>
</head>
<body>
 创建新闻列表外侧的容器
<div class="news-wrapper">
   创建一个标题标签
   <h2 class="news-title">
     <a href="#">体育</a>
   </h2>
   // 创建图片的容器
   <div class="news-img">
       <a href="#">
        <img src="./img/03/1.jpg" alt="">
        <h3 class="img-title">
            费德勒首负迪米，扶额头不满发挥
         </h3>
       </a>
   </div>
   <!-- 新闻列表 -->
   <ul class="news-list">
     <li>
       <a href="#">乔治1</a> 
     </li>
     <li>
       <a href="#">乔治2</a> 
     </li>
     <li>
       <a href="#">乔治3</a> 
     </li>
     <li>
       <a href="#">乔治4</a> 
     </li>
   </ul> 
</div>


</body>
</html>