🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于、两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!
📂文章目录
一、👨🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱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结构代码
<html><head><title>未标题-1</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="css/style.css" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/css/style.css" rel="stylesheet" type="text/css"></head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style=" text-align:center;"><!-- Save for Web Slices (未标题-1) --><table id="__01" width="960" height="808" border="0" cellpadding="0" cellspacing="0" style="text-align:left; margin:0px auto;"><tr><td colspan="5"><img src="images/index_01.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_01.jpg" width="960" height="205" alt=""></td></tr><tr><td colspan="5"><img src="images/index_02.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_02.jpg" width="960" height="38" alt=""></td></tr><tr><td rowspan="5"><img src="images/index_03.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_03.jpg" width="32" height="562" alt=""></td><td width="216" height="463" rowspan="3" align="center" valign="top" class="dh"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="dhtable"><tr><td align="center"><a href="index.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/index.html" class="hover">首页</a></td></tr><tr><td align="center"><a href="Templates/zhongguoaoyun.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguoaoyun.html">中国奥运</a></td></tr><tr><td align="center"><a href="Templates/zhongguowenhua.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguowenhua.html">中国文化</a></td></tr><tr><td align="center"><a href="Templates/zhongguojingju.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguojingju.html">中国京剧</a></td></tr><tr><td align="center"><a href="Templates/sjsdzg.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/sjsdzg.html">舌尖上的中国</a></td></tr><tr><td align="center"><a href="Templates/zhongguohaoshengyin.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguohaoshengyin.html">中国好声音</a></td></tr><tr><td align="center"><a href="Templates/zhongguohangtian.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguohangtian.html">中国航天</a></td></tr><tr><td align="center"><a href="Templates/zhongguolishi.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguolishi.html">中国历史</a></td></tr></table></td><td rowspan="4"><img src="images/index_05.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_05.jpg" width="21" height="480" alt=""></td><td width="670" height="241" valign="top" class="wh"><p>中华文化,亦叫华夏文化、华夏文明,即汉族文化,汉文化。且流传年代久远,地域甚广,以文化圈概念亦被称为“汉文化圈”。中国文化不但对韩国、日本,对东南亚、南亚一些国家如菲律宾、新加坡、越南等国家和地区都产生了深远的影响,郑和七下西洋更是加深了这种影响。由此形成了世所公认的以中国文化为核心的东亚文化圈。随着中国国力的强盛,随着中国国际地位的提高,世界各国包括亚洲、欧洲在内的一些国家都对中国文化给予了高度的认同和重视。 《中国文化》杂志为延安时期的刊物,创刊号毛泽东撰写重要历史性文章。</p><p style="float:right; margin:7px 15px 0px 0px;"><a href="Templates/zhongguowenhua.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguowenhua.html" style=" color:#000; text-decoration:none;">更多</a></p></td><td rowspan="5"><img src="images/index_07.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_07.jpg" width="21" height="562" alt=""></td></tr><tr><td><img src="images/index_08.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_08.jpg" width="670" height="24" alt=""></td></tr><tr><td width="670" height="198" valign="top"><table width="100%" border="0" cellspacing="5" cellpadding="0" class="tp"><tr><td><a href="Templates/zhongguohangtian.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguohangtian.html"><img src="images/1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/1.jpg" width="209" height="157">神舟十号发射成功</a></td><td><a href="Templates/aoyunmeitu.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/aoyunmeitu.html"><img src="images/a1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/a1.jpg" width="209" height="157">奥运美图</a></td><td><a href="Templates/zhongguojingju.html" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/Templates/zhongguojingju.html"><img src="images/j1.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/j1.jpg" width="209" height="157">京剧沙家浜</a></td></tr></table></td></tr><tr><td><img src="images/index_10.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_10.jpg" width="216" height="17" alt=""></td><td><img src="images/index_11.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_11.jpg" width="670" height="17" alt=""></td></tr><tr><td colspan="3"><img src="images/index_10.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_10.jpg" width="907" height="82" alt=""></td></tr></table><!-- End Save for Web Slices --><embed autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" src="music/1.mp3" tppabs="http://www.xiaoyazhi.xyz/bishe/xiu5/music/1.mp3"></body></html>
💒CSS样式代码
/* CSS Document */*{padding:0px; margin:0px;}img{border:none;}body{font-size:12px; line-height:24px; background:url("../images/bg.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/xiu5/images/bg.jpg*/ repeat-x #ae0000;}.dh{background:url("../images/index_04.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_04.jpg*/ no-repeat; padding:50px 30px;}.dh a{color:#480201; text-decoration:none; font-size:14px; font-weight:bold; display:block; width:157px; height:33px; background:#f6b213; line-height:33px; margin:5px 0px;}.dh a:hover{background:#e9c9c8;}.dh a.hover{background:#e9c9c8;}.wh{padding:70px 40px 0px; background:url("../images/index_06.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/xiu5/images/index_06.jpg*/ no-repeat;}p{font-size:12px; line-height:24px; padding:0px; margin:0px;}.tp tr td{background:#480201; padding:5px; text-align:center; color:#fff; font-size:12px; line-height:25px;}.tp tr td img{display:block;}.tp tr td a{color:#fff; text-decoration:none;}.wh2{background:#e9c9c8; border:1px solid #610000; padding:20px;}.wh2 div{margin:20px 0px;}.tit{background:url("../images/tit.jpg")/*tpa=http://www.xiaoyazhi.xyz/bishe/xiu5/images/tit.jpg*/ no-repeat; height:35px; color:#fff; padding-left:50px; font-size:13px;}.tit a{color:#fff; text-decoration:none;}.tit a.tit_bg{color:#f6b213; font-weight:bold;}.jp{border-bottom:1px solid #8f5654; border-right:1px solid #8f5654; margin-top:20px;}.jp tr td{border-left:1px solid #8f5654; border-top:1px solid #8f5654; line-height:30px; font-size:12px; padding-left:10px;}.fh{float:right; margin:20px 0px; width:100px; height:30px; display:block; text-align:center; line-height:30px; background:#000; color:#fff;}h4{padding:0px; margin:0px;}.sj{margin:20px 0px; font-size:12px; text-align:center; line-height:25px;}.sj img{display:block;}
六、🥇 如何让学习不再盲目
第一、带着目标去学习,无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么,是想解决什么问题,实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的,书籍是浩如烟海的。我们尽情徜徉其中的时候,千万不要被海水淹死,没有自我了。在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识
第三、学到了就要用到
有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事,但只有会学习的人,才有价值。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