公告：九九网站目录为广大站长提供免费收录网站服务，会员可在线完成投稿无需添加友情链接。
一、作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、作品效果
视频演示
https://live.csdn.net/v/embed/239929
(title-E90JP 青岛民俗 7页 带登录注册 带jquery)]
截图演示
三、 作品代码
隣HTML代码
htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>title><linkhref="css/css.css"rel="stylesheet"type="text/css"/><linkhref="css/lb.css"rel="stylesheet"type="text/css"/><body><div><divstyle="width:960px; height:280px; margin:10px auto;"><divid="focus"><ul><li><ahref="two.html"target="_blank"><imgsrc="images/01.jpg"width="960"/>a>li>ul>div>div><divclass="mw">青岛民俗div><divid="main"><divid="main_im"><divclass="nav"><ahref="index.html">首页a><ahref="jing.html">服饰a><ahref="ju.html">饮食a><ahref="fengjing.html">居住a>div><pclass="i_p">青岛是一个现代化的城市，但也在向世界展示着地方民俗特色文化。地方民俗勾勒并凸显了青岛一地文化中的城市特色，而青岛能够为世界留下深刻记忆的，也正是囊括了民间传统文化在内的城市特色人文风貌。能够反映青岛一地人文风貌的，远不止于五花八门的传统民间工艺与民间小吃，还有近百年来青岛民间居住形式的里院建筑；具有浓郁地方特色的戏剧茂腔、柳腔；以妈祖为代表的沿海民间民俗信仰及各种民族文化节等。<br/>青岛民俗作为集历史文化旅游、民俗风情旅游、休闲度假旅游、趣味娱乐旅游和生态环境旅游于一体的主题文化公园，突出体现了观赏性、知识性、娱乐性、参与性和情趣性等特点。p><divclass="center "><imgsrc="images/t1.jpg"width="700"height="400"/>div><pclass="i_p">服饰民俗是指人们在服装、鞋帽、佩戴、装饰方面的风俗习惯。服饰和饮食一样，是每个人都离不开的。<br/>时代、气候以至人的地位、职业、性别、年龄都对服饰有着直接的影响，所以服饰民俗也有着十分广泛的内容。人们为了适应季节变化，制作出了单衣、夹衣、棉衣、皮衣等各类服装；为了装饰和美化生活，按照不同性别、年龄，创造了各个时期不同的发型、首饰和佩戴方式；为了区别不同的职业分工，又出现了样式各异的职业服装，使人们可以明显地看出穿着者的身份和职业。<br/>生活水平的高低对服饰民俗起着举足轻重的作用。旧时，青岛地区农民大都一年只有两套服装（一套单衣和一套棉衣），还要"新三年，旧三年，缝缝补补又三年"，这并不是为了节俭，而是贫穷所致。穿衣只是为了遮蔽身体、抵御风寒，根本谈不上装饰和审美功能。50年代以后农民开始穿针织或细布内衣，服装布料不断更新。改革开放以后，随着人们生活水平的提高，各类款式的服装争奇斗艳，人们的服饰再不是单纯为了蔽体御寒，而更多的则是为了美化生活而从款式、用料、色彩等多方面进行选择和穿戴。<br/>帽子辛亥革命前，男子多戴瓜皮帽，俗称"半帽"或"瓜皮子"，因其形状象半个西瓜而得名。瓜皮帽是用上尖下宽的多块绸布做成，用琉璃蛋或绒布结为顶饰（叫"帽葫芦"）。红色顶饰为青年人所戴；中老年戴的顶饰为蓝色；家中遇有丧事，则顶饰用白布包住。<br/>毡帽，又称"毡帽头"，农民和商贩多在天冷时戴用。帽分左、右、后3块，翻上去是一圆形帽头，折下来可盖住面颊和后颈，多为褐色。p><pclass="i_p">p>div>div><divid="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:0auto;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:1pxsolidccc;padding-bottom:10px;}.shuomingdt{height:30px;line-height:30px;font-weight:bold;text-indent:10px;}.shuomingdd{line-height:20px;padding:5px20px;}/* qqshop focus */focus{width:960px;height:280px;overflow:hidden;position:relative;}focusul{height:380px;position:absolute;}focusulli{float:left;width:960px;height:280px;overflow:hidden;position:relative;background:000;}focusullidiv{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:5px10px;right:0;bottom:0;text-align:right;}focus.btnspan{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:fff;}focus.btnspan.on{background:fff;}focus.preNext{width:45px;height:100px;position:absolute;top:90px;background:url("img/sprite.png") no-repeat00;cursor:pointer;}focus.pre{left:0;}focus.next{right:0;background-position:right top;}四、更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）：
【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
Gitee仓库地址（来个Star吧~）：https://gitee.com/zhanyuqiu2022/my-app
举报/反馈
