1.新闻网页

给出内容

《自然》评选改变科学的10个计算机代码项目 2077年01月28日14:58 新浪科技收藏本文

2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。

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

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

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

题目要求：
解答代码：

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

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

代码效果：

2.平衡车居中

给出设计图
解答代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
           .yb{
               background-color: #f5f5f5;
               height: 300px;
               width: 234px;
               margin: 0 auto;
               text-align: center;
           }
           img{
               width: 160px;
           }
           .yphc{
               height: 25px;
               font-size: 14px;
           }
           .ycnr{
                height: 30px;
                font-size: 12px;
                color: #cccccc;
           }
           .y19{
               color: #ffa500;
               font-size: 14px;
           }  
    </style>
</head>
<body>
    <div class="yb">
        <img src="car.jpg" alt="" title="">
        <div class="yphc">
            九号平衡车
        </div>
        <div class="ycnr">
            成年人的玩具
        </div>
        <div class="y19">
            1999元
        </div>
    </div>
</body>
</html>

代码效果：

3.百度搜索页

给出要求图
解答代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>yh野良</title>
    <style>
        a{
            font-size: 18px;
            font-family: Arial, sans-serif;
            /* 这里我通过F12检查百度页面，得到的颜色值 */
            color: rgb(49, 94, 251);
            /* 去除超链接的下划线 */
            text-decoration:none;                            
        }
        /* em强调标签,默认是斜体，这里我改变了他的字体样式为正常 */
        em{
            color: red;
            font-style: normal;
            font-family: Arial, sans-serif;
          }
        p{
            font-family: Arial, sans-serif;
            font-size: 13px;
        }
        span{
            font-family: Arial, sans-serif;
            font-size: 13px;
            color: seagreen;
        }
        span1{
            font-family: Arial, sans-serif;
            font-size: 13px;
            color: gray;
        }
           
    </style>
</head>
<body>
     <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">
        <u>零基础开始学 <em>Web 前端</em>开发，有什么建议吗?-知乎</u>
     </a>
     <p>
        <em>Web 前端</em>开发技术主要包括三个要素:HTMLCSS和JavaScript，它要求前端开发工程师不仅要掌握基本的<em>Web前端</em>开发技术，网站性能优化，SEO和服务器端的基础..
     </p>
     <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">
        <span>https://www.zhihu.com/question...</span><img src="v2.png"><span1>百度快照</span1>
     </a>
    <p>
    <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">
        <u><em>Web 前端</em>技术论坛所有讨论帖-ITeve论坛频道</u>
    </a>
    <p>
        <em>Web 前端</em>技术版面讨论，JavaScript编程、AJAX开发、UI界面设计、CSS分类:JavaScript AJAX EXT JQuery prototypeCSS 界面设计...
    </p>
    <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">
        <span>www.iteye.com/forums/b...</span><img src="v2.png"><span1>百度快照</span1>
    </a>
    
</body>
</html>

代码效果：

4.百度首页

给出要求图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            .yb{
                height: 1000px;
                width: 1000px;
                margin: 0 auto;
                text-align: center;
            }
            a{
                color: rgb(49, 94, 251);
            }
    </style>
</head>
<body>
       <div class="yb">
           <img src="logo.gif">
           <p>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">新闻</a>
           <span>网页</span>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">贴吧</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">知道</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">音乐</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">图片</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">视频</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">地图</a>
           <p>
           <input type="text" name="" id="" placeholder="" size="50">&nbsp;<input type="reset" value="百度一下">
           <p>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">百科</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">文库</a>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">hao123</a>
           <span>|</span>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">更多>></a>
           <p>
           <br>
           <img src="icon.jpg">
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">百度地图带你吃喝玩乐，全心全意为人民服务</a>
           <p>
           <br>
           <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">把百度设为主页 安装百度卫士</a>
           <p>
            <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">加入百度推广</a>
            <span>|</span>
            <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">搜索风云榜</a>
            <span>|</span>
            <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">关于百度</a>
            <span>|</span>
            <a href="https://blog.csdn.net/weixin_46065653?type=blog" target="_blank">About Baidu</a>
            <p>
            <span>©2022 Baidu使用百度前必读京ICP证030173号</span>
       </div>   
</body>
</html>

代码效果：
仅供参考

本文含有隐藏内容，请开通VIP 后查看

HTML练习

目录

1.新闻网页

2.平衡车居中

3.百度搜索页

4.百度首页

网站公告

今日签到

热门文章

最新发布