以下是HTML代码，复制即可，切记一定要新建一个文件夹，里面要有2个文件夹，命名css、img、因为这个网页是静态的不是动态的，所以说没有js。
<!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>
</head>
<link rel="stylesheet" type="text/css" href="../css/neike.css"/>
<body>
<div id="header">
<img src="../image/1header_bg.jpg" />
</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>
<li><a href="#">实战案例</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">奔梦向前！</a></li>
</ul>
</div>
<div id="zhong">
<span>滚动新闻:</span>奔梦向前！奔梦向前！奔梦向前！
<font>今天是2020年04月24日，星期五，上下晚午好！</font>
</div>
<div id="body">
<div id="left">
<img src="../image/5Left_Pho.jpg" />
<div id="span">奔梦向前！奔梦向前！奔梦向前！奔梦向前！奔梦向前！奔梦向前！奔梦向前！</div>
</div>
<div id="center">
<div style="width:355px; height:31px; color:#0F0; line-height:31px; padding-left:20px">
<font>信息动态和公告</font> <span style="float:right; margin-right:10px; color:#999">更多>></span>
</div>
<ul style="line-height:24px; margin-top:15px; padding-left:10px">
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li><li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
<li style="background:url(../image/7Li_bg_03.gif) no-repeat left center; padding-left:10px">奔梦向前！<span style="float:right; margin-right:10px">2020-04-24</span></li>
</ul>
</div>
<div style="width:680px; height:130px; float:left">
<img src="../image/132o2t.jpg" style="margin-top:20px; margin-left:20px" />
</div>
</div>
<div id="right">
<div style="border:1px solid #075d02;">
<div style="width:188px; height:30px; ; color:#0F0; padding-left:10px; line-height:30px; background:#f4f4f4">会员登录</div>
<table style="margin-left:20px">
<tr style="height:35px">
<td>用户名</td>
<td><input type="text" style="width:100px"/></td>
</tr>
<tr style="height:25px">
<td>密码</td>
<td><input type="password" style="width:100px" /></td>
</tr>
<tr style="height:25px">
<td>验证码</td>
<td><input type="text" style="width:50px" /> 1820</td>
</tr>
<tr style="height:25px">
<td></td>
<td><input type="submit" value="登录" />
<input type="reset" value="重置" /></td>
</tr>
<tr>
<td><img src="../image/11 Rgi_ico.jpg" /></td>
<td>注册会员|找回密码</td>
</tr>
</table>
</div>
<div style="width:200px; height:47px; border:1px solid #075d02; margin-top:12px; float:left">
<input type="text" value="请输入搜索关键词" style=" float:left; margin-top:10px; width:120px; margin-left:10px" />
<img src="../image/13 Search_Bot.jpg" style=" float:left; text-align:center; margin-left:10px; margin-top:10px" />
</div>
<div style=" width:200px; height:198px; float:left; margin-top:10px;">
<div style="width:188px; height:30px; line-height:30px; padding-left:10px; color:#0C6; background:#ebebeb">
学术技术研究进展
<span style="float:right; line-height:30px; color:#CCC">更多>></span>
</div>
<ul style="line-height:24px; margin-top:5px; margin-left:5px">
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔梦向前！奔梦向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔梦向前！奔梦向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔梦向前！奔梦向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔梦向前！奔梦向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔梦向前！奔梦向前！</li>
<li style="background:url(../image/132ot.jpg) no-repeat left center; padding-left:5px">奔梦向前！奔梦向前！</li>
</ul>
</div>
</div>
<div style="width:900px; height:39px; float:left;">
<ul style="text-align:center; background-color:#f2f2f2; float:left;width:800px; height:39px; line-height:39px; padding-left:100px">
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">关于我们</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">网站地图</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">帮助</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">后台管理</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">邮件服务</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">友情链接</li>
<li style="float:left; width:80px ; border-right:1px solid #cfcfcf;line-height:14px; margin-top:14px">在线留言</li>
<li style="float:left; width:80px ; border-rightr:1px solid #cfcfcf;line-height:14px; margin-top:14px">联系我们</li>
</ul>
</div>
<div style="width:900px; height:47px; float:left; padding-top:10px; line-height:20px">
<p style="text-align:center; line-height:47px margin-top:20px">奔梦向前网站</p>
<p style="text-align:center">2020-04-24</p>
</div>
</body>
</html>
下面是css样式的代码
/* CSS Document */
*{
margin:0;
padding:0;
} /* 通用选择器，清楚标签默认的内外边距*/
body{
font-size:12px; /*文字大小的属性设置 网页正文中巨大多数都是12px*/
font-family:"宋体"; /*宋体是所有人电脑都有的字体*/
width:900px;
margin:0 auto; /* 以上2行代码设置布局的盒子居中对齐*/
}
ul{
list-style:none; /*清楚列表的项目符号类型*/
}
a{
text-decoration:none; /*去掉超级链接的下划线*/
}
#header{ width:900px; height:125px; float:left;}
#nav{ width:900px; height:29px; float:left; background:url(../image/2Nav_bg.jpg); padding-top:11px}
#nav ul{ margin-left:36px; float:left;}
#nav ul li{ float:left; line-height:40px; width:98px; text-align:center; border-right:1px double #075d02; line-height:16px;}
#nav a{ color:#FFF}
#nav a:hover{ color:#F00}
#zhong{ width:900px; height:41px; float:left; line-height:41px}
#zhong span{ color:#04560e; font-weight:900; margin-left:21px; color:#505050; font-size:}
#zhong font{ float:right; color:#505050; font-size:10px}
/*身体*/
#body{ width:690px; height:471px; float:left;}
#left{ width:293px; height:338px; float:left; border:1px solid #dddddd;}
#left img{ margin-top:12px; margin-left:12px}
#span{ color:#5b5b5b; width:251px; height:59px; margin-left:18px; margin-top:12px}
#center{ width:377px; height:338px; float:left; margin-left:11px}
#div{width:355px; height:31px; color:#0F0; line-height:31px; padding-left:20px}
#right{ width:200px; height:471px; float:left; border:1px solid #075d02;}
一起来看效果！
2978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
