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网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
随机推荐
- python练习册 每天一个小程序 第0000题
PIL库学习链接:http://blog.csdn.net/column/details/pythonpil.html?&page=1 1 #-*-coding:utf-8-*- 2 __au ...
- Python 远程开发环境部署与调试
一.下载相应开发工具 Pycharm :下载地址 二.部署开发机 一般在工作过程中,开发环境并不是本地环境,而是指在开发机:因为,有很多依赖本地部署非常麻烦,而开发机中则内置了很多相关的服务 三.代 ...
- go语言学习入门篇 2--轻量级线程的实现
很多有过 JVM 相关语言工作经验的程序员或许都遇到过如下问题: 超出 thread 限制导致内存溢出.在作者的笔记本的 linux 上运行,这种情况一般发生在创建了 11500 个左右的 threa ...
- 解决Hadoop集群hdfs无法启动DataNode的问题
问题描述: 在hadoop启动hdfs的之后,使用jps命令查看运行情况时发现hdfs的DataNode并没有打开. 笔者出现此情况前曾使用hdfs namenode -format格式化了hdfs ...
- 使用git clone 报错curl56 errno 10054解决方法
使用git clone 报错curl56 errno 10054解决方法 ----------------版权声明:本文为CSDN博主「伽马射线爆」的原创文章,遵循CC 4.0 BY-SA版权协议,转 ...
- mysql innodb事务的ACID及其实现的保证机制
MySQL事务的ACID,一致性是最终目的.保证一致性的措施有:A原子性:靠undo log来保证(异常或执行失败后进行回滚).D持久性:靠redo log来保证(保证当MySQL宕机或停电后,可以通 ...
- Javascript Range对象的学习
Range对象有几个特别难理解的属性,这里学习总结下 Range.startOffset:返回一个表示 Range 起点在 startContainer 中的位置的数字.此属性的值与Range.sta ...
- 攻防世界php_rce
php_rce 进入题目提示为ThinkPHP V5 遇到这种题我们一般去找一下框架的rce漏洞即可,搜索到这样一篇文章 https://www.freebuf.com/articles/web/28 ...
- 10分钟go crawler colly从入门到精通
Introduction 本文对colly如何使用,整个代码架构设计,以及一些使用实例的收集. Colly是Go语言开发的Crawler Framework,并不是一个完整的产品,Colly提供了类似 ...
- [CSS]《CSS揭秘》第四章——视觉效果
投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...