“Html5 语义元素案例：WordPress博客”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“==网页效果图== 600px 源网页：https://www.suxing.me ==网页布局图== *600px <nowiki><!DOCTYPE html> <h…”）
 
 
第9行： 第9行：
  
  
−
  <nowiki><!DOCTYPE html>
+
  <nowiki><!DOCTYPE>
 +
<html>
 
<head>
 
<head>
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
 
<style type="text/css">
 
<style type="text/css">
 
header{width:100%;
 
header{width:100%;
 
         height:50px;
 
         height:50px;
 
background:#333;}
 
background:#333;}
 +
nav{width:100%;height:50px;background:#999;}
 
.main{width:80%;
 
.main{width:80%;
 
       margin:0 auto;
 
       margin:0 auto;
−
  height:600px;}
+
  height:auto;}
 +
 
.m1{width:70%;
 
.m1{width:70%;
−
     height:600px;
+
     height:auto;
 
background:#060;
 
background:#060;
 
float:left;}
 
float:left;}
第28行： 第31行：
 
.m1-2{width:100%;
 
.m1-2{width:100%;
 
       height:150px;
 
       height:150px;
−
  background:#963;}
+
  background:#963;
 +
  border:1px solid black;
 +
  margin:10px 0;}
 
.m1-3{width:100%;
 
.m1-3{width:100%;
 
       height:150px;
 
       height:150px;
 
  background:#09C;}
 
  background:#09C;}
 
.m2{width:30%;
 
.m2{width:30%;
−
     height:600px;
+
     height:auto;
 
background:#9F0;
 
background:#9F0;
 
float:left;}
 
float:left;}
 
.m2-1{width:100%;
 
.m2-1{width:100%;
−
       height:200px;
+
       height:100px;
−
  background:#F93;}
+
  background:#F93;
 +
  border:1px solid black;
 +
  margin:10px 0;}
 
.m2-2{width:100%;
 
.m2-2{width:100%;
 
       height:200px;
 
       height:200px;
第46行： 第53行：
 
         width:100%;
 
         width:100%;
 
background:#CCC;}
 
background:#CCC;}
−
 
+
/*当页面的宽度在600px ~ 900px之间的时候，手机屏*/
 +
  @media screen and (max-width: 900px){
 +
  .m1 {
 +
  width:100%;
 +
  }
 +
  .m2 {
 +
  display:none;
 +
  }
 +
  }
 
</style>
 
</style>
 
<title>无标题文档</title>
 
<title>无标题文档</title>
第53行： 第68行：
 
<body>
 
<body>
 
         <header></header>
 
         <header></header>
 +
        <nav>
 +
                <a href="/html/">HTML</a> |
 +
                <a href="/css/">CSS</a> |
 +
                <a href="/js/">JavaScript</a> |
 +
                <a href="/jquery/">jQuery</a>
 +
</nav>
 +
       
 
         <div class="main">
 
         <div class="main">
−
             <div class="m1">
+
             <article class="m1">
 
                 <div class="m1-1"></div>
 
                 <div class="m1-1"></div>
 
                 <section class="m1-2"></section>
 
                 <section class="m1-2"></section>
−
                 <section class="m1-3"></section>
+
                 <section class="m1-2"></section>
−
              </div>
+
                <section class="m1-2"></section>
 +
            </article>
 
             <aside class="m2">
 
             <aside class="m2">
 
                 <section class="m2-1"></section>
 
                 <section class="m2-1"></section>
−
                 <section class="m2-2"></section>
+
                 <section class="m2-1"></section>
 +
                <section class="m2-1"></section>
 +
                <section class="m2-1"></section>
 +
                <section class="m2-1"></section>
 
             </aside>
 
             </aside>
 
             <div class="clear"></div>
 
             <div class="clear"></div>
 
           </div>
 
           </div>
−
         <footer>written by flyhorse</footer>
+
         <footer></footer>
 
</body>
 
</body>
 
</html></nowiki>
 
</html></nowiki>

2019年12月20日 (五) 06:16的最新版本

网页效果图

Web8-16.png

源网页：https://www.suxing.me

网页布局图

  • Web8-17.png


<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<style type="text/css">
header{width:100%;
        height:50px;
		background:#333;}
nav{width:100%;height:50px;background:#999;}
.main{width:80%;
      margin:0 auto;
	  height:auto;}
	 
.m1{width:70%;
    height:auto;
	background:#060;
	float:left;}
.m1-1{width:100%;
      height:300px;
	  background:#09C;}
.m1-2{width:100%;
      height:150px;
	  background:#963;
	  border:1px solid black;
	  margin:10px 0;}
.m1-3{width:100%;
      height:150px;
	  background:#09C;}
.m2{width:30%;
    height:auto;
	background:#9F0;
	float:left;}
.m2-1{width:100%;
      height:100px;
	  background:#F93;
	  border:1px solid black;
	  margin:10px 0;}
.m2-2{width:100%;
      height:200px;
	  background:#369;}
.clear{clear:both;}	 
footer{height:100px;
        width:100%;
		background:#CCC;}
 /*当页面的宽度在600px ~ 900px之间的时候，手机屏*/
  @media screen and (max-width: 900px){
	  .m1 {
		  width:100%;
	  }
	  .m2 {
		  display:none;
	  }
  }
</style>
<title>无标题文档</title>
</head>

<body>
        <header></header>
        <nav>
                <a href="/html/">HTML</a> |
                <a href="/css/">CSS</a> |
                <a href="/js/">JavaScript</a> |
                <a href="/jquery/">jQuery</a>
		</nav>
        
        <div class="main">
            <article class="m1">
                <div class="m1-1"></div>
                <section class="m1-2"></section>
                <section class="m1-2"></section>
                <section class="m1-2"></section>
            </article>
            <aside class="m2">
                <section class="m2-1"></section>
                <section class="m2-1"></section>
                <section class="m2-1"></section>
                <section class="m2-1"></section>
                <section class="m2-1"></section>
            </aside>
            <div class="clear"></div>
          </div>
        <footer></footer>
</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Html5_语义元素案例：WordPress博客&oldid=15539”