HTML与CSS代码写出一个简单的页面框架
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">
* { margin:0; padding:0; }
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:150%; }
ul { list-style:none; }
img { border:0 none; }
a { text-decoration:none; color:#333; }
h1 { font-size:18px; }
h2 { font-size:14px; }
h3 { font-size:14px; font-weight:normal; }
h4 { font-size:12px; }
h5 { font-size:12px; font-weight:normal; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0; }
#container{ margin:0 auto; width:960px; }
/*header*/
#header { height:100px; background:#cf0; }
#header h1 { padding:10px 20px; }
#nav { background:#FF6600; height:35px; margin-bottom:6px; padding:5px; }
#nav ul li { float:left; }
#nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none; }
#nav ul li a:hover { text-decoration:underline; background:#06F; color:#FFF; }
/*main*/
#mainContent { overflow:auto; zoom:1; margin-bottom:6px; }
#side { width:200px; float:left; }
.sidebox { border:1px solid #ed6400; margin-bottom:6px; }
.sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff; }
.sidebox ul { padding:4px 6px; }
#main { width:742px; float:right; }
.mainbox { border:1px solid #ed6400; margin-bottom:6px; }
.mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff; }
.mainbox ul { padding:4px 6px; }
/*footer*/
#footer { border-top:3px solid #0CF; height:50px; text-align:center; padding:6px; color:#999; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>头部</h1>
<!-- end #header -->
</div>
<div class="clearfloat"></div>
<div id="nav">
<ul>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
<li><a href="#">导航五</a></li>
</ul>
<!-- end #nav -->
</div>
<div id="Content">
<div id="side">
<div class="sidebox">
<h4>块标题</h4>
<ul>
块内容
</ul>
</div>
<!-- end #side -->
</div>
<div id="main">
<div class="mainbox">
<h2>块标题</h2>
<ul>
块内容
</ul>
</div>
<!-- end #main -->
</div>
<!-- end #fContent -->
</div>
<div class="clearfloat"></div>
<div id="footer"> 底部
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>
自己把样式放进css文件里面
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">
* { margin:0; padding:0; }
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:150%; }
ul { list-style:none; }
img { border:0 none; }
a { text-decoration:none; color:#333; }
h1 { font-size:18px; }
h2 { font-size:14px; }
h3 { font-size:14px; font-weight:normal; }
h4 { font-size:12px; }
h5 { font-size:12px; font-weight:normal; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0; }
#container{ margin:0 auto; width:960px; }
/*header*/
#header { height:100px; background:#cf0; }
#header h1 { padding:10px 20px; }
#nav { background:#FF6600; height:35px; margin-bottom:6px; padding:5px; }
#nav ul li { float:left; }
#nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none; }
#nav ul li a:hover { text-decoration:underline; background:#06F; color:#FFF; }
/*main*/
#mainContent { overflow:auto; zoom:1; margin-bottom:6px; }
#side { width:200px; float:left; }
.sidebox { border:1px solid #ed6400; margin-bottom:6px; }
.sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff; }
.sidebox ul { padding:4px 6px; }
#main { width:742px; float:right; }
.mainbox { border:1px solid #ed6400; margin-bottom:6px; }
.mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff; }
.mainbox ul { padding:4px 6px; }
/*footer*/
#footer { border-top:3px solid #0CF; height:50px; text-align:center; padding:6px; color:#999; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>头部</h1>
<!-- end #header -->
</div>
<div class="clearfloat"></div>
<div id="nav">
<ul>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
<li><a href="#">导航五</a></li>
</ul>
<!-- end #nav -->
</div>
<div id="Content">
<div id="side">
<div class="sidebox">
<h4>块标题</h4>
<ul>
块内容
</ul>
</div>
<!-- end #side -->
</div>
<div id="main">
<div class="mainbox">
<h2>块标题</h2>
<ul>
块内容
</ul>
</div>
<!-- end #main -->
</div>
<!-- end #fContent -->
</div>
<div class="clearfloat"></div>
<div id="footer"> 底部
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>
自己把样式放进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=utf-8"
/>
<title>基本框架结构</title>
<style
type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0
auto;
font-size:12px;
font-family:Verdana;
line-height:150%;
}
ul
{
list-style:none;
}
img
{
border:0
none;
}
a
{
text-decoration:none;
color:#333;
}
h1
{
font-size:18px;
}
h2
{
font-size:14px;
}
h3
{
font-size:14px;
font-weight:normal;
}
h4
{
font-size:12px;
}
h5
{
font-size:12px;
font-weight:normal;
}
.clearfloat
{
clear:both;
height:0;
font-size:
1px;
line-height:
0;
}
#container{
margin:0
auto;
width:960px;
}
/*header*/
#header
{
height:100px;
background:#cf0;
}
#header
h1
{
padding:10px
20px;
}
#nav
{
background:#FF6600;
height:35px;
margin-bottom:6px;
padding:5px;
}
#nav
ul
li
{
float:left;
}
#nav
ul
li
a
{
display:block;
padding:4px
10px
2px
10px;
color:#fff;
text-decoration:none;
}
#nav
ul
li
a:hover
{
text-decoration:underline;
background:#06F;
color:#FFF;
}
/*main*/
#mainContent
{
overflow:auto;
zoom:1;
margin-bottom:6px;
}
#side
{
width:200px;
float:left;
}
.sidebox
{
border:1px
solid
#ed6400;
margin-bottom:6px;
}
.sidebox
h4
{
background:#ff911a;
padding:2px
6px;
border-bottom:1px
solid
#ed6400;
color:#fff;
}
.sidebox
ul
{
padding:4px
6px;
}
#main
{
width:742px;
float:right;
}
.mainbox
{
border:1px
solid
#ed6400;
margin-bottom:6px;
}
.mainbox
h2
{
background:#ff911a;
padding:2px
6px;
border-bottom:1px
solid
#ed6400;
color:#fff;
}
.mainbox
ul
{
padding:4px
6px;
}
/*footer*/
#footer
{
border-top:3px
solid
#0CF;
height:50px;
text-align:center;
padding:6px;
color:#999;
}
</style>
</head>
<body>
<div
id="container">
<div
id="header">
<h1>头部</h1>
<!--
end
#header
-->
</div>
<div
class="clearfloat"></div>
<div
id="nav">
<ul>
<li><a
href="#">导航一</a></li>
<li><a
href="#">导航二</a></li>
<li><a
href="#">导航三</a></li>
<li><a
href="#">导航四</a></li>
<li><a
href="#">导航五</a></li>
</ul>
<!--
end
#nav
-->
</div>
<div
id="Content">
<div
id="side">
<div
class="sidebox">
<h4>块标题</h4>
<ul>
块内容
</ul>
</div>
<!--
end
#side
-->
</div>
<div
id="main">
<div
class="mainbox">
<h2>块标题</h2>
<ul>
块内容
</ul>
</div>
<!--
end
#main
-->
</div>
<!--
end
#fContent
-->
</div>
<div
class="clearfloat"></div>
<div
id="footer">
底部
<!--
end
#footer
-->
</div>
<!--
end
#container
-->
</div>
</body>
</html>
自己把样式放进css文件里面
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">
*
{
margin:0;
padding:0;
}
body
{
margin:0
auto;
font-size:12px;
font-family:Verdana;
line-height:150%;
}
ul
{
list-style:none;
}
img
{
border:0
none;
}
a
{
text-decoration:none;
color:#333;
}
h1
{
font-size:18px;
}
h2
{
font-size:14px;
}
h3
{
font-size:14px;
font-weight:normal;
}
h4
{
font-size:12px;
}
h5
{
font-size:12px;
font-weight:normal;
}
.clearfloat
{
clear:both;
height:0;
font-size:
1px;
line-height:
0;
}
#container{
margin:0
auto;
width:960px;
}
/*header*/
#header
{
height:100px;
background:#cf0;
}
#header
h1
{
padding:10px
20px;
}
#nav
{
background:#FF6600;
height:35px;
margin-bottom:6px;
padding:5px;
}
#nav
ul
li
{
float:left;
}
#nav
ul
li
a
{
display:block;
padding:4px
10px
2px
10px;
color:#fff;
text-decoration:none;
}
#nav
ul
li
a:hover
{
text-decoration:underline;
background:#06F;
color:#FFF;
}
/*main*/
#mainContent
{
overflow:auto;
zoom:1;
margin-bottom:6px;
}
#side
{
width:200px;
float:left;
}
.sidebox
{
border:1px
solid
#ed6400;
margin-bottom:6px;
}
.sidebox
h4
{
background:#ff911a;
padding:2px
6px;
border-bottom:1px
solid
#ed6400;
color:#fff;
}
.sidebox
ul
{
padding:4px
6px;
}
#main
{
width:742px;
float:right;
}
.mainbox
{
border:1px
solid
#ed6400;
margin-bottom:6px;
}
.mainbox
h2
{
background:#ff911a;
padding:2px
6px;
border-bottom:1px
solid
#ed6400;
color:#fff;
}
.mainbox
ul
{
padding:4px
6px;
}
/*footer*/
#footer
{
border-top:3px
solid
#0CF;
height:50px;
text-align:center;
padding:6px;
color:#999;
}
</style>
</head>
<body>
<div
id="container">
<div
id="header">
<h1>头部</h1>
<!--
end
#header
-->
</div>
<div
class="clearfloat"></div>
<div
id="nav">
<ul>
<li><a
href="#">导航一</a></li>
<li><a
href="#">导航二</a></li>
<li><a
href="#">导航三</a></li>
<li><a
href="#">导航四</a></li>
<li><a
href="#">导航五</a></li>
</ul>
<!--
end
#nav
-->
</div>
<div
id="Content">
<div
id="side">
<div
class="sidebox">
<h4>块标题</h4>
<ul>
块内容
</ul>
</div>
<!--
end
#side
-->
</div>
<div
id="main">
<div
class="mainbox">
<h2>块标题</h2>
<ul>
块内容
</ul>
</div>
<!--
end
#main
-->
</div>
<!--
end
#fContent
-->
</div>
<div
class="clearfloat"></div>
<div
id="footer">
底部
<!--
end
#footer
-->
</div>
<!--
end
#container
-->
</div>
</body>
</html>
自己把样式放进css文件里面
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
