502.大学生HTML期末大作业 —【经典的婚纱摄影主题网页(页)】 Web前端网页制作 html+css

一只小小的眠羊

于 2025-04-03 15:03:48 发布

阅读量615

点赞数 22

分类专栏：大学生期末大作业摄影文章标签：前端 html 课程设计 html5 css3 css javascript

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/146981382

版权

大学生期末大作业同时被 2 个专栏收录

533 篇文章

订阅专栏

摄影

9 篇文章

订阅专栏

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

本实例应用html+css：导航菜单、三级页面、下拉菜单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含28个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<title>04</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
dl,dt,dd{ list-style:none;}
a{ text-decoration:none;}
table{margin:0 auto;}
#nav {
width:1280px;margin:0 auto;
}
#nav dl{overflow:hidden;zoom:1;background:url(images/2_10.jpg) right
0 no-repeat;width:1200px;background:#E6E6E6;padding-left:80px;
}
#nav dl dt{ float:left;
}
#nav dl dd{ float:left; text-align:center; line-height:57px;
}
#nav dl dd a{ display:block;width:150px;height:57px;background:url(images/2_04.jpg) 0 0 no-repeat;color:#717171; font-family:Arial, '宋体', sans-serif; font-size:15px; font-weight:bold;
}
#nav dl dd a:hover{color:#74944A;background:url(images/2_05.jpg) 0 0 no-repeat;
}
</style>
</head>

<TABLE WIDTH=1280 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=1280 HEIGHT=650><IMG SRC="images/index_01.jpg" WIDTH=1280 HEIGHT=650 ALT=""></TD>
</TR>
</TABLE>
<TABLE WIDTH=1280 BORDER=0 CELLPADDING=0 CELLSPACING=0 align=center>
<TR>
<TD WIDTH=1280 HEIGHT=157><IMG SRC="images/index_02.jpg" WIDTH=1280 HEIGHT=157 ALT=""></TD>
</TR>
</TABLE>
<div id="nav">
<dl>
<dt><img src="images/2_03.jpg"></dt>
<dd><a href="index.html">首页</a></dd>
<dd><a href="about.html">关于我们</a></dd>
<dd><a href="zhongqiu.html">优惠</a></dd>
<dd><a href="zuopin1.html">作品展</a></dd>
<dd><a href="lianxi.html">联系方式</a></dd>
</dl>
</div>
<TABLE WIDTH=1280 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=1280 HEIGHT=40><IMG SRC="images/index_04.jpg" WIDTH=1280 HEIGHT=40 ALT=""></TD>
</TR>
</TABLE>

</BODY>
</HTML>

...

2.CSS

代码如下（节选示例）：

* {
   margin:0;
   padding:0;
}
dl, dt, dd, ul, li {
   list-style:none;
}
body {
   font-family:Arial, Helvetica, sans-serif;
   font-size:15px;
   color:#333;
}
a {
   text-decoration:none;
   color:#333;
}
a:hover {
   color:gold;
   text-decoration:underline;
}
img{border:none;}
#header {
   width:1280px;
   margin:0 auto;
   position:relative;height:220px;z-index:999;
}
#logo {
   position:absolute;
   top:15px;

}

#header ul {
   position: absolute;
   top: 67px;
   left: 406px;
}

#header ul li {
   float:left;
   display:inline;
}
#header ul li a {
   line-height:30px;
   display:block;
   width:150px;
   height:57px;
   line-height:57px;
   text-align:center;
   background:url(images/2_04.jpg) 0 0 no-repeat; font-weight:bold;
}
#header ul li a:hover{background:url(images/2_05.jpg) 0 0 no-repeat;
}

#header ul li dl {
display:none;
}
#header ul li:hover dl {
display:block;
}

/*cont*/
#cont {
   width:1280px;
   margin:0 auto;
   overflow:hidden;
   zoom:1;
}
#cont_left {
   float:left;
   margin-left:10px;
   _display:inline;
   font-size:16px;
   text-align:right; width:280px;
}
#cont_left dt {
   margin-top:30px;
}
#cont_left dd {
   margin-top:30px;
}
#cont_right {
   float:right;
   padding:10px;
}
#cont_right {
   width:880px;
   height:450px;
   background:url(images/2012033105090696.jpg) 0 0 repeat;
}
#cont_right ul {
   overflow:hidden;
   zoom:1;
   margin:30px 0 0 20px;
}
#cont_right ul li {
   float:left;
   margin-right:15px;
   _display:inline;
</style>