FCC—一个简单的Tribute Page

项目要求：

需求 1： 此 app 中应存在一个 id="main" 的元素，页面上的所有元素都应置于这个元素中。

需求 2： 此 app 中应存在一个 id="title" 的元素，其中包含描述致敬页主题的字符串文本，如 "Dr. Norman Borlaug"。

需求 3： 此 app 中应存在一个 id="img-div" 的 div 元素。

需求 4： 在 img-div 元素内，应存在一个 id="image" 的 img 元素。

需求 5： 在 img-div 元素内，应存在一个相应的 id="img-caption" 的元素，其中包含对 img-div 中图像的描述文本。

需求 6： 此 app 中应存在一个 id="tribute-info" 的元素，其中应包含描述致敬页主题的内容文本。

需求 7： 此 app 中应存在一个 id="tribute-link" 的 a 元素，它应链接到一个包含有关致敬页主题额外信息的外部网页。 提示：你必须为 a 元素提供 target 属性，并将其属性值设置为 _blank（即 target="_blank"），这样才可以在新选项卡中打开链接。

需求 8： img 元素应相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。

需求 9： img 应在其父元素内居中。

实验内容：

    
        
        
        
    
    
        

            
比尔盖茨
            
一个在计算机等众多领域有着巨大成就的科学家
            

        
        

            
            
比尔盖茨的凡尔赛
            

                

比尔·盖茨（Bill Gates），全名威廉·亨利·盖茨三世，简称比尔或盖茨。1955年10月28日出生于美国华盛顿州西雅图，企业家、软件工程师、慈善家、微软公司创始人、中国工程院院士（外籍）。曾任微软董事长、CEO和首席软件设计师。
比尔·盖茨13岁开始计算机编程设计，18岁考入哈佛大学，1975年与好友保罗·艾伦一起创办了微软公司，比尔盖茨担任微软公司董事长、CEO和首席软件设计师。
比尔·盖茨1995-2007年连续13年成为《福布斯》全球富翁榜首富，连续20年成为《福布斯》美国富翁榜首富。2000年，比尔·盖茨成立比尔和梅琳达·盖茨基金会，2008年比尔盖茨宣布将580亿美元个人财产捐给慈善基金会 ，2014年比尔·盖茨辞去董事长一职 并重回世界首富。2015年9月29日，微软公司创始人盖茨凭借760亿美元净资产，连续第22年高居《福布斯》榜首 2017年11月，比尔·盖茨当选中国工程院外籍院士。2019年1月，入选美国杂志评选出“过去十年影响世界最深的十位思想家”。2020年2月26日，以7400亿元财富位列《2020胡润全球富豪榜》第3位。2020年3月13日，比尔·盖茨退出微软董事会。
北京时间2021年5月4日凌晨，比尔·盖茨与梅琳达·盖茨宣布结束长达27年的婚姻关系。5月17日，微软董事会决定，比尔·盖茨应当离开董事会 。8月2日，华盛顿金县高级法院的一份文件显示，比尔盖茨夫妇正式离婚 。2021年10月，以1,340亿美元财富位列《2021年度美国富豪榜》第4名。
            
        
        

            
点击此处 ，了解更多。
        
    

小Tip:

对于需求8:
img属于可替换元素（可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。注： 标签属于可替换元素，但它具有内置的宽高属性，所以可以设置独立的宽高。）
而这里要相对于父元素自动调整大小，无法用进行CSS直接处理。因此，要想实现图片对应父元素的宽度来自适应大小，需要先将img转化成块元素进行处理。

对于需求9：
块元素的水平居中往往这样自适应水平居中：margin:0px auto; (与 margin:auto; 效果相同)，而不用width描述。
参考博客：

https://www.cnblogs.com/telnetzhang/p/5565364.html