“Html5 语义元素案例:WordPress博客”的版本间的差异
来自CloudWiki
(没有差异)
|
2019年12月19日 (四) 04:11的版本
网页效果图
网页布局图
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> header{width:100%; height:50px; background:#333;} .main{width:80%; margin:0 auto; height:600px;} .m1{width:70%; height:600px; background:#060; float:left;} .m1-1{width:100%; height:300px; background:#09C;} .m1-2{width:100%; height:150px; background:#963;} .m1-3{width:100%; height:150px; background:#09C;} .m2{width:30%; height:600px; background:#9F0; float:left;} .m2-1{width:100%; height:200px; background:#F93;} .m2-2{width:100%; height:200px; background:#369;} .clear{clear:both;} footer{height:100px; width:100%; background:#CCC;} </style> <title>无标题文档</title> </head> <body> <header></header> <div class="main"> <div class="m1"> <div class="m1-1"></div> <section class="m1-2"></section> <section class="m1-3"></section> </div> <aside class="m2"> <section class="m2-1"></section> <section class="m2-2"></section> </aside> <div class="clear"></div> </div> <footer>written by flyhorse</footer> </body> </html>