五分钟实现前端经典网站布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>--主页</title> <link rel="stylesheet" href="./zy.css"> <style> *{ margin: 0; padding: 0; text-decoration: none; list-style: none; } .main{ max-width: 1000px; margin: auto; } .main img{ margin-right: 20px; height: 300px; width: 800px; } .header,.nav,.container,.footer{ float: left; width: 100%; box-sizing: border-box; } .header{ /* background: #ccc; */ padding: 20px; text-align: center; } .nav{ height: 35px; background: #333; opacity: 0.5; } .nav a { color: #fff; padding: 10px 20px ; display: inline-block; } .nav a:hover{ background: #bbb; color: #000; } /* 让左右两边都固定宽度200 */ .lside { width: 200px; float: left; } .rside{ width: 200px; float: right; } /* 所以中间拦要加左右边距 */ .content{ margin: 0px 205px; } .lside,.rside,.content{ padding: 5px; /* 去掉内边距的影响 */ box-sizing: border-box; } .footer{ padding: 10px; background: 10px; background: #ccc; text-align: center; } @media screen and (max-width:700px){ .lside,.rside,.content{ width: 100%; margin: 0px; } } </style> </head> <body> <div class="main"> <div class="header"> <img src="../img/ptmyumem.bmp" alt=""> </div> <div class="nav"> <a href="">首页</a> <a href="">图文</a> <a href="">验机</a> <a href="">参数</a> </div> <div class="container"> <div class="lside"> <h2>我是左边栏</h2> <p>我是内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 </p> <hr style="color: #bbb;"> <div> <h2>新品暗影骑士</h2> <p> 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 </p> </div> </div> <div class="rside"> <h2>我是右边栏</h2> <p>我是右边栏内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 </p> </div> <div class="conten"> <h2>我是中间栏</h2> <p>我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 我是中间栏的内容我是中间栏的内容我是中间栏的内容 </p> </div> </div> <div class="footer"> <p>我是网页的底部,主要放版权声明,备案信息,联系方式,友情链接等。</p> </div> </div> </body> </html>
所使用的编程工具:vs code
前端爱好者 发一些自己做的小玩意。