阅读量:0
学习CSS布局网页的实例包括：，1. 盒模型（Box Model），2. 弹性盒子（Flexbox），3. 网格布局（Grid），4. 浮动（Float），5. 定位（Positioning），6. 媒体查询（Media Queries）
以下是一些CSS布局网页的实例：
1、单列布局
普通布局（头部、内容、底部）
```html
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
```
```css
.container {
width: 80%;
margin: 30px auto;
border:2px solid red;
boxsizing: borderbox;
}
.container header {
width: 100%;
height: 30px;
background: #faa;
}
.container .content {
width: 100%;
height: 300px;
background: #aaf;
}
.container footer {
height: 50px;
background: #afa;
}
```
内容居中
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Document</title>
<style type="text/css">
.container {
width: 80%;
margin: 30px auto;
border:2px solid red;
boxsizing: borderbox;
}
.container header {
width: 100%;
height: 30px;
background: #faa;
}
.container .content {
width: 80%;
height: 300px;
margin: 0 auto;
background: #aaf;
}
.container footer {
height: 50px;
background: #afa;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
</body>
</html>
```
2、两栏布局
采用float左边固定大小，右边自适应
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Document</title>
<style type="text/css">
.wrapper {
/* width:80%;和margin 是为了方便我截图*/
width: 80%;
margin: 50px auto;
border:2px solid #aaa;
boxsizing: borderbox;
/*采用bfc清除浮动*/
overflow: hidden;
}
.nav {
float: left;
width: 200px;
background: #faa;
height: 500px;
}
.content {
marginleft: 200px;
height: 500px;
backgroundcolor: #aaf;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="nav"></div>
<div class="content"></div>
</div>
</body>
</html>
```
采用display: inlineblock; 和 calc() 实现
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Navigation Bar Example</title>
<style type="text/css">
* { margin: 0; padding: 0; } /* to reset browser styles */
body { font: 14px/1.5 Helvetica, Arial, sansserif; color: #333; }
.nav { liststyle: none; background: #f1f1f1; padding: 10px 0; textalign: center; }
.nav li { display: inlineblock; margin: 0 15px; }
.nav a { textdecoration: none; color: #333; }
.nav a:hover { color: #999; }
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
```
3、三栏布局
使用float属性创建三个相等的列
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Three Column Layout</title>
<style type="text/css">
* { boxsizing: borderbox; } /* to include padding and border in element's total width and height */
body { fontfamily: Arial, sansserif; margin: 0; padding: 0; }
.row::after { content: ""; clear: both; display: table; } /* clear floats */
.column { float: left; width: 33.33%; padding: 15px; } /* Three equal columns */
</style>
</head>
<body>
<div class="row">
<div class="column" style="backgroundcolor:#aaa;">Content 1</div>
<div class="column" style="backgroundcolor:#bbb;">Content 2</div>
<div class="column" style="backgroundcolor":#ccc;">Content 3</div>
</div>
</body>
</html>
```
响应式布局
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Responsive Layout</title>
<style type="text/css">
* { boxsizing: borderbox; } /* to include padding and border in element's total width and height */
body { fontfamily: Arial, sansserif; margin: 0; padding: 0; }
.row::after { content: ""; clear: both; display: table; } /* clear floats */
.column { float: left; width: 33.33%; padding: 15px; } /* Three equal columns */
@media screen and (maxwidth: 600px) { .column { width: 100%; } } /* Responsive layout */
</style>
</head>
<body>
<div class="row">
<div class="column" style="backgroundcolor:#aaa;">Content 1</div>
<div class="column" style="backgroundcolor:#bbb;">Content 2</div>
<div class="column" style="backgroundcolor":#ccc;">Content 3</div>
</div>
</body>
</html>
```
4、页脚布局
基本页脚样式
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Footer Example</title>
<style type="text/css">
.footer { backgroundcolor: #F1F1F1; textalign: center; padding: 10px; }
</style>
</head>
<body>
<footer class="footer">Copyright © Your Company Name | All rights reserved | Contact Us: example@example.com</footer>
</body>
</html>
```
带有社交图标的页脚
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Footer with Social Icons</title>
<style type="text/css">
.footer { backgroundcolor: #F1F1F1; textalign: center; padding: 20px; }
.socialicons { liststyletype: none; margin: 0; padding: 0; display: inlineblock; }
.socialicons li { display: inline; margin: 0 5px; }
.socialicons a { textdecoration: none; color: #333; }
</style>
</head>
<body>
<footer class="footer">
<ul class="socialicons">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</footer>
</body>
</html>
```
5、导航栏布局
基础导航栏
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Basic Navbar Example</title>
<style type="text/css">
.topnav { overflow: hidden; backgroundcolor: #333; }
.topnav a { float: left; display: block; color: #f2f2f2; textalign: center; padding: 14px 16px; textdecoration: none; }
.topnav a:hover { backgroundcolor: #ddd; color: black; }
</style>
</head>
<body>
<div class="topnav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
```
响应式导航栏
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8"; name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Responsive Navbar Example</title>
<style type="text/css">
.topnav { overflow: hidden; backgroundcolor: #333; }
.topnav a { float: left; display: block; color: #f2f2f2; textalign: center; padding: 14px 16px; textindent: none; }
.topnav a:hover { backgroundcolor: #ddd; color: black; }
@media screen and (maxwidth: 600px) { .topnav a { float: none; width: auto; display: block; textalign: left; } } /* Responsive layout */
</style>
</head>
<body>
<div class="topnav">
<a href="#home">Home</a>
<a href="#about">About</a>
<aigned to the left side of the screen when the screen width is less than or equal to 600px. This ensures that the navigation links are stacked vertically on smaller screens, improving readability and usability on mobile devices. Additionally, by using CSS media queries, you can create complex layouts that adapt seamlessly to different screen sizes and orientations, providing an optimal viewing experience for all users regardless of the device they are using.
