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布局简介的更多相关文章

  1. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  2. 只需5分钟！一文读懂CSS布局（二） -- flex布局

    目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...

  3. 图解CSS布局（一）- Grid布局

    图解CSS布局(一)- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可 ...

  4. CSS布局秘籍(2)-6脉神剑

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  5. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  6. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  7. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  8. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  9. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

随机推荐

  1. Social Emotional Computing

    from:数理情感学 http://choudh.blogchina.com/2556171.html 第五节  情感的三要素 人对于某一事物的情感,不仅取决于该事物的品质特性(如物理特性.化学特性. ...

  2. 发短信的简单实现——C#版

    为了验证操作人的身份,界面中通常会有获取验证码的功能.及点击获取验证码就会往你输入的手机号里面发送一条短信进行验证. 最近公司给我的任务中也包含这个功能,那么接下来就让我讲解下. ---------- ...

  3. 虚拟机VirtualBox 5.1.0|VBOX

    Oracle VM VirtualBox是一款免费.开源的虚拟机软件,现属于Oracle旗下产品.可以安装Windows.Linux.IBM OS/2.Solaris.BSD等操作系统,具有远端桌面协 ...

  4. springMvc全局异常处理

    本文中只测试了:实现Spring的异常处理接口HandlerExceptionResolver 自定义自己的异常处理器 对已有代码没有入侵性等优点,同时,在异常处理时能获取导致出现异常的对象,有利于提 ...

  5. hibernate的hql查询

    1.概念介绍 1．Query是Hibernate的查询接口,用于从数据存储源查询对象及控制执行查询的过程,Query包装了一个HQL查询语句. 2．HQL是Hibernate Query Langua ...

  6. WakeLock, AlarmManager, JobScheduler

    应用程序耗电的实质,是所启用的硬件在消耗电量. 手机的耗电单元 CPU: 应用处理器(AP)和基带处理器(BB或BP) GPU(图形处理单元) 外设:wifi,BT, GPS,LCD等 AP是ARM架 ...

  7. dede使用方法----更换模板

    刚开始接触dede的时候,自己一直在纠结怎么更换自己的模板啊.后面在秀站网上找到了一个比较好的更换模板的文字教程.下面就我自己做的进行写的笔记. 准备:一个你自己做好的静态版网站,我们假设它的名称是w ...

  8. jquery提交表单，回调函数

    1.使用jquery 绑定事件,执行以下代码,提交单并使用回调函数 $form.serialize():serialize()序列号表单参数 var $form = $("#form&quo ...

  9. iframe与主框架跨域相互访问方法【转】

    转自:http://blog.csdn.net/fdipzone/article/details/17619673 1.同域相互访问 假设A.html 与 b.html domain都是localho ...

  10. perl 箭头操作符

    箭头操作符有两种用法. 第一种用法是访问引用中的数据元素: #!/usr/bin/perl -w use strict; my @a = (5, 6, 7,9); my $aref = \@a; pr ...