<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML、CSS教学</title> <link rel="stylesheet" href="css/style.css"></head><body><div class="wrap"> <div class="header"> <a href="#" class="logo"> <img src="img/logo.png" height="107" width="250" alt=""> </a> <ul class="topmenu"> <li><a href="#">关于我们</a></li> <li><a href="#">产品介绍</a></li> <li><a href="#">Q＆A</a></li> </ul> </div> <div class="main"> <div class='menu'> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi debitis porro voluptates, eius alias cumque praesentium veritatis accusamus quidem consectetur ex non omnis nobis expedita placeat aut repudiandae illum reiciendis. </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi debitis porro voluptates, eius alias cumque praesentium veritatis accusamus quidem consectetur ex non omnis nobis expedita placeat aut repudiandae illum reiciendis. </div> <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, omnis. </div> <div class="clearfix"></div> </div> <div class="footer"></div></div></body></html>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}.wrap{ margin: 0 auto; width: 1000px;}.header{ height: 150px; background: red; margin-bottom: 20px;}.logo{ float: left}.topmenu{ float: right; margin-top: 50px; margin-right: 20px; }.topmenu li{ float: left; margin-right: 20px;}.topmenu a{ color: #fff; text-decoration: none;}.main{ margin-bottom: 20px;}.menu{ width: 180px; background: black; color: #fff; float: left; padding: 10px 10px 10px 10px; margin-right: 10px;}.content{ width: 680px; margin-right: 10px; background: pink; height: 50px; float: left;}.aside{ width: 100px; float: left; background: blue; color: #fff}.clearfix{ clear: both;}.footer{ height: 80px; background: gray;}
用户投稿
微信扫一扫打赏
支付宝扫一扫打赏
