“南大软院大神养成计划“_第十一天的学习“
2015-11-26 20:12
429 查看
今天学习的内容是如何用CSS进行网页布局：
1.布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
2.一列布局：
就是使用三个<div>标签，每个<div>不嵌套，分别用CSS样式设置高度，高度，背景颜色就可以实现一列布局。
如果想让<div>标签的内容居中就在该标签定义的类选择器上加上：margin：0 auto；就可以实现内容居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC;margin:0 auto;}
.footer{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
3.二列布局：
二列布局是在一列布局的基础上，选择一个<div>标签在其中加入两个不相互嵌套的<div>标签，十七选择的标签成为父标签，然后在CSS中定义两个不同的类选择器，用于刚加入的<div>标签，同样可以进行宽度，长度，背景颜色的设置，最后要加入flot：righ;或float:left;就可以实现二列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left; 【任务1】}}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right;【任务2】}/*右浮动样式*/
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.三列布局：
三列布局，可以如一列布局一样，设置三个并列的<div>标签，然后在CSS样式里分别定义三个类选择器：在对齐进行设置，三个设置为float型的，或是两边的分别设置为position:absolute;left ;0; top:0;和position:absolute;right:0;top;然后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; right:0px;top:0; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>
5.混合布局：
混合布局就是在一列布局的基础上形成混合布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:gray;margin:0;height:100px;}
.main{height:400px;width:1000px;background:red;}
.left{width:200px;height:400px;float:left;background:blue;}
.right{width:700px;height:400px;float:right;background:green;}
.foot{height:100px;margin-top:0px;background:orange;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
将显示：
1.布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
2.一列布局：
就是使用三个<div>标签，每个<div>不嵌套，分别用CSS样式设置高度，高度，背景颜色就可以实现一列布局。
如果想让<div>标签的内容居中就在该标签定义的类选择器上加上：margin：0 auto；就可以实现内容居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC;margin:0 auto;}
.footer{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
3.二列布局：
二列布局是在一列布局的基础上，选择一个<div>标签在其中加入两个不相互嵌套的<div>标签，十七选择的标签成为父标签，然后在CSS中定义两个不同的类选择器，用于刚加入的<div>标签，同样可以进行宽度，长度，背景颜色的设置，最后要加入flot：righ;或float:left;就可以实现二列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left; 【任务1】}}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right;【任务2】}/*右浮动样式*/
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.三列布局：
三列布局，可以如一列布局一样，设置三个并列的<div>标签，然后在CSS样式里分别定义三个类选择器：在对齐进行设置，三个设置为float型的，或是两边的分别设置为position:absolute;left ;0; top:0;和position:absolute;right:0;top;然后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; right:0px;top:0; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>
5.混合布局：
混合布局就是在一列布局的基础上形成混合布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:gray;margin:0;height:100px;}
.main{height:400px;width:1000px;background:red;}
.left{width:200px;height:400px;float:left;background:blue;}
.right{width:700px;height:400px;float:right;background:green;}
.foot{height:100px;margin-top:0px;background:orange;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
将显示：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C语言练习作业（五）
- python的编码类型转换
- RecycleView Adapter的封装
- C#_Delegate_泛型
- Cocos Studio 2.3.2开发中的Label控件锚点问题等
- JAVA动态绑定的内部实现机制
- python中的urlencode和urldecode
- 延迟加载之ViewStub
- ceph介绍
- 《将博客搬至CSDN》
- 阿里云服务器搭建自己的个人网站之拨开迷雾
- Nginx+Tomcat实现单IP、多域名、多站点的访问
- java多态，如何理解父类引用指向子类对象
- TCP长连接与短连接的区别
- linux下adb连不上android设备解决方法
- 剑指offer前奏二
- java学习参考
- nyoj--1011--So Easy[II](数学几何水题)
- Android中Parcelable接口用法
- 【C语言】单链表的排序