这种网页特效怎么做
发布网友
发布时间：2022-05-24 17:53
共2个回答
热心网友
时间：2023-10-23 23:57
html
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link href="index.css" rel="stylesheet" type="text/css">
</HEAD>
<body>
<div id="header" ></div>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="nav">
</div>
<div id="content">
<h3>前言</h3>
<p>第一段内容<br><br><br><br><br><br><br><br><br><br><br></p>
<h3>理解css盒子模式</h3>
<p>第二段内容<br><br><br><br><br><br><br><br><br><br><br></p>
</div>
<div id="footer">
<p>关于|广告服务|招聘|客服中心|QQ留言|网站管理|会员登陆|购物车</p>
<p>Copyright@2006-2008 All Rights Reserved</p>
</div>
</body>
</HTML>
css如下：
body{
font-family:Arial, Helvetica,sans-serif;
font-size:12px;
margin:0px auto;
height: auto;
width:760px;
border:1px solid #006633;
}
#header{
height:100px;
width:760px;
background-image:url(web_head.jpg);
background-repeat:no-repeat;
margin:0px 0px 3px 0px;
}
/*定义一个导航栏的长盒子*/
#nav{
height:25px;
width:760px;
font-size:14px;
list-style-type:none;
}
/*让li这些小盒子左对齐*/
#nav li{
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;/*让li盒子里面的链接样式没有下滑线*/
padding-top:4px;
display:block;/*让li里面的链接块状呈现，就像一个按钮，而不必点中文字才起作用*/
height:22px;
width:97px;
text-align:center;
background-color:#009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;/*鼠标移到链接文字上面改变盒子背景色*/
color:#FFFFFF;
}
#content{
height:auto;
line-height:1.5em;
}
#content p{
text-indent:2em;
}
#content h3{
font-size:16px;
}
#footer{
height:50px;
width:740px;
line-height:2em;
text-align:center;
background-color:#009966;
padding:10px;
}
*{
margin:0px;
padding:0px;
}
热心网友
时间：2023-10-23 23:57
