<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, width=device-width,initial-scale=1.0" /> <title></title> <style> body { margin: 0; } header { width: 100%; height: 50px; background: #AEFEEE; } header h4 { display: inline; } aside { width: 20%; height: 540px; background: #708090; float: left; } section { width: 80%; height: 540px; background: #D8BFD8; float: left; overflow: auto; } footer { width: 100%; height: 50px; background: green; clear: left; } figure { padding: 0; } img { max-width: 70%; } ul { list-style-type: none; } footer li { display:inline; } </style> </head> <body> <header> <hgroup> <img src="../Images/bb.png" width="30px"/> <h4>移动端页面练习</h4> </hgroup> </header> <aside> <nav> <ul> <li> <a href=""> <img src="../Images/bb.png" width="30px"/> </a> </li> <li> <a href=""> <img src="../Images/bb.png" width="30px"/> </a> </li> <li> <a href=""> <img src="../Images/bb.png" width="30px"/> </a> </li> </ul> </nav> </aside> <section> <figure> <img src="../Images/bb.png" alt="" width="45%" /> <img src="../Images/bb.png" alt="" width="45%" /> </figure> <figcation>衣服</figcation> <figure> <img src="../Images/bb.png" alt="" width="40%" /> <img src="../Images/bb.png" alt="" width="40%" /> </figure> <figcation>衣服</figcation> <figure> <img src="../Images/bb.png" alt="" width="40%" /> <img src="../Images/bb.png" alt="" width="40%" /> </figure> <figcation>衣服</figcation> <figure> <img src="../Images/bb.png" alt="" width="40%" /> <img src="../Images/bb.png" alt="" width="40%" /> </figure> <figcation>衣服</figcation> <figure> <img src="../Images/bb.png" alt="" width="40%" /> <img src="../Images/bb.png" alt="" width="40%" /> </figure> <figcation>衣服</figcation> </section> <footer> <nav> <ul> <li> <a href=""> <img src="../Images/bb.png" width="30px"/> </a> </li> <li> <a href=""> <img src="../Images/bb.png" width="30px"/> </a> </li> <li> <a href=""> <img src="../Images/bb.png" width="30px"/> </a> </li> </ul> </nav> </footer> </body> </html>
