瑞卒勿攻😂 627641524
关注数: 185 粉丝数: 317 发帖数: 21,315 关注贴吧数: 155
个人代码抄写记录 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5</title> <link rel="stylesheet" href="html5.css"> </head> <body> <header> <h1>Header</h1> <h2>Subtitle</h2> <h4>HTML5 Rocks!</h4> </header> <div id="container"> <nav> <h3>Nav</h3> <a href="http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.example.com&urlrefer=2436d2303dec60cc3543329ef1590253">Link 1</a> <a href="http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.example.com&urlrefer=2436d2303dec60cc3543329ef1590253">Link 1</a> <a href="http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.example.com&urlrefer=2436d2303dec60cc3543329ef1590253">Link 1</a> </nav> <section> <article> <header> <h1>Artilce Header</h1> </header> <p>Lorem jpsum dolor HTML5 nunc aut nunquam sit amet.consectertru adpouscuing elit.Vivamus at est eris ,vie frindlilla urna.</p> <p>Per inceptos himenaeoisl.Quisque feulai ,jit at veliculs pelimeteqqp,turwj lorm dictum nunc.</p> <footer> <h2>Artilce Footer</h2> </footer> <article> <header> <h1>Artilce Header</h1> </header> <p>Lorem jpsum dolor HTML5 nunc aut nunquam sit amet.consectertru adpouscuing elit.Vivamus at est eris ,vie frindlilla urna.</p> <p>Per inceptos himenaeoisl.Quisque feulai ,jit at veliculs pelimeteqqp,turwj lorm dictum nunc.</p> <footer> <h2>Artilce Footer</h2> </footer> </article> </section> <aside> <h3>Aside</h3> <p>Lorem jpsum dolor HTML5 nunc aut nunquam sit amet.consectertru adpouscuing elit.Vivamus at est eris ,vie frindlilla urna.</p> </aside> <footer> <h2>Footer</h2> </footer> </div> </body> </html> css文件: body{ background-color:#CCCCCC; font-family:Geneva,Arial,Helvetica,sans-serif; margin:0px auto; max-width:900px; border:solid; border-color:#FFFFFF; } header{ background-color:#F47031; display:block; color:#ffffff; text-align:center; } header h2{ margin:0px; } h1{ font-size:72px; margin:0px; } h2{ font-size:24px; margin:0px; text-align:center; color:#F47D31; } h3{ font-size:18px; margin:0px; text-align:center; color:#F47D31; } h4{ color:F47031; background-color:#fff; box-shadow:2px 2px 20px #888l; transform:rotate(-45deg); position:absolute; padding:0px 150px; top:50px; left:-120px; text-align:center; } nav{ display:block; width:25%; float:left; } nav a:link, nav a:visited{ display:block; border-bottom:3px solid #fff; padding:10px; text-decoration:none; font-weight:bold; margin:5px; } nav a:hover{ color:white; background-color:F47031; } nav h3{ margin:15px; color:white; } #container{ background-color:#888; } section{ display:block; width:50%; float:left; } article{ background-color:#eee; display:blick; margin:10px; padding:10px; border-radius:10px; box-shadow:2px 2px 20px #888; transform:rotate(-10deg); } article header{ border-radius:10px; padding:5px; } article footer{ border-radius:10px; padding:5px; } aside{ display:block; width:25% float:left; } aside h3{ margin:15px; color:white; } aside p{ margin:15px; color:white; font-weight:bold; font-style:italic; } footer{ clear:both; display:block; background-color:#F47031; color:#ffffff; text-align:center; padding:15px; } footer h2{ font-size:14px; color:white; } /* links */ a{ color:#F47031; } a:hover{ text-decoration:underline; }
首页 5 6 7 8 9 10 下一页