div+css的第一个布局

---恢复内容开始---

这个东西说难也不难,但也要详细思虑一番:

<!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=gb2312" />
<title>制作首页布局ok啦。我好开心,着是自己做的第一个布局。我也是很棒的啊。谢谢!!</title>
<style type="text/css">
#container{
width:1200px;
height:1200px;
background:gray;
}
#hearder{width:1200px;
height:400px;
background:blue;
}
#main{width:1200px;
height:500px;
background:yellow;
}
#footer{width:1200px;
height:300px;
background:pink;
}
#lside{width: 900px;height:500px;background:green;
float:left;

}
#rside{width:200px;height:500px;float:right;background:red;}
.four1,.four2,.four3,.four4{width:400px;height:200px;
background:black;float:left;margin:20px 10px;

}
.four3{width:400px;height:200px;
background:black;float:left;clear:left;margin:20px 10px;
}
.four5{width:300px;height:200px;background:red;float:right;margin:0px;}

</style>
</head>

<body>
<div id="container">
<div id="hearder"></div>
<div id="main">
 <div id="lside">
<div class="four1" ></div>
<div class="four2"></div>
<div class="four3"></div>
<div class="four4"></div>
</div>
<div  id="rside"></div>
 </div>
<div id="footer"></div>
</div>

</body>
</html>

---恢复内容结束---

时间: 2024-10-07 23:59:47

div+css的第一个布局的相关文章

div+CSS实现页面的布局要点记录

1.页面任何控件可以通过div包装为一个模块,然后通过margin(外补丁)和padding(内补丁)对控件位置的摆放进行控制,以实现想要的效果. 2.position:absolute;对控件实现绝对定位,既此控件不受别的控件挤兑,可以通过left,right,top,bottom等属性对控件进行任意的摆放,不受别的控件影响. 3.document.getElementsByTagName().document.getElementsByName()取得的节点存在多个即为一个数组,所以要取得具

DIV+CSS布局基本流程及实例介绍

都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局.下面我们先来看下学习DIV+CSS布局的基本步骤: 一.认清学习的要求 1.弄清目的,首先要认识为什么要学习CSS? 2.心态不能急,如果你很急躁,否则会很快丧失兴趣. 3.坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月). 二.基础

关于div+css布局

div的元素布局加上css的样式表布局知识:DIV+CSS布局,CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称.div+css布局好处:便于维护制作div+css网页前思考布局:首先我们拿到一张网页美工图片我们将从上下.上中下.左右.上中(中包括左右)下布局框架来思考.(从大元素块到小元素块:从html上到下:从左至右) /*我们可以分析出我们DIV CSS布局重构此页面结构框架,我们可以看出是 上.中.下结构,其中又包括了左右结构.由此我们就要写此页面

div+css实现双飞翼布局

本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获得了一

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

CSS两列自适应布局

两列布局,一边固定,一边自适应,很常见,可不见得都能写好,就像我. 在一通搜索后,总结了几种方法. 1.CSS3 Flex-Box 其实我最早知道的是这种方法,之前也记录过. 弹性方框模型 (Flexible Box Model)笔记 2.来自div+css自适应两列布局,一列定宽,一列自适应 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Doc

(一)初识div+css

关于div+css,一直以来都是听其名,而不知其为何.今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!! div全称division(分割.分开.部门),css全称Cascading style sheet(层叠式样式表) 网页的布局分为三个时期:table布局,table+css布局(过渡时期),div+css布局(当前主流) 相对于div+css布局,table布局的缺点:1.显示样式和数据绑定在一起:2.布局的灵活度不高:

DIV CSS鼠标经过悬停在图片上时图片上方显示文字(转)

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht