105. Web前端网页案例——【锡剧文化主题精品网页（ 2页）】大学生期末大作业 html5+css3

最新推荐文章于 2024-12-24 13:54:10 发布

码农的码

最新推荐文章于 2024-12-24 13:54:10 发布

阅读量813

点赞数 24

分类专栏：文化文章标签：前端课程设计 html5 html css3 jquery css

本文链接：https://blog.csdn.net/2301_82212046/article/details/144593492

版权

文化专栏收录该内容

14 篇文章

订阅专栏

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html5+css3，div+css布局，代码简单，带PSD设计图，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含2个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>锡剧官方网站</title>
       <link href="css/style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
<div class="top">
<div class="top-ner">
<div class="logo"><img src="images/logo.png"></div>
<div class="sou">
<form>
<input type="text" class="sous">
</form>
</div>
</div>
</div>
<div class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">锡剧图片</a></li>
<li><a href="mingjia.html">锡剧名家</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> | <a href="#">注册</a></li>
</ul>
</div>
<div class="banner"><img src="images/banner.jpg"></div>
<div class="box1">
<div class="title">
<span class="tit">锡剧图片</span>
<span class="tit2"><a href="#">锡剧剧照</a></span>
<span class="tit2"><a href="#">锡剧扮相</a></span>
<span class="tit2"><a href="#">锡剧道具</a></span>
<span class="tit2"><a href="#">锡剧曲谱</a></span>
<span class="tit3"><a href="#">全部 ></a></span>
</div>
<div class="box1-ner">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img class="mar0" src="images/img4.jpg">
</div>
</div>
<div class="box2">
<div class="title">
<span class="tit">锡剧名家</span>
<span class="tit4"><a href="#">全部 ></a></span>
</div>
<div class="box2-ner">
<ul>
<li>
<img src="images/img5.jpg">
<h1>董红</h1>
</li>
<li>
<img src="images/img6.jpg">
<h1>沈佩华</h1>
</li>
<li>
<img src="images/img7.jpg">
<h1>王根兴</h1>
</li>
<li class="mar0">
<img src="images/img8.jpg">
<h1>梅兰珍</h1>
</li>
</ul>
</div>

</div>
<div class="box3">
<div class="title">
<span class="tit">锡剧影音</span>
<span class="tit2"><a href="#">锡剧视频</a></span>
<span class="tit2"><a href="#">锡剧音频</a></span>
<span class="tit3"><a href="#">全部 ></a></span>
</div>
<div class="box3-ner">
<ul>
<li>
<img src="images/img9.jpg">
<div class="wenzi">
<h1>《孟姜女》</h1>
<p>4位国家一级演员杨旻华、秦兴张唐兵、倪剑虹同台演绎，更是
让，观众们大呼过瘾并。。。</p>
</div>
</li>
<li>
<img src="images/img10.jpg">
<div class="wenzi">
<h1>《孟姜女》</h1>
<p>4位国家一级演员杨旻华、秦兴张唐兵、倪剑虹同台演绎，更是
让，观众们大呼过瘾并。。。</p>
</div>
</li>

<li class="mar0">
<img src="images/img11.jpg">
<div class="wenzi">
<h1>《孟姜女》</h1>
<p>4位国家一级演员杨旻华、秦兴张唐兵、倪剑虹同台演绎，更是
让，观众们大呼过瘾并。。。</p>
</div>
</li>

...

2.CSS

代码如下（节选示例）：

body {
   margin: 0 auto;
   font-size: 12px;
   font-family: "微软雅黑",arial;
   line-height: 22px;
   color: #141515;
}

div,p,input,ul,li,h1,h2,h3,h4 {
   height: auto;
   margin: 0;
   ; padding: 0;
   vertical-align: middle;
}

li {
list-style: none;
}

a {
text-decoration: none;
color: #141515;
}

a:hover {
color: #1575be;
}

img {
   border: 0;
   margin: 0;
   padding: 0;
}
.top{
   width:100%;
   height:91px;
   background:#c05a4e;
   }
.top-ner{
   width:1200px;
   height:91px;
   margin:0 auto;
   }
.logo{
   width:415px;
   height:79px;
   float:left;
   padding-top:10px;
   }
.sou{
   width:250px;
   height:30px;
   background:#FFF;
   float:right;
   margin-top:30px;
   }
.sous{
   width:250px;
   height:30px;
   background:url(../images/sous.png) no-repeat right ;
   border:none;
}
.nav{
   height:50px;
   width:100%;
   background:#7a282e;
   line-height:50px;
   margin-bottom:10px;
   }
.nav ul{
   display:block;
   width:1200px;
   margin:0 auto;
   }
.nav ul li{
   margin:0px 30px;
   float:left;
   color:#FFF;
   }
.nav ul li a{
   line-height:50px;
   font-size:16px;
   color:#FFF;
   }
.banner{
   width:1118px;
   height:505px;
   margin:0 auto;
   margin-bottom:30px;
   }
.title{
   height:55px;
   line-height:55px;
   }
.tit{
   font-size:20px;
   color:#000000;
   margin-right:90px;
   }
.tit2{
   margin:0px 15px;
   }