首页HTML CSS + DIV实现整体布局

HTML CSS + DIV实现整体布局

时间: 2023-12-20 18:07:36 浏览: 89

HTML和CSS是前端开发中最基础的两个技术，DIV则是布局中经常使用的一个标签。以下是一个简单的例子，实现了一个基本的整体布局。 HTML代码： ```html <body> <div class="container"> <header> <h1>这是一个标题</h1> </header> <nav> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul> </nav> <section class="content"> <article> <h2>文章标题</h2> <p>这是一篇文章的内容。</p> </article> <aside> <h3>侧边栏标题</h3> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </aside> </section> <footer> <p>这是页脚</p> </footer> </div> </body> ``` CSS代码： ```css .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } header, nav, section, aside, footer { margin: 20px 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { text-decoration: none; } .content { display: flex; } article { flex: 2; } aside { flex: 1; margin-left: 20px; } footer { text-align: center; } ``` 上述代码中，`.container`是一个容器，用来包含整个页面的内容。`.content`是页面的主要内容区域，使用了`flex`布局。`nav`和`aside`则分别代表了页面的导航栏和侧边栏。通过上述代码，我们可以实现一个基本的整体布局，当然具体的样式和内容还需根据实际需求进行调整。

阅读全文