单列布局2

<!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;margin: 0 auto;}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

时间： 2024-11-05 13:45:41

单列布局2的相关文章

13.2 单列布局

这显然是最筒单的一种布局形式.通过这个例子,希望读者能够顺便复习前面圆角框的制作方法.实现的效果如图1所示.本案例文件位于网页学习网CSS教程资源中“第13章\1-1-1.htm”. 图1 单列固定宽度的页面布局 一.放置第一个圆角框 先在页面中放置第一个圆角框,HTML代码如下.lodidance.com 折叠展开XML/HTML 代码复制内容到剪贴板 <body> <div id="header"> <div class="rounded&q

单列布局

<!DOCTYPE html><html><head> <title>单列布局</title> <style type="text/css"> body{ margin: 0;padding: 0; } .header{ height: 100px; width:800px;background: blue; } .main{ width: 800px;height: 300px;background: #ccc;

CSS布局技巧大全

参考资料:http://www.imooc.com/article/2235 单列布局 水平居中 父元素text-align:center;子元素:inline-block; 优点:兼容性好: 不足:需要同时设置子元素和父元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

网页整体布局完全剖析—剖完你不进来看一下么？

作为前端小白,最基本的就是写网页了(虽然前端现在基本上可包揽全宇宙的事了),排网页更是基本生存技能了.本文总结了几乎所有的网页总体布局.               一.单列布局 1.单列固宽 思路:设置div的左右margin为auto <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1-1-1 布局固定宽度</title> <st

CSS对 网页进行布局

一.单列布局:  margin:0 auto:将div模块居中 二.两列布局:(float标签将div进行浮动)   float:left; float:right; 三.三列布局:  ①.利用float直接对三个div模块进行浮动: ②.左右两边div固定,中间自适应(利用position:absolute;上 右 下 左)绝对定位来进行固定       左边:position:absolute;left:0:top: 0; 右边:position:absolute;right:0:top:

web设计_9_CSS常用布局，响应式

一个完整的页面和其中的组件该如何具备灵活性. 怎么样利用CSS来实现无论屏幕.窗口以及字体的大小如何变化,都可以自由扩展和收缩的分栏式页面. 要决定使用流动布局.弹性布局还是固定宽度的布局,得由项目的特点和需求来决定. 流体布局 <div id="wrap"> <header role="banner"> <h1>Header Goes Here</h1> </header> <div id=&quo

HTML CSS常见布局

首先将页面划分为大的结构性区域,比如容器.页眉.内容区和页脚: 然后是内容区域本市,建立网格结构,分析页面结构 最后再各内容区中设计结构,确定页面布局. 1. 水平居中 使用display:inline 和 text-align /*.parent { text-align: center; } .child { display: inline-block; }*/ 使用margin:0 auto 设定 .child { width: 300px; margin: 0 auto; } 使用tab

web前端教程：CSS 布局十八般武艺都在这里了

CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助. 目录 1.常用居中方法:水平居中,垂直居中, 2.单列布局 3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局 如果你想学习交流html5css3

Html利用CSS布局技巧

单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素) 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-block;} 优点:兼容性好:不足:需要同时设置子元素和父元素 使用margin:0 auto来实现 .c