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网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
随机推荐
- HarmonyOS USB DDK助你轻松实现USB驱动开发
HDF(Hardware Driver Foundation)驱动框架是HarmonyOS硬件生态开放的基础,为开发者提供了驱动加载.驱动服务管理和驱动消息机制等驱动能力,让开发者能精准且高效地开发驱 ...
- 半吊子菜鸟学Web开发 -- PHP学习 4 --异常
PHP异常处理 1 抛出一个异常 与Python的try except类似,PHP用try catch来捕获异常 基本语法 try{ //可能出现错误或异常的代码 //catch表示捕获,Except ...
- Java 将CSV转为Excel
CSV(Comma Separated Values)文件是一种纯文本文件,包含用逗号分隔的数据,常用于将数据从一个应用程序导入或导出到另一个应用程序.通过将CSV文件转为EXCEL,可执行更多关于数 ...
- 【Java面试宝典】说说你对 Spring 的理解，非单例注入的原理？它的生命周期？循环注入的原理， aop 的实现原理，说说 aop 中的几个术语，它们是怎么相互工作的？
AOP与IOC的概念(即spring的核心) IOC:Spring是开源框架,使用框架可以使我们减少工作量,提高工作效率并且它是分层结构,即相对应的层处理对应的业务逻辑,减少代码的耦合度.而sprin ...
- 什么是Netflix Feign？它的优点是什么？
Feign是受到Retrofit,JAXRS-2.0和WebSocket启发的java客户端联编程序.Feign的第一个目标是将约束分母的复杂性统一到http apis,而不考虑其稳定性.在emplo ...
- 使用docker-compose+nginx+uwsgi+django部署项目
(1)centos上下载docker + docker-compose (2)基础目录 (3)首先创建一个纯净的python+django+uwsgi的镜像,便于后期使用(也可不用创建,后期docke ...
- JavaScript 表单事件
表单事件,当用户与表单元素进行交互时发生. 实例: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>表单事件& ...
- DRF（Django REST Framework）框架
目录 一.DRF中的Request 二.前戏: 关于面向对象的继承 三.初级版本 1. settings.py文件 -- 注册app 2. models.py文件 -- 创建表 3. admin.py ...
- Leetcode刷题之链表中箭头转移和内容转移
链表中箭头转移和内容转移 链表中特别注意xxx.next=xxx 和xxx=xxx的区别 xxx.next=xxx表示将指针(箭头)转移 xxx=xxx表示将内容转移 Leetcode206翻转链表 ...
- node-webkit文档翻译#package.json
title: node-webkit文档翻译#package.json date: 2013-12-07 21:38:25 tags: node-webkit 基本示例 { "main&qu ...