“Html5 语义元素案例:WordPress博客”的版本间的差异
来自CloudWiki
第9行: | 第9行: | ||
− | <nowiki><!DOCTYPE html> | + | <nowiki><!DOCTYPE> |
+ | <html> | ||
<head> | <head> | ||
− | <meta | + | <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: | + | height:auto;} |
+ | |||
.m1{width:70%; | .m1{width:70%; | ||
− | height: | + | 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: | + | height:auto; |
background:#9F0; | background:#9F0; | ||
float:left;} | float:left;} | ||
.m2-1{width:100%; | .m2-1{width:100%; | ||
− | height: | + | 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"> | ||
− | < | + | <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- | + | <section class="m1-2"></section> |
− | + | <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- | + | <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> | + | <footer></footer> |
</body> | </body> | ||
</html></nowiki> | </html></nowiki> |
2019年12月20日 (五) 06:16的最新版本
网页效果图
网页布局图
<!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>