静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品..."/>
基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品...
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、🌐网站演示
- 五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🍵茶文化网站、🏳️🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。
二、✍️网站描述
🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码)。
四、🌐网站演示
五、⚙️ 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>剪纸</title>
</head>
<body>
<nav class="menu">
<ul class="center">
<li><a href="index.html">网站首页</a></li>
<li><a href="jieshao.html">基本介绍</a></li>
<li><a href="fazhan.html">发展历史</a></li>
<li><a href="fenlei.html">作品分类</a></li>
<li><a href="tupian.html">剪纸图片</a></li>
<li><a href="huodong.html">各地活动</a></li>
</ul>
</nav>
<div class="banner"><img src="images/sheshou.jpg" width="100%" /></div>
<div class="content center nmm">
<div class="bar">
<h3>剪纸<br>
<small>中国剪纸是世界非物质文化遗产之一</small></h3>
</div>
<div class="text">
<div class="le">
<img src="images/a.png" class="turn">
</div>
<div class="rs">
中国剪纸是一种用剪刀或刻刀在纸上剪刻花纹，用于装点生活或配合其他民俗活动的民间艺术。在中国，剪纸具有广泛的群众基础，交融于各族人民的社会生活，是各种民俗活动的重要组成部分。其传承赓续的视觉形象和造型格式，蕴涵了丰富的文化历史信息，表达了广大民众的社会认知、道德观念、实践经验、生活理想和审美情趣，具有认知、教化、表意、抒情、娱乐、交往等多重社会价值。<br>
2006年5月20日，剪纸艺术遗产经国务院批准列入第一批国家级非物质文化遗产名录。 <br>
2009年9月28日至10月2日举行的联合国教科文组织保护非物质文化遗产政府间委员会第四次会议上，中国申报的中国剪纸项目入选“人类非物质文化遗产代表作名录”。<br>
2018年12月，教育部办公厅关于公布南京航空航天大学为中国剪纸中华优秀传统文化传承基地。 </div>
</div>
<div class="clear"></div>
<div class="bar">
<h3>剪纸图片</h3>
</div>
<div class="img">
<ul>
<li> <img src="images/t1.jpg" > </li>
<li> <img src="images/t2.jpg" > </li>
<li> <img src="images/t3.jpg" > </li>
<li> <img src="images/t4.jpg" > </li>
</ul>
<div class="clear"></div>
</div>
</div>
<footer class="end">
<p>剪纸</p>
</footer>
</body>
</html>💒CSS样式代码
@charset "utf-8";
/* CSS Document */
ul,
li,
h1,
h2,
h3,
p {
padding: 0;
margin: 0;
list-style: none
}
a {
text-decoration: none;
color: #333;
}
html {
background: url(../images/bg3.jpg)
}
body {
max-width: 1920px;
min-width: 1000px;
margin: 0 auto;
line-height: 30px;
font-size:18px;
}
.center {
width: 1000px;
margin: 0 auto
}
.banner{ width:1000px ; padding-top:0px; margin:0px auto}
.banner img {
display: block
}
.clear {
clear: both
}
.menu li {
list-style: none
}
.logo {
position: absolute;
top: 50px;
width: 250px;
height: 100px;
margin-left: 40px
}
.banner {
position: relative;
}
.fl {
float: left
}
.menu {
background:#CC0000;
width: 100%;
text-align: center;
top: 0;
height:70px;
left: 0;
z-index: 999;
}
.menu li a {
font-weight: bold;
color: #fff;
text-decoration: none;
}
.menu li {
font-size: 18px;
float: left;
margin: 0px;
padding: 20px 20px;
width: 125px
}
.menu li.on a,
.menu li:hover a {
color: #FFCC99
}
.right {
float: right;
width: 660px;
padding: 20px
}
.left {
min-height: 300px;
float: left;
width: 630px;
padding: 10px
}
.content {
padding-bottom: 20px;
}
.ad {
height: 220px;box-shadow: 0px 10px 5px #888888;
}
.ad img {
float: left;
margin-right: 30px
}
.tit{ font-weight:normal; padding-bottom:30px; text-align:center; font-size:30px;}
.end {
clear: both;
background: #F43;
color: #fff;
padding: 30px 0;
text-align: center;
}
.banner{
margin-top: 40px;
}
.produce img {
margin: 0 20px 20px 0
}
.produce {
line-height: 30px
}
.pad {
padding: 20px;
display: block
}
.pics p {
margin: 1px;
text-align: center
}
.imglist {
width: 840px;
margin: 0 auto
}
.imglist li {
float: left;
width: 400px;
margin: 10px;
text-align: center
}
.scrollleft {
margin: 0 30px
}
.scrollleft li {
float: left
}
.news li {
padding: 5px;
}
.title {
text-align: center;
color: #F00;
padding: 10px
}
.tu div {
width: 48%;
line-height: 24px;
text-align: center;
margin: 1%;
float: left
}
.tu strong {
color: #000;
padding: 20px 0;
display: block;
font-size: 16px;
}
.tu div img {
width: 100%;
height: 240px
}
.msg>div {
padding: 10px
}
.bod {
margin: 10px 0;
background:#fff;
}
.more {
background: #ff0000;
color: #fff;
display: inline-block;
padding: 5px 15px
}
.pj>div {
float: left;
width: 46%;
margin: 2%;
}
.dl {
margin: 0 auto;
width: 450px;
padding: 30px 0;
padding-top: 0
}
.dl span {
display: block;
padding-right: 15px;
font-size: 18px;
padding: 5px 0
}
.dl div {
margin: 10px 0
}
.dl div input {
padding: 10px 0;
width: 100%
}
#submit2 {
background: #000;
border: none;
color: #fff;
width: 100%
}
.tc {
text-align: center
}
.dl2 {
margin: 0 auto;
background: #b8b7b2;
padding: 30px 0
}
.dl2 span {
display: block;
text-align: left;
padding-right: 15px;
}
.dl2 div {
margin: 10px 0
}
.bar a {
color: #000;
float: right
}
.bar small{ font-weight:normal; font-size:22px; padding-top:25px; display:block}
.bar {
margin: 20px;
margin-bottom: 5px;
text-align: center;
clear: both;
color: #fff;
font-weight: bold;
padding: 14px 25px
}
.bar h3 {
color: #CC0000;
padding: 22px 0;
font-size: 40px;
}
.sc {
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 30px
}
.sc img {
margin-top: 30px
}
.sc strong {
font-size: 18px;
color: #CC0000;
display: block;
padding: 15px 0
}
.nmm p{
margin-bottom: 30px;
text-indent: 3rem;
font-size: 16px;
line-height: 25px;
}
.nmm .img{ padding-bottom:50px}
.nmm .img ul li{
width: 25%;
float: left;
padding: 0 10px;
box-sizing: border-box;
}
.nmm .img ul li img{
width: 100%;
height: 250px;
display: block;
}
.nmm .img ul li p{
padding: 10px 0;
text-align: center;
text-indent:0
}
.le{ float:left; width:400px}
.rs{ float:right; width:600px}
.turn{
width:350px;
height: 350px;
animation:turn 3s linear infinite;
}
@keyframes{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}六、🥇 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
更多推荐
基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品...
发布评论