-
MARGIN: 0px
0
八月 15th, 2011DIV_CSS接上去初步要真正计划布局了。和保守的方法一样，你首先要在脑海里有大致的轮廓构思，然后用photoshop把它画进去。你看。你能够看到相关web程序的站点大都很节俭，由于web程序更关心组织和形式，MARGIN。现实上它与网页的雅观没有根底辩论，你想何如计划就何如计划，用保守表格方法完成的布局，用DIV也可以完成。div css布局。技术有一个幼稚的历程，把DIV看成和TABLE一样的工具，如何运用就看你的遐想力了。div css模板。
注：在现实应用历程中，div css教程下载。DIV在有些住址确实不如表格便利，div css是什么。比方背得意的定义。但任何事情都有得有失，弃取在于你的价值判定。好，无叶电风扇十大品牌。看看十天学会div css。不罗嗦了，div css教程。听听div css视频教程。我们初步：
1.确定布局
w3cn的起先计划草图如下：
用表格的计划方法的话，日常都是上中下三行布局。十天学会div css。用DIV的话，事实上margin。我商酌操纵三列来布局-成为这样。学习MARGIN。
2.定义looks形态
先定义整个页面的looks的形态-代码如下：相比看。
looks { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../image groups/bg_logo.gif) #FEFEFE no-repeevery rightend;
FONT-FAMILY: aLucida Grhappen to being well automotive service engineersa-aLucida Shappen to beingUnicodea-a宋体a-a新宋体a-arias-verdaa-shappen to being-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }以上代码的作用在上一天的教程有注意证明，0px。大师应当一看就清晰。听说十天学会div css。定义了边框边距为0；背景脸色为#FEFEFE，背景图片为bg_logo.gif，div css是什么。图片位于页面右下角，不反复；定义了字体尺寸为12px；字体脸色为#666;行高150%。对于css div 居中。
3.定义重要的div
初次操纵CSS布局，我断定采用坚固宽度的三列布局(比自适合区别率的计划简单-hoho，听听0px。别说我偷懒，先完成简单的，
第4课httplearning增加点决心嘛！)。分别定义左中右的宽度为200:300:280，你看div css教程。在CSS中如下定义:
/*定义页面左列形态*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列形态*/
#middle{ POSITION: reas;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列形态*/
#right{ POSITION: reas;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }注意：看看px。定义中列和右列div我都采用了POSITION:reas;，看看0px。然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，div css教程。我采用了层的万万定位。定义中央列间隔页面左侧框200px，间隔顶部0px；定义右列间隔页面左侧框500px，间隔顶部0px；。
这时刻整个页面的代码是：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Trhappen to beingitionas//EN”"http:///TR/xhtml1/DTD/xhtml1-trhappen to beingitionas.dtd”>
<html xmlns=”http:///1999/xhtml”lag=”gb2312″>
<hearticle>
<title>迎接进入新《网页计划师》:web程序教程及推论</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ />
<meta http-equiv=”Content-Laguage” content=”gb2312″ />
<meta content=”easterneverying currenth of” nmorninge=”rospiders” />
<meta reputine=”internetger” content=”ajie(every)neteautomotive service -阿捷”/>
<meta reputine=”Copyright” content=”-自在版权-肆意转载”/>
<meta reputine=”description”content=”新网页计划师-web程序的教程站点-推进web程序在中国的应用.”/>
<meta content=”web程序-教程-web- sthappen to being well happen to beingards- xhtml- css-uscapasterneverying currentity- eautomotive service engineers of asterneverying currentcess” nmorninge=”keywords” />
<link rel=”icon” href=”/faudio-videoi formeverycon.ico” type=”image/x-icon”/>
<link rel=”shortcut icon” href=”http:///faudio-videoi formeverycon.ico”type=”image/x-icon” />
<link rel=”stylesheet” rev=”stylesheet” href=”css/style01.css”type=”text/css” media=”easterneverying currenth of” />
</hearticle>
<looks>
<div id=”left”>页面左列</div>
<div id=”middle”>页面中列</div>
<div id=”right”>页面右列</div>
</looks>
</html>这时刻页面的恶果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希图高度是满屏的，何如办呢？
4.100%自适合高度?
为了维系三列有异样的高度，我尝试在#left、#middle和#right中设置”height:100%;”，但浮现完全没有料想的自适合高度恶果。经过一番尝试后，我只好给每个div一个万万高度:”height:1000px;”，并且随着形式的增加，须要一向删改这个值。难道没有手段自适合高度了吗？随着阿捷自身研习的长远，浮现一个变通的管理手段，现实上根底不须要设置100%，我们仍然被tefficient思想监管太深了，这个手段在下一节的研习中注意先容。
相关日志
Tags: div css实例 - 上一篇»重庆美女大赛:第二届重庆巴南温泉旅游文化节昨日在东温泉开幕
- 下一篇»这样可以加快你的写样式的速度
近期评论