mercykillerannimal

前端练习-网易新闻列表-03 

<!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: antiquewhite;
    }
    .new_box{
      margin-top: 10px;
      width: 300px;
      height: 600px;
      background-color: white;
      margin-left: 50%;
      
      border-top: 1px grey solid;
    }
    .new_h2{
      display: inline-block;
      height: 40px;
      border-top: 1px red solid;
      margin-top: -1px;
      margin-bottom: 5px;
      

    }
    .new_h2 a{
      text-decoration: none;
      /* 去除下划线 */
      color: black;
      line-height: 40px;
      font-weight: bold;
      /* 设置文字加粗效果 */
    }
    .new_img img{
      height: 150px;
      /* 给图片设置宽度以免下面的元素上来*/
    }
    .new_img h2 {
      
      margin-top: -30px;
      color: aliceblue;
      margin-left: 20px;
      margin-bottom: 30px;
  
      font-weight: bold;
    }
    .ul_style{
      margin-top: 20px;
      /* 设置上外边距 */
      /* padding-left: 17px; */
      /* 设置左侧padding */
      /* list-style: circle;
      设置项目符号 */
    }
    .ul_style li::before{
      content: '■';
      /* 用伪元素在每个li前面项目符号 */
      color: rgb(182, 182, 182);
      font-size: 12px;
      margin-right: 4px;
      
    }
    .ul_style li{
      margin-top: 7px;
    }
    .ul_style a{
      color: rgb(116, 116, 116);
      text-decoration: none;
      /* 取消下划线 */
      
      /* 加粗文字 */

    }
    /* 设置超链接移入的效果 */
    .ul_style a:hover{
      color: red;
    }
    
  </style>
</head>
<body>
  <!-- 创建新闻的容器 -->
  <div class="new_box">
    <h2 class="new_h2">
      <a href="">体育</a>
    </h2>
    <!-- 创建一个装图片的容器 -->
    <div class="new_img">
      <img src="./img/02/1.jpg" alt="">
      <h2>费德勒首负油米，扶额摇头不满发挥</h2>
    </div>
    <ul class="ul_style">
      <li> 
        <a href="">乔治</a> 
      </li>
      <li>
        <a href=""> 格林：</a> 
      </li>
      <li>
        <a href="">塔克4000双鞋</a> 
      </li>
      <li>
        <a href="">CBA下赛季新赛制：</a>
       </li>
    </ul>


  </div>
</body>
</html>

 

导航