自学前端第十二天 :页面小练习

最新推荐文章于 2024-07-10 23:56:24 发布

AKA俄语人Лев

最新推荐文章于 2024-07-10 23:56:24 发布

阅读量344

点赞数

分类专栏：前端HTML+CSS基础文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_47592060/article/details/116385122

版权

博客内容介绍了自学前端的第十二天，作者进行了小页面的综合练习，分别按照老师的指导和自己的理解创建了两个版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小页面综合练习:(老师版)

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>homework 0612</title>
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }


    a {
    
      text-decoration: none;
    }

    a:hover {
    
      text-decoration: underline;
    }

    .fz12 {
    
      font-size: 12px;
    }

    .fz14 {
    
      font-size: 14px;
    }

    .c666 {
    
      color: #666;
    }

    .lh24 {
    
      line-height: 24px;
    }

    .lh36 {
    
      line-height: 36px;
    }

    .tl {
    
      text-align: left;
    }

    .tr {
    
      text-align: right;
    }

    .indent2x {
    
      text-indent: 2em;
    }

    .mr20 {
    
      margin-right: 20px;
    }

    .mr12 {
    
      margin-right: 12px;
    }

    .cb60 {
    
      color: #b60c0c;
    }

    .c045 {
    
      color: #0454a7;
    }

    /* 
    .hit {
      font-size: 12px;
      color: #666;
      line-height: 36px;
    } */

    .container {
    
      width: 640px;
      margin: 100px auto;
      padding: 10px 20px 30px;
      border: 1px solid #bbb;
      border-top: 3px solid #0454a7;
      font-size: 14px;
      line-height: 24px;
      text-align: center;
    }

    .header {
    
      border-bottom: 1px solid #ccc;
    }

    .header>h2 {
    
      font-size: 22px;
      line-height: 35px;
      color: #333;
      font-weight: 400;
    }


    .inset-pic {
    
      width: 558px;
    }

    .content {
    
      text-align: left;
      padding: 0 20px;

    }

    .content>p {
    
      margin-bottom: 22px;
    }

    .inter-news {
    
      width: 560px;
      padding: 10px;
      margin: 0 auto 20px;
      border: 1px dashed #666;
    }

    .keywords>a {
    
      color: #0454a7;
    }

    .bottom {
    
      display: inline-block;
      width: 518px;
      height: 28px;
      border: 1px solid #0454a7

最低0.47元/天解锁文章