本文深入探讨了网页布局的基本类型，包括固定宽度、流式和响应式设计，并介绍了如何使用HTML5分区元素和CSS布局方法进行网页布局设计。文章还提供了布局策略和技巧，如设计内容布局、使用margin和padding定位图片等。
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来定位图片。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
