HTML与CSS代码写出一个简单的页面框架

2024-12-21 15:42:25
推荐回答(2个)
回答1:


transitional.dtd">



基本框架结构















块标题



    块内容













自己把样式放进css文件里面

回答2:

html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
基本框架结构
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;
}



id="container">
id="header">

头部




class="clearfloat">

id="nav">

  • href="#">导航一

  • href="#">导航二

  • href="#">导航三

  • href="#">导航四

  • href="#">导航五




id="Content">
id="side">
class="sidebox">

块标题



    块内容




id="main">
class="mainbox">

块标题



    块内容






class="clearfloat">
id="footer">
底部






自己把样式放进css文件里面