css012 css布局简介
css012 css布局简介
一、 网页布局的类型
网页布局的类型
1、固定宽度
2、流式
3、相应式web设计
二、 如何进行css布局
1、强大的<div>标签
网页的html代码数量应该尽可能减到最少，尤其是div标签的嵌套，当使用div标签有助于网页布局设计时，就很好用。但是并不是div嵌套的越多越好。
2、html5的分区元素
<div> 用于分割区域，块级元素
<span> 行内分区元素
<article> 给网页或者网页的分区提供标题、导航目标、介绍性的材料
<figure> 存放图片的标签
<body> 主体
<header> 页眉
<main> 主要栏
<sidebar> 侧边栏
<footer> 页脚
<section>定义文档中的节（区段）。比如章节、页眉、页脚或文档中的其他部分。
<ul> 无序列表
<ol> 有序列表
3、css布局的方法
a、 float属性进行布局：通过给元素设置一个宽度，将它浮动到左侧或者右侧，可以吧浮动的div放在浮动的div里面这样创建复杂多列的布局。
b、绝对定位；绝对定位是相对于浏览器的。
position:absolute;
top:150px;
left:120px;
就是把内容定位到整个页面的（120px，150px）位置
c、 相对定位：相对定位内容的位置是相对于父级元素来定位的
position:absolute;
top:150px;
left:120px;
就是把内容定位到相对父级元素的（120px，150px）位置
三、 布局策略
1、设计布局时一定要先从内容入手：标题、文字段落、漂亮的图片。导航链接。动画电影等
2、先设计草图
3、找出方框
4、顺应页面流
5、记住背景图片
6、拼图中的小部件：如何将这一大块内容分成几个小部件
7、给元素设计层次：将某个东西放置在一张图片上最简单的方法就是，把这张图片添加到这个东西下面当背景图片。
8、margin和padding
利用margin 和 padding来定位图片。
css012 css布局简介的更多相关文章
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- 只需5分钟！一文读懂CSS布局（二） -- flex布局
目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...
- 图解CSS布局（一）- Grid布局
图解CSS布局(一)- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可 ...
- CSS布局秘籍(2)-6脉神剑
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
随机推荐
- 为什么要加入<!doctype html>这个文档声明——IE怪异模式
调试了很久,发现了一个非常细微但又十分重要的问题,又一次我在对于文档声明类型的时候,声明了如下类型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- iOS -- cocopods使用
- auto refresh iframe
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Day Three(Beta)
站立式会议 站立式会议内容总结 331 今天:列表关于div控制长度选择控制字段长度而非cssCtrl;editor学习使用 遇到的问题:无 明天:复习,没什么时间花在代码上,可以构思下闹钟的过程 4 ...
- Dubbo系列(1)_背景介绍和基本情况
一.本文目的 主要介绍Dubbo的产生背景和需要解决的问题 二.产生背景 随着大数据量.高并发的互联网应用越来越多,单机系统已经无法满足系统的需要.通过SOA搭建一个分 ...
- 【BZOJ 4516】【SDOI 2016】生成魔咒
http://www.lydsy.com/JudgeOnline/problem.php?id=4516 后缀自动机直接做...省选时cena评测竟然没有卡掉map 每次加一个字符,增加的子串数目为n ...
- 【BZOJ 3053】The Closest M Points
KDTree模板,在m维空间中找最近的k个点,用的是欧几里德距离. 理解了好久,昨晚始终不明白那些“估价函数”,后来才知道分情况讨论,≤k还是=k,在当前这一维度距离过线还是不过线,过线则要继续搜索另 ...
- hdu4549 矩阵快速幂 + 欧拉降幂
R - M斐波那契数列 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...
- java-原生爬虫机制源码
这是一个web搜索的基本程序,从命令行输入搜索条件(起始的URL.处理url的最大数.要搜索的字符串),它就会逐个对Internet上的URL进行实时搜索,查找并输出匹配搜索条件的页面. 这个程序的原 ...
- Mysql-报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost
报错:1130-host ... is not allowed to connect to this MySql server 解决方法: 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在l ...