626. 大学生HTML期末大作业 ―【丝绸之路文化主题网页】 Web前端网页制作 html+css+js_用web设计网页主题内容 ① 定义一个 .main 样式,宽 1400px;高 500px;背景颜色-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/143764217

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、鼠标滑动特效、留言表单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

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

四、代码展示

1.html

<!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>
<link href="css/css.css" rel="stylesheet" media="screen" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
       $(window).load(function() {
           $('.flexslider').flexslider();
       });
</script>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" />
</head>
<body>
<div class="con">
<div class="head">
<div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>
<div class="nav">
<ul>
<li><a href="index.html">首页 </a></li>
<li><a href="html/gallery.html">丝绸展览 </a></li>
<li><a href="html/youzhi.html">优质丝绸 </a></li>
<li><a href="html/gezhong.html">各种丝绸 </a></li>
<li><a href="html/yangchan.html">养蚕艺术 </a></li>
<li><a href="html/liuyan.html">留言建议 </a></li>
</ul>
</div>
<div class="clear"></div>

<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="main">
<div class="left">
<div class=" l1"><a href="#"><img src="images/sg.jpg" /></a></div>
<div class="search">
<input class="s_input" />
</div>
<div class="left_nav">
<ul>
<li><a href="html/gezhong.html">各种丝绸 </a><span><a href="html/gezhong.html">23 </a></span></li>
<li><a href="html/gallery.html">丝绸展览 </a><span><a href="#">10 </a></span></li>
<li><a href="html/liuyan.html">留言建议 </a><span><a href="#">0 </a></span></li>
</ul>
</div>


</div>

<div class="right">
<div class="dm">
<div class="flexslider">
<ul class="slides">
<li><a href="#" > <img src="images/d1.jpg" width="900" /></a> </li>
<li> <a href="#" ><img src="images/d2.jpg" width="900" /></a> </li>
<li> <a href="#" ><img src="images/d3.jpg" width="900" /></a></li>
<li> <a href="#" ><img src="images/d4.jpg" width="900" /></a></li>
</ul>
</div>
</div>
<div class="right_nav">
<h2>推荐阅读</h2>
<p>丝绸是中国古老文化的象征，中国古老的丝绸业为中华民族文化织绣了光辉的篇章，对促进世界人类文明的发展作出了不可磨灭的贡献。中国丝绸以其卓越的品质、精美的花色和丰富的文化内涵闻名于世。</p>
<p>几千年前，当丝绸沿着古丝绸之路传向欧洲，它所带去的，不仅仅是一件件华美的服饰、饰品，更是东方古老灿烂的文明，丝绸从那时起，几乎就成为了东方文明的传播者和象征。目前已知的最早丝织物，是出土于距今约4700年良诸文化的遗址。</p>
<p>中国是家蚕丝的发源地，养蚕，缫丝是中国古代在纤维利用上最重要的成就。早在新石器时代，中国已发明丝绸织造以及朱砂染色技术，此后随着织机的不断改进，印染技术的不断提高，丝织品种日益丰富，并形成了一个完整的染织工艺体系，使中国古代的丝绸染织技术领先于世界各国。</p>
<p></p>
<p></p>

</div>

<div class="Gallery_nav pt20">
<ul>
<h3>丝绸展览</h3>
<li><a href="#"><img src="images/zhanlan/1.jpg" /></a></li>
<li><a href="#"><img src="images/zhanlan/2.jpg" /></a></li>
<li><a href="#"><img src="images/zhanlan/3.jpg" /></a></li>
<li><a href="#"><img src="images/zhanlan/4.jpg" /></a></li>


</ul>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
/* -------------------common css -------------------------------*/
*{ margin:0; padding:0; font-family:Myriad Pro;}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}
.center{text-align:center}
.tl{ text-align:left;}
.tr{ text-align:right;}
.pt20{ padding-top:20px;}
.pt30{ padding-top:30px;}
.m10{ margin:10px;}
.em{ text-indent:2em;}
body{ background:url(../images/bj.jpg) top center fixed no-repeat;}
.con{ width:1200px; height:auto; overflow:hidden; min-height:500px; margin:auto; background:url(../images/bj.png) top center repeat;}

