h5标准布局
文章目錄
- 效果圖
- 結構代碼
- 效果實現
效果圖
HTML5標準布局
結構代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body> <article><header><h3>HTML5頁面-header</h3><nav><ul><li><a href="#">首頁</a></li><li><a href="#">百度</a></li><li><a href="#">搜狗</a></li><li><a>nav</a></li></ul></nav></header><section><b>section</b><article><b>article</b><header><b>header</b></header><p><b>p標簽pppppp</b></p><footer><b>footer</b></footer></article></section><aside><b>aside</b></aside><footer><b>footer</b></footer></article> </body> </html>效果實現
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <style type="text/css">h3{background-color:#0611D5;padding: 15px;text-align: center;}nav{float:left;background-color:#5FA08F;width: 100%;margin-top:-19px;}nav ul{list-style-type: none;display:flex;}nav ul li{float:left;border: solid 2px;background-color: #09CCEC;margin-left:90px;padding-left:12px;padding-right:12px;}nav ul li a{color:red;}section{height:300px;width:60%;margin-top:10px;margin-left:8px;background-color:#0611D5;float:left;}aside{height:300px;width:36%;margin-top:10px;margin-right:8px;background-color:#0611D5;float:right;}article{height:83%;width:97%;background-color:#0611D5;border: solid white 1px;margin-left:5px;margin-top:10px;padding-top:10px;}</style> <body> <article style="background-color:#00ff14;width:50%;margin:auto;height:516px;position:relative;"><header style="padding:8px;"><h3>HTML5頁面-header</h3><nav><ul><li><a href="#">首頁</a></li><li><a href="#">百度</a></li><li><a href="#">搜狗</a></li><li><a>nav</a></li></ul></nav> </header><section style="text-align:center;padding-top:10px"><b>section</b><article><b>article</b><header style="background-color:#03f3b0;height:35px;margin:5px;padding-top:10px;border:solid 2px black"><b>header</b></header><p style="background-color:#03f3b0;height:105px;margin:5px;padding-top:10px;border:solid 2px black"><b>p標簽pppppp</b></p><footer style="background-color:#03f3b0;margin:5px;height:30px;padding-top:7px;border:solid 2px black"><b>footer</b></footer></article> </section><aside style="text-align:center;padding-top:10px"><b>aside</b></aside><footer style="text-align:center;background-color:#0611D5;height:50px;position:absolute;bottom:5px;width:98%;margin-left:8px;"><b>footer</b></footer></article> </body> </html>總結
- 上一篇： h5中的结构元素header、nav、a
- 下一篇： 在tomcat上部署项目，实现类似添加这