如何用CSS进行网页布局---学习总结
页面布局:对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等
页面布局分为4种:
一栏布局
两栏布局
三栏布局
混合布局
灵活利用float、position对页面进行布局
清除浮动
方法一:
针对受到浮动影响的元素操作 clear:both;
方法二:
针对受到浮动影响的元素操作 width:100%;overflow:hidden;
混合布局代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 30px;
color: #fff
} .top {
height: 200px;
background-color: #ccc;
} .main {
height: 500px;
background-color: red;
} .left {
width: 200px;
height: 500px;
float: left;
background-color: #0000FE;
} .right {
width: 300px;
height: 500px;
float: right;
background-color: #350C0C;
} .foot {
height: 100px;
background-color: #E59018;
}
</style>
</head> <body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body> </html>
如何用CSS进行网页布局---学习总结的更多相关文章
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- PHP.4-DIV+CSS标准网页布局准备工作(下)
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- 利用css进行网页布局
网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- day32—CSS多列布局学习
转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局 ...
- css的网页布局案例
常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...
随机推荐
- Cocos2dx 3.1.1 学习笔记整理(2):创建场景与载入图片
把之前用2.2.3的代码迁移到3.1.1真是个蛋疼的工作,话说3.1.1做的改动还真是大啊. 可以在HelloWorldScene.cpp中看到,之前的各种CCXXX都被废弃了. 例如,新建一个CCL ...
- LintCode 面试题 旋转字符串
1.题目描述 题目链接:http://www.lintcode.com/zh-cn/problem/rotate-string/ 给定一个字符串和一个偏移量,根据偏移量旋转字符串(从左向右旋转) 2. ...
- [Unity]SQLite-C#调用
SQLite数据库-Unity操作 项目开发的时候,经常会遇到的一种需求,数据存储 离线缓存的数据类型很多,大致分成两类 字符串文本数据 多媒体数据 字符串数据的类型只有字符串,但是结构有很多: xm ...
- window环境变量
首先Window中有很多乱七八糟的路径变量之类的,归类下来有几类,主要是为了我们分清楚概念,以免搞的糊涂了. 1. Window系统的环境变量:顾名思义,就是系统级别的变量,或者利用我们编程的角度来讲 ...
- (简单) HDU 3397 Sequence operation,线段树+区间合并。
Problem Description lxhgww got a sequence contains n characters which are all '0's or '1's. We have ...
- ue4中窗口打开web地址
首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...
- Splay初步【bzoj1503】
做了一道水题,把bzoj1503用Splay重新写了一下. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a; i ...
- thinkPHP的学习
1.版本,以3.1为主,因为手册是基于这个的,最新的版本,还没有对应的手册 2.发现一个问题,echo 中文时,出现乱码,而调用模版则正常. 3.写url的注意大小写.index和Index是不同的 ...
- TFS2013 升级至TFS2015及项目的创建
TFS2015已发布想体验下新特性 由于现有数据库已经是SQLSERVER2012 SP1 开发工具VS2013 都符合升级要求 现在体验下吧 1.先下载TFS2015 运行安装向导一路NEXT 直至 ...
- 在MVC中添加拦截器实现登录后的权限验证
1.新建一个类 (以下实现了打印日志功能) using System; using System.Collections.Generic; using System.Linq; using Syste ...