编程技术

Document

html+css作业5-新浪导航&网页新闻列表案例

css-新浪导航&网页新闻列表案例

前言

记录前端学习~

新浪导航案例

目标样式

新浪导航目标样式

代码

代码框架

代码框架

test.html

<!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;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .nav {
      height: 40px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
    }

    .nav .left ul {
      display: flex;
      text-align: center;
    }

    .nav .left ul li {
      width: 80px;
      line-height: 40px;
      font-size: 12px;
      color: #4c4c4c;
    }

    .nav .left li:hover {
      background-color: #edeef0;
      color: #fa9100;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="left">
      <ul>
        <a href="#">
          <li>新浪导航</li>
        </a>
        <a href="#">
          <li>新浪导航</li>
        </a>
        <a href="#">
          <li>新浪导航</li>
        </a>
        <a href="#">
          <li>新浪导航</li>
        </a>
      </ul>
    </div>
  </div>
</body>
</html>

网页新闻列表案例

目标样式

网页新闻列表目标样式

代码

代码框架

代码框架

test.html

<!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;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .box {
      width: 500px;
      height: 400px;
      border: 1px solid #ccc;
    }

    .title {
      width: 438px;
      margin-top: 36px;
      margin-left: 30px;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
      font-size: 15px;
    }

    .content {
      width: 438px;
    }

    .content li {
      width: 438px;
      height: 51px;
      margin-left: 30px;
      padding-left: 30px;
      border-bottom: 1px dashed #ccc;
      line-height: 50px;
    }

    .content li a {
      font-size: 18px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="title">
      <h1>最新文章/New Articles</h1>
    </div>
    <div class="content">
      <ul>
        <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
        <li><a href="#">体验javascript的魅力</a></li>
        <li><a href="#">jquery世界来临</a></li>
        <li><a href="#">网页设计师的梦想</a></li>
        <li><a href="#">jquery中的链式编程是什么</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

总结

  • list-style: none 去除 li 标签的小圆点
  • ①没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高；②加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整