什么叫做布局？

　　又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。

网页设计的特点

　　网页可以自适应宽度

　　网页的高度理论上可以无限延长

网页分栏

　　分栏又称为分列，常见的布局分为：一列布局、二列布局、三列布局、混合布局

前端工程师是将艺术与技术完美融合的关键岗位。

　　一列布局

　　通常作为网站首页，适合放置简单的内容，大多固定宽度。

　　二列布局

　　左left右right

　　宽度自适应的话要用百分比来设置

　　自适应宽度的二列布局用的很少，一般都是用固定宽度的二列布局

　　三列布局

　　左中右

如果左右是固定宽度，而中间要自适应宽度，怎样实现？

让左侧div绝对定位，让其停靠在左侧，右侧div绝对定位，让其停靠在右侧，中间设置左右margin值。

　　混合布局

　　现在网页布局多使用混合布局

一、HTML和CSS基础--网页布局--如何用css进行网页布局的更多相关文章

  1. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  2. 【WEB基础】HTML & CSS 基础入门（9）CSS盒子

    网页上的元素辣么多,我该用什么办法让它们排列整齐.间距合理呢.常干家务的朋友们就容易理解了,用收纳盒呀! 所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一 ...

  3. 网页中如何用 CSS 设置打印分页符

    Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...

  4. CSS基础【2】：CSS常见属性

    CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...

  5. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  6. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  7. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  8. 网页布局（html＋css基础）

    一.如何用CSS进行网页布局 二.网页布局基础 三.网页简单布局之结构和表现原则 四.CSS Sprite雪碧图应用 什么叫布局? 网页的特点: 网页自适应宽度: 网页长度无限延长: (分栏也叫分列, ...

  9. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

随机推荐

  1. IOS基础之 (十二) 类的扩展

    对OC类的扩展总结如下,共有4个: 1.子类 subClass 作用:可以使用类的继承来增添父类的变量和方法. 写法:在.h文件中 @interface Student : Person 2.分类 C ...

  2. UVA12563Jin Ge Jin Qu hao(01背包)

    紫书P274 题意:输入N首歌曲和最后剩余的时间t,问在保证能唱的歌曲数目最多的情况下,时间最长:最后必唱<劲歌金曲> 所以就在最后一秒唱劲歌金曲就ok了,背包容量是t-1,来装前面的歌曲 ...

  3. Asp.Net MVC3 简单入门详解过滤器Filter

    http://www.cnblogs.com/boruipower/archive/2012/11/18/2775924.html 前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MV ...

  4. [Angularjs]ng-repeat中使用ng-model遇到的问题

    写在前面 在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的. 系列文章 [Angularjs]ng- ...

  5. App接口中xml方式封装通信接口

  6. P问题、NP问题、NPC问题、NP难问题的概念

    P问题.NP问题.NPC问题.NP难问题的概念 离入职尚有几天时间,闲来无事,将大家常见却又很容易搞糊涂的几个概念进行整理,希望对大家有所帮助.你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这 ...

  7. hdu 1241 Oil Deposits(水一发，自我的DFS）

    解题思路: 1. 遍历扫描二维数组,遇到‘@’,结果ans++; 2. 将当前 i,j 位置置为‘*’,将当前‘@’的 i,j 传人到DFS函数中,开始遍历八个方向的字符 如果碰到 '@' 则先将当前 ...

  8. 二、Ubuntu14.04下安装Hadoop2.4.0 （伪分布模式）

    在Ubuntu14.04下安装Hadoop2.4.0 (单机模式)基础上配置 一.配置core-site.xml /usr/local/hadoop/etc/hadoop/core-site.xml ...

  9. linux 软件安装

    A:RPM包,这种软件包就像windows的EXE安装文件一样,各种文件已经编译好,并打了包,哪个文件该放到哪个文件夹,都指定好了,安装非常方便,在图形界面里你只需要双击就能自动安装,如果在命令行模式 ...

  10. gdb 多线程调试

    gdb 多线程调试 http://hi.baidu.com/hcq11/blog/item/9f5bfc6e696209d680cb4a25.html  http://hi.baidu.com/lit ...