如何用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 ...
随机推荐
- Android新手入门
本博客出自公众号安卓应用频道:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=2652261947&idx=1&sn= ...
- (简单) POJ 3279 Fliptile，集合枚举。
Description Farmer John knows that an intellectually satisfied cow is a happy cow who will give more ...
- c3p0、dbcp、tomcat jdbc pool 连接池配置简介及常用数据库的driverClass和驱动包
[-] DBCP连接池配置 dbcp jar包 c3p0连接池配置 c3p0 jar包 jdbc-pool连接池配置 jdbc-pool jar包 常用数据库的driverClass和jdbcUrl ...
- PS基础学习
1.文件新建 (1).菜单栏新建,快捷键(Ctrl+N) (2).预设的使用--->一般用于网页制作,就选择Web,宽度,高度的单位,网页是像素 (3).分辨率的设置--->电脑网页屏幕分 ...
- abs函数
absolute 绝对值函数 abs函数是一个取绝对值函数,你得确保ABS()括号里的表达式所计算出的结果是数字,String是字符串的意思,你括号你的数据肯定是字符串了,如果A.B两变量你是这样定义 ...
- iOS搜索框UISearchBar 分类： ios技术 2015-04-03 08:55 82人阅读 评论(0) 收藏
当你在seachBar中输入字母之前的时候,只是用鼠标选中searchBar的时候,如图 终端输出截图如下:(这个时候调用先shouldBeginEditing,之后调用didBeginEditing ...
- Makefile常用调试方法
转载自 陈皓<跟我一起写 Makefile><GNU Make项目管理> GNU make 提供了若干可以协助调试的内置函数以及命令行选项. 1.warning函数 $(war ...
- Selenium2（java）启动常用浏览器 三
默认启动firefox浏览器 Webdriver driver = new FirefoxDriver(); 启动谷歌浏览器 配置chromedriver WebDriver driver; Syst ...
- 绕过网站安全狗拦截，上传Webshell技巧总结（附免杀PHP一句话）
这篇文章我介绍一下我所知道的绕过网站安全狗上传WebShell的方法. 思路是:修改HTTP请求,构成畸形HTTP请求,然后绕过网站安全狗的检测. 废话不多说,切入正题.... 1.实验环境: Win ...
- Composer PHP依赖管理的新时代
安装Composer Composer需要PHP 5.3.2+才能运行. $ curl -sS https://getcomposer.org/installer | php 这个命令会将compos ...