【HTML+CSS】静态网页设计期末大作业——我的家乡美丽青岛

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】



二、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


三、🔗网站效果

▶️1.视频演示

E90JP 青岛民俗 7页 带登录注册 带jquery

🧩 2.图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


四、💒 网站代码

🧱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" type="text/css" />
  <link href="css/lb.css" rel="stylesheet" type="text/css" />

<body>
  <div>
    <div style="width:960px; height:280px; margin:10px auto;">
      <div id="focus">
        <ul>
          <li><a href="two.html" target="_blank"><img src="images/01.jpg" width="960" /></a></li>

        </ul>
      </div>
    </div>
    <div class="mw">青岛民俗</div>
    <div id="main">
      <div id="main_im">
        <div class="nav"><a href="index.html">首页</a><a href="jing.html">服饰</a><a href="ju.html">饮食</a><a
            href="fengjing.html">居住</a></div>
        <p class="i_p">
          青岛是一个现代化的城市,但也在向世界展示着地方民俗特色文化。地方民俗勾勒并凸显了青岛一地文化中的城市特色,而青岛能够为世界留下深刻记忆的,也正是囊括了民间传统文化在内的城市特色人文风貌。能够反映青岛一地人文风貌的,远不止于五花八门的传统民间工艺与民间小吃,还有近百年来青岛民间居住形式的里院建筑;具有浓郁地方特色的戏剧茂腔、柳腔;以妈祖为代表的沿海民间民俗信仰及各种民族文化节等。<br />

          青岛民俗作为集历史文化旅游、民俗风情旅游、休闲度假旅游、趣味娱乐旅游和生态环境旅游于一体的主题文化公园,突出体现了观赏性、知识性、娱乐性、参与性和情趣性等特点。 </p>
        <div class="center ">
          <img src="images/t1.jpg" width="700" height="400" />
        </div>
        <p class="i_p">服饰民俗是指人们在服装、鞋帽、佩戴、装饰方面的风俗习惯。服饰和饮食一样,是每个人都离不开的。<br />
          时代、气候以至人的地位、职业、性别、年龄都对服饰有着直接的影响,所以服饰民俗也有着十分广泛的内容。人们为了适应季节变化,制作出了单衣、夹衣、棉衣、皮衣等各类服装;为了装饰和美化生活,按照不同性别、年龄,创造了各个时期不同的发型、首饰和佩戴方式;为了区别不同的职业分工,又出现了样式各异的职业服装,使人们可以明显地看出穿着者的身份和职业。<br />
          生活水平的高低对服饰民俗起着举足轻重的作用。旧时,青岛地区农民大都一年只有两套服装(一套单衣和一套棉衣),还要&quot;新三年,旧三年,缝缝补补又三年&quot;,这并不是为了节俭,而是贫穷所致。穿衣只是为了遮蔽身体、抵御风寒,根本谈不上装饰和审美功能。50年代以后农民开始穿针织或细布内衣,服装布料不断更新。改革开放以后,随着人们生活水平的提高,各类款式的服装争奇斗艳,人们的服饰再不是单纯为了蔽体御寒,而更多的则是为了美化生活而从款式、用料、色彩等多方面进行选择和穿戴。<br />
          帽子
          辛亥革命前,男子多戴瓜皮帽,俗称&quot;半帽&quot;&quot;瓜皮子&quot;,因其形状象半个西瓜而得名。瓜皮帽是用上尖下宽的多块绸布做成,用琉璃蛋或绒布结为顶饰(叫&quot;帽葫芦&quot;)。红色顶饰为青年人所戴;中老年戴的顶饰为蓝色;家中遇有丧事,则顶饰用白布包住。<br />
          毡帽,又称&quot;毡帽头&quot;,农民和商贩多在天冷时戴用。帽分左、右、后3块,翻上去是一圆形帽头,折下来可盖住面颊和后颈,多为褐色。</p>
        <p class="i_p"></p>
      </div>
    </div>
    <div id="foot"></div>
  </div>
</body>

</html>



🏠CSS样式代码


 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.clearfix {zoom:1;}

ul,li {list-style:none;}

img {border:0;}



.wrapper {width:960px; margin:0 auto; padding-bottom:50px;}



h1 {height:50px; line-height:50px; font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;}



.shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;}

.shuoming dt {height:30px; line-height:30px; font-weight:bold; text-indent:10px;}

.shuoming dd {line-height:20px; padding:5px 20px;}



/* qqshop focus */

#focus {width:960px; height:280px; overflow:hidden; position:relative;}

#focus ul {height:380px; position:absolute;}

#focus ul li {float:left; width:960px; height:280px; overflow:hidden; position:relative; background:#000;}

#focus ul li div {position:absolute; overflow:hidden;}

#focus .btnBg {position:absolute; width:960px; height:20px; left:0; bottom:0; background:#000;}

#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}

#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}

#focus .btn span.on {background:#fff;}

#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url("img/sprite.png") no-repeat 0 0; cursor:pointer;}

#focus .pre {left:0;}

#focus .next {right:0; background-position:right top;}
 





五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值