html 布局
2020-12-13 03:09
标签：style blog class code java c 制定浮动之后，需要把height width最好定下，以免出现奇怪的现象 父元素高度没有设置，就是0px 其子元素如果浮动。再高也不会撑开父元素的高度， 注意会把紧挨着的下面元素向上被 浮动的子元素覆盖。 用记事本
文件保存编码和charset编码不一样。浏览器按照charset解释。注意乱码！ html 布局,搜素材,soscw.com html 布局 标签：style blog class code java c 原文地址：http://www.cnblogs.com/zy2012/p/3724508.html
id用数字取名字。显示不了要表示的效果，浏览器不读取渲染效果。
不声明docutype直接后果是：不同浏览器可能渲染的效果不同。低版本IE渲染，会有问题！得不到预期的效果！
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" xml:lang="en">
head>
meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
title>Documenttitle>
style type="text/css">
#container{
margin:0 auto;
width:1004px;
background:gray;
}
#header{
height:120px;
background:orange;
}
#main{
height:600px;
background:green;
}
#lefts{
float:left;
height:600px;
width:700px;
background:pink;
}
#ls{
float:left;
height:290px;
width:340px;
margin:5px 5px 5px 5px;
background:#0066CC;
}
#rights{
float:right;
height:600px;
width:304px;
background:purple;
}
#rs{
height:296px;
width:300px;
margin:2px 2px 4px 2px;
background:#ACD6FF;
}
#footer{
height:120px;
background:blue;
color:#FFFFFF;
}
style>
head>
body>
div id="container">
div id="header">HEADERdiv>
div id="main">
div id="lefts">
div id="ls">1div>
div id="ls">2div>
div id="ls">3div>
div id="ls">4div>
div>
div id="rights">
div id="rs">5div>
div id="rs">6div>
div>
div>
div id="footer">FOOTERdiv>
div>
body>
html>
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" xml:lang="en">
head>
meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
title>Documenttitle>
style type="text/css">
#container{
margin:0 auto;
width:1004px;
background:gray;
}
#header{
height:120px;
background:orange;
}
#main{
height:600px;
background:green;
}
#lefts{
float:left;
height:600px;
width:700px;
background:pink;
}
#ls1{
float:left;
height:290px;
width:340px;
margin:5px 5px 5px 5px;
background:#0066CC;
}
#ls2{
float:left;
height:290px;
width:340px;
margin:5px 5px 5px 5px;
background:#00AEAE;
}
#ls3{
float:left;
height:290px;
width:340px;
margin:5px 5px 5px 5px;
background:#02C874;
clear:both;
}
#ls4{
float:left;
height:290px;
width:340px;
margin:5px 5px 5px 5px;
background:#00BB00;
}
#rights{
float:right;
height:600px;
width:304px;
background:purple;
}
#rs1{
height:296px;
width:300px;
margin:2px 2px 4px 2px;
background:#ACD6FF;
}
#rs2{
height:296px;
width:300px;
margin:2px 2px 2px 2px;
background:#CAFFFF;
}
#footer{
height:120px;
background:blue;
color:#FFFFFF;
}
style>
head>
body>
div id="container">
div id="header">HEADERdiv>
div id="main">
div id="lefts">
div id="ls1">1div>
div id="ls2">2div>
div id="ls3">3div>
div id="ls4">4div>
div>
div id="rights">
div id="rs1">5div>
div id="rs2">6div>
div>
div>
div id="footer">FOOTERdiv>
div>
body>
html>
上一篇：Python中数据类型
下一篇：No redirect found in host configuration file (C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\aspnet.co