首页div+css的传统方式布局

div+css的传统方式布局

时间: 2024-09-24 19:16:53 浏览: 47

在传统的div+CSS布局中，主要是通过HTML的<div>元素来划分页面结构，然后利用CSS来控制各个部分的位置、大小和样式。这种布局方式的基本步骤如下： 1. **HTML结构**：创建一系列div元素作为容器，每个div可以代表一个独立的区域，如头部、主体、侧边栏等。 ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer> </body> </html> ``` 2. **CSS样式**：在外部的CSS文件`styles.css`中，使用选择器来指定对应的div，并设置其width、height、position、top、left等属性，实现元素的定位和布局。 ```css /* CSS */ .header { width: 100%; background-color: #f1f1f1; padding: 20px; } .main { margin-top: 50px; width: 70%; float: left; } .nav { width: 20%; float: right; } ```

阅读全文