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网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
随机推荐
- CF487E Tourists(圆方树+树链剖分+multiset/可删堆)
CF487E Tourists(圆方树+树链剖分+multiset/可删堆) Luogu 给出一个带点权的无向图,两种操作: 1.修改某点点权. 2.询问x到y之间简单路径能走过的点的最小点权. 题解 ...
- 微服务部署 docker-compose
1.docker-maven-plugin 介绍 在我们持续集成过程中,项目工程一般使用 Maven 编译打包,然后生成镜像,通过镜像上线,能够大大提供上线效率,同时能够快速动态扩容,快速回滚,着实很 ...
- Dubbo 集群容错有几种方案？
集群容错方案 说明 Failover Cluster 失败自动切换,自动重试其它服务器(默认) Failfast Cluster 快速失败,立即报错,只发起一次调用 Failsafe Cluster ...
- JS Promise对象学习
Promise对象的三个状态 pending(进行中) fulfilled(已成功) rejected(已失败) Promise代表一个异步操作,对象的状态一旦改变,就不会再改变 Promise构造函 ...
- elasticsearch 的倒排索引是什么 ?
面试官:想了解你对基础概念的认知. 解答:通俗解释一下就可以. 传统的我们的检索是通过文章,逐个遍历找到对应关键词的位置. 而倒排索引,是通过分词策略,形成了词和文章的映射关系表,这种词典+映射表 即 ...
- 文件缓存tmpfs + 数据缓存SSDB（一）
一.文件缓存tmpfs 1.特性 1) 基于内存的文件系统,RAW+SWAP,虚拟内存 2) tmpfs使用虚拟内存,/dev/shm/使用共享内存 3) 访问速度快,可以动态调整大小 4) 没有持久 ...
- 学习Kvm（三）
虚拟化(将一个物理硬件平台虚拟成多个) vmware(模拟出一堆硬件设备,每一个硬件设备都是独立平台) 虚拟化要解决的问题(硬件之上的OS,有用户空间.内核空间:vmware虚拟机所模拟出的多个硬件平 ...
- 无人驾驶—高精地图和V2X
高精地图将厘米级的静态信息传传递给无人车V2X将路况上的动态信息传递给无人车 高精地图的作用 高精地图与传统地图的对比 高精地图与定位的关系 上图左侧是感知到的区域,右侧是高精地图,之后进行拼接获得车 ...
- python学习笔记（八）——文件操作
在 windows 系统下,我们通过 路径+文件名+扩展名的方式唯一标识一个文件,而在 Linux 系统下通过 路径+文件名唯一标识一个文件. 文件分类:文件主要可以分为文本文件和二进制文件,常见的如 ...
- 【静态页面架构】CSS之定位
CSS架构 1.浮动: 是以float属性设置容器指定的位置 <style> div { width: 200px; height: 200px; } #qq { background-c ...