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网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
随机推荐
- 半吊子菜鸟学Web开发5 -- PHP开发环境配置
本文参考自:http://blog.csdn.net/angon823/article/details/54415855 Ubuntu16.04 默认 apt-get install apache2 ...
- 半吊子菜鸟学Web开发3 --Html css学习1
1创建一个html文件,用vscode打开 首先输入一个! 然后就可以开始编辑html文件了 2 整体结构 <!DOCTYPE HTML><html> <head& ...
- 如何获取 topic 主题的列表?
bin/kafka-topics.sh --list --zookeeper localhost:2181
- Java 中的 final 关键字有哪些用法？
修饰类:表示该类不能被继承: 修饰方法:表示方法不能被重写: 修饰变量:表示变量只能一次赋值以后值不能被修改(常量).
- spring 支持哪些 ORM 框架?
Hibernate iBatis JPA JDO· OJB
- 学习RabbitMQ（二）
MOM(message oriented middleware) 消息中间件(是在消息的传递过程中保存消息的容器,消息中间件再将消息从它的源中继到它的目标时,充当中间人的作用,队列的主要目的是提供路由 ...
- maven的settings.xml文件
settings.xml是maven的配置文件.一般我们在网上下载的maven包解压以后,conf文件里面的有个setting.xml文件,通常这个settings.xml文件中会有你的本地仓库会在哪 ...
- 判断集合中存在String字符串 或 判断集合中不存在String字符串
一.使用场景 用于集合中有多个相近的字符,无法使用包含判断 如: 这里如果我想判断以上集合中是否包含"信封件-DE"就会被"信封件-DE2"影响到 毕竟:&qu ...
- 解决联想笔记本 安装VM虚拟机后每次启动都会导致电脑蓝屏问题
现象描述: pc为联想笔记本 系统是微软家庭中文版,每次启动VM虚拟机都会出现蓝屏现象,出现错误代码system_service_exception 原因及解决方法: 对于Windows10家庭版 ...
- [转载] Link prefetch
本来想翻译的但是有人翻译了,还是转过来吧.原文<HTML5 Link Prefetching>,译文<使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载 ...