html+css作业3-新闻网页&卡片居中_卡片居中小郭-CSDN博客

本文链接：https://blog.csdn.net/Hola__SUN/article/details/133772636

css-新闻网页&卡片居中

0 前言
1 新闻网页
- 目标样式
- 代码
2 卡片居中
- 目标样式
- 代码
总结

0 前言

记录前端学习~

1 新闻网页

目标样式

新闻网页样式

代码

文件结构

文件结构

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>
    .box {
      width: 800px;
    }

    .time {
      color: grey;
    }

    .source {
      color: skyblue;
      font-weight: 700;
    }
    i {
      font-style: normal;
    }

    a {
      text-decoration: none;
    }

    h1,
    .info {
      text-align: center;
    }

    .content {
      text-indent: 2em;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>《自然》评选改变科学的10个计算机代码项目</h1>
    <p class="info"><i class="time">2077年01月28日14:58</i> <i class="source">新浪科技</i> <a href="#">收藏本文</a></p>
    <hr>
    <p class="content">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
    <p class="content">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
    <p class="content">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
    <p class="content">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
  </div>
</body>
</html>

2 卡片居中

目标样式

卡片居中样式

代码

文件结构

在这里插入图片描述

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>
    body {
      background-color: #f5f5f5;
    }

    .box {
      width: 234px;
      height: 300px;
      background-color: #fff;
      text-align: center;
    }

    .pic img {
      width: 160px;
    }

    .product {
      height: 25px;
      font-size: 14px;
    }

    .info {
      height: 30px;
      font-size: 12px;
      color: #ccc;
    }

    .price {
      font-size: 14px;
      color: #ffa500;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="pic">
      <img src="./images/car.jpg" alt="">
    </div>
    <div class="product">九号平衡车</div>
    <div class="info">成年人的玩具</div>
    <div class="price">1999元</div>
  </div>
</body>
</html>