（HTML学习）MDN测验——Mozilla 醒目页面

最新推荐文章于 2024-09-10 14:15:01 发布

juice会blue

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量186

点赞数

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

本文链接：https://blog.csdn.net/ED_LAI/article/details/128884932

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

总结

新元素
	1. <meta name="viewport" content="width=device-width">设定窗口尺寸、
	2. <iframe>外部嵌入 
			1. width height
			2. scrolling="no"不显示滚动条
			3. frameborder
			4. framespace
			5. allowfullscreen
	3. 响应式图片
			1. <img>——srcset
			2. <img>——sizes
			3. <picture>——<source> media（类似于sizes） srcset
css样式属性
	1. margin 外边距 0 auto; margin-top
	2. padding内边距
	3. line-height
	4. font-family
	5. font-size
	6. background 可利用url本地/外部引入背景
	7. background-color
	8. width:100%
	9. max-width: 1200px
	10. position:absolute relative
	11. right left top
	12. float-left
	13. clear:清除浮动 left both
	14. box-shadow	为框架添加阴影效果 inset添加的是内部阴影
	15. display 设置元素是否被视为块或者内联元素以及用于子元素的布局

代码

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>mozilla宣传主页</title>
    <!--引用网页字体样式-->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC" rel="stylesheet" type='text/css'>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <h1>mozilla</h1>
      <img src="images/firefox-logo120.png" alt="Firefox logo">
    </header>

    <main>
      <article>
        <iframe src="https://player.bilibili.com/player.html?aid=3303261&cid=5221343&page=2" width="400" height="225" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
        <h2>Rocking the free web</h2>
        
        <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的 技术人员、思考者、建造者。我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>

        <p>更多精彩信息，敬请点击下方图片。<a href="https://www.flickr.com/photos/mathiasappel/21675551065/">小熊猫照片</a>由 Mathias Appel 拍摄</p>
      </article>
      <div class="further-info">
        <a href="https://www.mozilla.org/zh-CN/firefox/new/">
          <img src="images/firefox-logo400.png" 
                srcset="images/firefox-logo120.png 120w,
                        images/firefox-logo400.png 400w" 
                sizes="(max-width: 480px)120px,
                      400px"  
                alt="下载 firefox">
        </a>
        <a href="https://www.mozilla.org/">
          <img src="images/mozilla-dinosaur400.png"
                srcset="images/mozilla-dinosaur120.png 120w,
                        images/mozilla-dinosaur400.png 400w"
                sizes="(max-width: 480px) 120px
                      400px"
                alt="mozilla更多信息">
        </a>
        <a href="https://addons.mozilla.org/zh-CN/firefox/">
          <img src="images/firfox-addomd400.jpg"
                srcset="images/firefox-addons120.jpg 120w,
                      images/firefox-addons400.jpg 400w"
                sizes="(max-width: 480px) 120px,
                      400px"
                alt="使用扩展，使firefox更具个性化">
        </a>
        <a href="https://developer.mozilla.org/zh-CN/">
          <img src="images/mdn.svg" alt="访问mdn，学习web开发">
        </a>
        <div class="clearfix"></div>
      </div>

      <div class="red-panda">
        <picture>
          <source media="(max-width: 600px)"
                  srcset="images/red-panda-portrait-small.jpg">
          <img src="images/red-panda-landscape.jpg" alt="一只小熊猫">
        </picture>
      </div>
      
    </main>

  </body>
</html>

CSS代码

/* header、body 设置 */
html {
  font-family: 'Noto Sans SC', sans-serif;
  background: url(../images/pattern.png);
}
body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  position: relative;
}

/* 标题样式 */
header {
  height: 150px;
}
header img {
  width: 100px;
  position: absolute;
  right: 32.5px;
  top: 32.5px;
}
h1 {
  font-size: 50px;
  line-height: 140px;
  margin: 0 0 0 32.5px;
}

/* 主体区段和视频样式 */
main {
  background: #ccc;
}
article {
  padding: 20px;
}
h2 {
  margin-top: 0;
}
p {
  line-height: 2;
}
iframe {
  float: left;
  margin: 0 20px 20px 0;

  max-width: 100%;
}

/* 更多信息链接 */
.further-info {
  clear: left;
  padding: 40px 0;
  background: #c13832;
  box-shadow: inset 0 3px 2px rgba(0,0,0,0.5),
              inset 0 -3px 2px rgba(0,0,0,0.5);
}
.further-info a {
  width: 25%;
  display: block;
  float: left;
}
.further-info img {
  max-width: 100%;
}
.clearfix {
  clear: both;
}

/* 小熊猫图片 */
.red-panda img {
  display: block;
  max-width: 100%;
}