首页给我提供一个div+css的网页布局模板

给我提供一个div+css的网页布局模板

时间: 2023-12-03 16:43:41 浏览: 112

以下是一个基本的div+css网页布局模板： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <style type="text/css"> body { margin: 0; padding: 0; } .container { width: 80%; margin: 0 auto; overflow: hidden; } .header { height: 100px; background-color: #ccc; text-align: center; line-height: 100px; } .nav { height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; } .content { float: left; width: 70%; height: 500px; background-color: #fff; padding: 20px; } .sidebar { float: right; width: 30%; height: 500px; background-color: #eee; padding: 20px; } .footer { height: 100px; background-color: #ccc; text-align: center; line-height: 100px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>网页头部</h1> </div> <div class="nav"> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </div> <div class="content"> <h2>网页内容</h2> <p>这里是网页主要内容。</p> </div> <div class="sidebar"> <h3>网页侧边栏</h3> <ul> <li><a href="#">侧边栏1</a></li> <li><a href="#">侧边栏2</a></li> <li><a href="#">侧边栏3</a></li> </ul> </div> <div class="footer"> <h4>网页底部</h4> </div> </div> </body> </html> ``` 这个模板包含了一个头部、导航、内容、侧边栏和底部。可以根据实际需要修改样式和内容。

阅读全文