/*-------------head--------------*/
.head{ width:1200px; height:60px; padding-top:10px; margin:auto;}
.logo{ float:left;}
/*-------------nav--------------*/
.nav{ width:800px; height:50px; margin-top:10px; margin-left:10px; float:left; }
.nav ul{ padding-left:30px;}
.nav li{ float:left; padding:0px 15px;}
.nav li a{font-size:24px; color:#333; line-height:50px; }
.nav li a:hover{ color:#800; text-decoration:none;}

.main{width:1200px; height:auto; min-height:500px; margin:auto; padding-bottom:30px;}
.left{ width:200px; height:auto; float:left; margin-left:20px;}
.l1{ margin-top:50px; width:170px; height:166px; border:5px solid #ccc;}
.l1 img{width:170px; height:166px;}
.search{ width:160px; height:45px; margin-top:30px; background:url(../images/search.png) top center no-repeat;}
.s_input{ width:110px; height:25px; margin-left:40px; margin-top:5px; background:none; border:none; font-size:16px; color:#666;}
.left_nav{width:160px; height:auto; margin-top:10px; }
.left_nav ul{ }
.left_nav li a{font-size:16px; color:#a3a2a2; line-height:26px;font-family:黑体;}
.left_nav li span{ float:right;}
.left_nav li span a{ ont-size:16px; color:#e1a6ad; line-height:26px; text-decoration:underline;}
.left_contact{ width:160px; height:auto; float:left; margin-top:120px;}
.left_contact ul{ }
.left_contact li{}
.left_contact h2{ font-size:20px; color:#a3a2a2; line-height:36px; font-family:Myriad Pro;}
.left_contact li a{ font-size:16px; color:#a3a2a2; line-height:20px; font-family:Myriad Pro;}

.right{width:920px; height:auto; float:left; margin-left:20px;}
.dm{ width:900px; height:380px; padding-top:50px;}
.right_nav{ width:880px; height:auto; float:left; margin-left:40px; margin-top:30px;}
.right_nav p{font-size:14px; text-indent:2em;color:#555; line-height:26px;font-family:Myriad Pro}
.right_nav ul{ }
.right_nav li{ background:url(../images/d1.png) left top no-repeat; padding-left:20px;}
.right_nav h2{ font-size:22px; color:#333; line-height:44px;font-family:Myriad Pro;}
.right_nav li a{ font-size:22px; color:#a3a2a2; text-decoration:underline; line-height:26px; font-family:Myriad Pro;}
.right_nav li a:hover{ font-size:22px; color:#800;}

.Gallery_nav{ width:880px; height:auto; float:left; margin-left:40px; margin-top:30px;}
.Gallery_nav h2{font-size:50px; color:#555; line-height:80px;font-family:Myriad Pro;}
.Gallery_nav ul{ }
.Gallery_nav li{ float:left; margin:10px;}
.Gallery_nav li img{ width:200px; height:150px;}

.right_des{width:800px; height:auto; float:left; margin-left:40px; margin-top:30px;}
.right_des h1{ font-size:22px; text-indent:1em;color:#333; line-height:56px;font-family:Myriad Pro;}
.right_des p{ font-size:14px; text-indent:2em;color:#555; line-height:26px;font-family:Myriad Pro;}

.pinlun{width:880px; height:auto; margin:auto; margin-top:40px;background:url(../images/lanbj.png) top repeat-x;padding-bottom:20px;}
.pinlun_t{width:880px; height:30px; margin:auto; padding:10px; padding-left:0px; border-bottom:3px solid #dc1010; color:#3e3e3e; font-size:24px;font-family:Microsoft YaHei;}
.pinlun_fabiao{width:800px; height:auto; margin:auto; padding:5px; }
.pinlun_fabiao_l{ color:#3e3e3e; font-size:24px;font-family:Microsoft YaHei; float:left;}
.pinlun_fabiao_r{padding:5px; color:#555; font-size:14px; text-align:right;}

...