前端学习之CSS-2-综合案例

最新推荐文章于 2024-09-16 13:36:19 发布

吃完这顿就减肥~

最新推荐文章于 2024-09-16 13:36:19 发布

阅读量300

点赞数 5

分类专栏： CSS初学文章标签：学习前端 css

本文链接：https://blog.csdn.net/m0_74412253/article/details/135942710

版权

CSS初学专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讲述了《自然》杂志评选出的改变科学研究的10个关键计算机代码项目，强调了计算机在现代科学中的重要性，如事件视界望远镜的黑洞图像生成，以及编程语言的发展历史。同时，提到了迈克尔·莱维特关于计算能力与思考的评论。

摘要由CSDN通过智能技术生成

新闻网页案例

1.题目

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻网页</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            margin: 0 auto;
            font-family: 微软雅黑;
        }
        /* 文字水平居中 */
        .center{
            text-align: center;  
        }
        .color1{
            color: #808080;
        }
        .color2{
            color: #87ceeb;
            /* “新浪科技”加粗 */
            font-weight: 700;  
        }
        /* 去掉超链接的下划线 */
        a{
            text-decoration: none;
        }
        /* 首行缩进2字符 */
        .suojin{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58</span>
            <span class="color2">新浪科技</span>
            <a href="#">收藏本文</a>
        </p>
        <hr>
        <p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片，研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>

        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·菜维特因“为复杂化学系统创造了多尺度横型”与男两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电骑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。</p>

        <p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机款件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》 (Nature) 志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>

        <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的，后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，便得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约输·巴克斯及其团队在加州圣何塞的1BM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指今来编程，例X3+5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
    </div>
</body>
</html>

卡片居中案例

1.题目

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>效果图</title>
    <style>
        body{
            background-color: #f5f5f5;
            font-family: 微软雅黑;
        }
        .goods{
            width: 234px;
            height: 300px;
            background-color: #ffffff;
            /* 标签div居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            font-size: 12px;
            line-height: 30px;
            color: #cccccc;
        }
        .money{
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="goods">
        <img src="./car.png" alt="car" width="160px">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="money">1999元</div>
    </div>
</body>
</html>