CSS简单的网页布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS 网页布局</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <style>
8 * {
9 box-sizing: border-box;/* 创建三个不相等的列，要添加这个盒子模型 */
10 }
11 body{margin: 0;}
12 .header{/* 头部样式 */
13 background-color: #f1f1f1;
14 padding: 20px;
15 text-align: center;
16 }
17 .topnav{/* 导航条 */
18 overflow: hidden;
19 background-color: #333;
20 }
21 .topnav a{/* 导航链接 */
22 float: left;
23 display: block;
24 color: #f2f2f2;
25 text-align: center;
26 padding: 14px 16px;
27 text-decoration: none;
28 }
29 .topnav a:hover{/* 链接 - 修改颜色 */
30 background-color: #ddd;
31 color: black;
32 }
33
34 /* 将创建一个 3 列布局 */
35 /*.column{!* 创建三个相等的列 *!*/
36 /* float: left;*/
37 /* width: 33.33%;*/
38 /*}*/
39 /*.row:after{!* 列后清除浮动 *!*/
40 /* content: "";*/
41 /* display: table;*/
42 /* clear: both;*/
43 /*}*/
44 /*@media screen and (max-width: 600px) {!* 将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式） *!*/
45 /* .column{*/
46 /* width: 100%;*/
47 /* }*/
48 /*}*/
49
50 /* 将创建一个 3 列不相等的列布局 */
51 .column{/* 创建三个不相等的列 ，要添加这个盒子模型 box-sizing: border-box;*/
52 float: left;
53 padding: 10px;
54 }
55 .column.side{/* 左右两侧宽度 */
56 width: 25%;
57 }
58 .column.middle{/* 中间区域宽度 */
59 width: 50%;
60 }
61 .row:after{/* 列后面清除浮动 */
62 content: "";
63 display: table;
64 clear: both;
65 }
66 @media screen and (max-width: 600px){
67 .column.side, .column.middle{
68 width: 100%;
69 }
70 }
71 .footer{/* 底部样式 */
72 background-color: #f1f1f1;
73 padding: 10px;
74 text-align: center;
75 }
76 </style>
77 </head>
78 <body>
79 <div class="header">
80 <h1>头部区域</h1>
81 </div>
82
83 <div class="topnav">
84 <a href="#">链接</a>
85 <a href="#">链接</a>
86 <a href="#">链接</a>
87 </div>
88 <!-- /* 将创建一个 三个相等的列布局 */-->
89 <!-- <div class="row">-->
90 <!-- <div class="column">-->
91 <!-- <h2>第一列</h2>-->
92 <!-- <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>-->
93 <!-- </div>-->
94 <!-- <div class="column">-->
95 <!-- <h2>第二列</h2>-->
96 <!-- <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>-->
97 <!-- </div>-->
98 <!-- <div class="column">-->
99 <!-- <h2>第三列</h2>-->
100 <!-- <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>-->
101 <!-- </div>-->
102 <!-- </div>-->
103 <!-- /* 将创建一个 三个不相等的列布局 */-->
104 <div class="row">
105 <div class="column side">
106 <h2>左侧栏</h2>
107 <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
108 </div>
109 <div class="column middle">
110 <h2>主区域内容</h2>
111 <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
112 <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
113 </div>
114 <div class="column side">
115 <h2>右侧栏</h2>
116 <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
117 </div>
118 </div>
119
120 <div class="footer">
121 <p>底部区域</p>
122 </div>
123
124
125
126
127
128
129 </body>
130 </html>
CSS简单的网页布局的更多相关文章
- css 实现的网页布局
css 实现网页布局,上中下三部分,中间为固定宽度且分为左右两部分 <!DOCTYPE html> <html> <head> <meta charset ...
- HTML实例之简单的网页布局
需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...
- 一个简单的网页布局HTML+CSS
<!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...
- css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
- 8.html表格相关的标记9.html表格实战《简单的网页布局》
<html> <head> <title>第八课标题表格</title> <meta charset="utf-8"> ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
- 简单的网页布局效果html5+CSS3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用DIV，实现简单的网页布局
<html lang="en"><head> <meta charset="UTF-8"> <title>GIS ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
随机推荐
- ctf之POST
题目信息如下 可知该题考察post请求知识 直接将what=flag以post传参格式进行传参即可获得flag
- Xshell 连接虚拟机OS Linux 设置静态ip ,网络配置中无VmWare8 的解决办法
前序:最近开始研究Hadoop平台的搭建,故在本机上安装了VMware workstation pro,并创建了Linux虚拟机(centos系统),为了方便本机和虚拟机间的切换,准备使用Xshell ...
- Struts2的功能扩展点有哪些？
l Interceptor及其相关子类 l TypeConverter及其相关子类 l Validator及其相关子类 l Result及其相关子类 l ObjectFactory及其相关子类
- 如何使用 Spring Boot 实现异常处理？
Spring 提供了一种使用 ControllerAdvice 处理异常的非常有用的方法. 我们通过实现一个 ControlerAdvice 类,来处理控制器类抛出的所有异常.
- Springboot添加静态资源映射addResourceHandlers，可实现url访问
@Configuration //public class WebMvcConfiger extends WebMvcConfigurerAdapter { public class WebMvcCo ...
- mysql行锁、表锁。乐观锁，悲观锁
锁定用于确保事务完整性和数据库一致性. 锁定可以防止用户读取其他用户正在更改的数据,并防止多个用户同时更改相同的数据. 如果不使用锁定,数据库中的数据可能在逻辑上变得不正确,而针对这些数据进行查询可能 ...
- python面向对象--快速入门
1面向对象基本用法 1.1基本格式 class 类名: def __init__(self,x): self.x = x def 方法名字 (self): #函数在类里称为方法,self就是固定参数, ...
- python-正整数的因子展开式
[题目描述]编写程序,输出一个给定正整数x(x>1)的质因子展开式. [输入格式]请在一行中输入整数x的值. [输出格式]对每一组输入的x,按以下格式输出x的质因子展开式(假如x的质因子分别为a ...
- 我试试这个昵称好使不队项目NABCD指路
我试试这个昵称好使不队项目NABCD指路:https://www.cnblogs.com/team-development/p/14617203.html
- 将百度地图Demo抽取出来安到自己的程序中
今日所学: 使用百度地图ADK实现手机定位 [Android]使用百度.高德.腾讯地图SDK获取定位数据与屏幕截图分享到QQ_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 代码获取SHA1 (2 ...