当前位置：首页 > Web开发 > 正文

230) ; padding-top : 150px ; } .left { width : 35% ; float :

2024-03-31 Web开发

导航使用position:fixed固定住

导航会脱离文档流，，不占据空间

导致下面的元素上移，因此需要将下面的元素的padding-top设置成导航的高度

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .header{ width:100%; height:50px; background:#333; color:#fff; text-align: center; line-height:50px; position:fixed; } .banner{ width:1200px; height:200px; margin:0 auto; background:#ccc; padding-top:50px; } </style> </head> <body> <div class="header">导航</div> <div class="banner">banner图</div> </body> </html>

技术图片

如果行高的单位是百分比，那么是基于当前字体尺寸的百分比行间距

经典的两列构造

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } .header{ width:100%; height:60px; background:#000; color:#fff; line-height:60px; position:fixed; } .logo img{ float:left; margin-left:20px; } ul{ list-style:none; float:right; margin-right:20px; } ul li{ float:left; margin-right:20px; } ul li a{ text-decoration: none; color:#fff; } .container{ width:100%; height:400px; background:rgb(173,216,230); padding-top:150px; } .left{ width:35%; float:left; padding-left:15%; } .right{ width:35%; float:right; padding-left:15%; } .left h1, .right h1{ font-size:20px; margin-bottom:10px; } .item{ height:40px; line-height:40px; } .item span{ background:rgb(201,98,79); margin-right:2em; color:#fff; } .footer{ width:100%; height:60px; background:#333; color:#fff; text-align: center; line-height:60px; } .footer span{ margin-right:30px; } .footer span:last-child{ margin-right:0; } </style> </head> <body> <div class="header"> <div class="logo"><img src="cat-little.jpg" alt="logo" height="60px"></div> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> </ul> </div> <div class="container"> <div class="left"> <h1>保举哦</h1> <div class="item"> <span>此乃路径</span> html5与css3实现动态网页 </div> <div class="item"> <span>此乃路径</span> html5与css3实现动态网页 </div> <div class="item"> <span>此乃路径</span> html5与css3实现动态网页 </div> <div class="item"> <span>此乃路径</span> html5与css3实现动态网页 </div> <div class="item"> <span>此乃路径</span> html5与css3实现动态网页 </div> </div> <div class="right"> <h1>其他相关</h1> <div class="item"> HTML  CSS  JavaScript </div> <div class="item"> HTML  CSS  JavaScript </div> <div class="item"> HTML  CSS  JavaScript </div> </div> </div> <div class="footer"> <span>友链</span> <span>友链</span> <span>友链</span> <span>友链</span> <span>友链</span> </div> </body> </html>