一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局?
又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合。
网页设计的特点
网页可以自适应宽度
网页的高度理论上可以无限延长
网页分栏
分栏又称为分列,常见的布局分为:一列布局、二列布局、三列布局、混合布局
前端工程师是将艺术与技术完美融合的关键岗位。
一列布局
通常作为网站首页,适合放置简单的内容,大多固定宽度。
二列布局
左left右right
宽度自适应的话要用百分比来设置
自适应宽度的二列布局用的很少,一般都是用固定宽度的二列布局
三列布局
左中右
如果左右是固定宽度,而中间要自适应宽度,怎样实现?
让左侧div绝对定位,让其停靠在左侧,右侧div绝对定位,让其停靠在右侧,中间设置左右margin值。
混合布局
现在网页布局多使用混合布局
一、HTML和CSS基础--网页布局--如何用css进行网页布局的更多相关文章
- CSS技巧分享:如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 【WEB基础】HTML & CSS 基础入门(9)CSS盒子
网页上的元素辣么多,我该用什么办法让它们排列整齐.间距合理呢.常干家务的朋友们就容易理解了,用收纳盒呀! 所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一 ...
- 网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...
- CSS基础【2】:CSS常见属性
CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 第五模块:WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
- 网页布局(html+css基础)
一.如何用CSS进行网页布局 二.网页布局基础 三.网页简单布局之结构和表现原则 四.CSS Sprite雪碧图应用 什么叫布局? 网页的特点: 网页自适应宽度: 网页长度无限延长: (分栏也叫分列, ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
随机推荐
- Yii2 初体验
看着Yii1.1有那么多的不爽,又看着Yii2一天天成熟起来,于是凑一个小项目的原型阶段,试着用Yii2搞一搞. 随手写了一点体会,以一个Yii1的熟练工人看向Yii2的视角,简单一说吧.(将来随时可 ...
- PS图层混合模式实例详解
PS中的很多概念都和Core Graphics中的概念相通,比如蒙版.路径.裁剪.混合模式等等.如果你对Core Graphics中的混合模式不太理解,阅读本篇文章能让你对Core Gra ...
- 在Main中定义student的结构体,进行年龄从大到小依次排序录入学生信息。(结构体的用法以及冒泡排序)
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- std::thread
std::shared_ptr<std::thread> m_spThread; m_spThread.reset(new std::thread(std::bind(&GameS ...
- Laravel教程 六:表单 Forms
Laravel教程 六:表单 Forms 此文章为原创文章,未经同意,禁止转载. Form laravel 5.2 之后请使用 laravelcollective/html 替换 illuminate ...
- MyBatis 用户表记录数查询
搭建MyBatis开发环境,实现用户表记录数查询 1.在MyEclipse中创建工程,导入MyBatis的jar包
- linux读写ntfs
frankly speaking, i hope to get a higher salary. yours frankly= yours sincerely = sincerely yours =y ...
- [Effective JavaScript 笔记]第25条:使用bind方法提取具有确定接收者的方法
js里方法和属性值为函数,就像一个东西两种称呼一个样,比如土豆,也叫马铃薯,一个样.既然一样,那就可以对对象的方法提取出来为函数,然后把提取出来的函数作为回调函数直接传递给高阶函数. 高阶函数是什么 ...
- [Effective JavaScript 笔记]第34条:在原型中存储方法
js中完全有可能不借助原型进行编程.不用在其原型中定义任何的方法. 创建对象 构造函数法 所有属性和方法都在构造函数中定义 function User(name,pwd){ this.name=nam ...
- ext3文件系统反删除利器-ext3grep
导读 Linux作为企业级服务器,数据的安全性至关重要,任何数据德尔丢失和误删都是不可容忍的!最近我接触到一款软件-ext3grep,它可以恢复误删的数据,下面简单讲解一下这个软件. ext3grep ...