网站建设技术大赛试题,选择好的佛山网站建设,泰安最新消息今天,重庆做网络优化公司电话#x1f389;精彩专栏推荐 #x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 #x1f482; 作者主页: 【主页——#x1f680;获取更多优质源码】 #x1f393; web前端期末大作业#xff1a; 【#x1f4da;毕设项目精品实战案例 (10… 精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页——获取更多优质源码】 web前端期末大作业 【毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式【HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码【 Echarts大屏展示大数据平台可视化(150套) 】 HTMLCSSJS实例代码 【️HTMLCSSJS实例代码 (炫酷特效网页代码) 继续更新中…】 免费且实用的WEB前端学习指南 【web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师技术组长教学总监曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰难凉热血多年过去历经变迁物是人非。 然而对于技术的探索和追求从未停歇。 坚持原创热衷分享初心未改继往开来 文章目录 一、网站题目二、✍️网站描述三、网站介绍四、网站演示五、⚙️ 网站代码HTML结构代码CSS样式代码 六、 如何让学习不再盲目七、更多干货 一、网站题目 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。 二、✍️网站描述
️ 网页中包含DivCSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等视频音频元素同时设计了logo源文件基本期末作业所需的知识点全覆盖。 一套优质的网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分。所有页面相互超链接可到三级页面有5-10个页面组成。页面样式风格统一布局显示正常不错乱使用DivCss技术。菜单美观、醒目二级菜单可正常弹出与跳转。要有JS特效如定时切换和手动切换图片轮播。页面中有多媒体元素如gif、视频、音乐表单技术的使用。页面清爽、美观、大方不雷同。 。不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。 三、网站介绍
网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面计划采用最新的网页编程语言HTML5CSS3JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器已达到打开后就能即时看到网站的效果。
网站素材方面计划收集各大平台好看的图片素材并精挑细选适合网页风格的图片然后使用PS做出适合网页尺寸的图片。
网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
网页编辑方面网页作品代码简单可使用任意HTML编辑软件如Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作。 其中 1html文件包含其中index.html是首页、其他html为二级页面 2 css文件包含css全部页面样式,文字滚动, 图片放大等 3 js文件包含js实现动态轮播特效, 表单提交, 点击事件等等个别网页中运用到js代码。 四、网站演示 五、⚙️ 网站代码
HTML结构代码
!doctype html
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8title潭州学院官方平台/titlemeta nameKeywords content关键词,关键词meta namedescription content/head
body!--header start--div classheaderdiv classh_top!--h_logo start--div classh_logoa href#img srcpicture/logo.png alt潭州学院 width145 height33/a/div!--end h_logo--!--h_nav start--div classh_navullia href#首页/a/lilia href#公开课/a/lilia href#活动/a/lilia href#讲师团队/a/lilia href#论坛/a/li/ul/div!--end h_nav--!--h_search start--div classh_searchinput typetext classh_texta href# classh_btn/a/div!--end h_search--!--h_message start--div classh_messagediv classh_infoa href#/ai/i/divdiv classh_pica href#img srcpicture/t1.jpg altArry老师 width30 height30/a/div/div!--end h_message--/div/div!--end header-- !--banner start--div classbanner /div!--end banner--!--menu start--div classmenudiv classm_condiv classm_listh2软件学院/h2ullia href#网页制作/a/lilia href#Java/a/lilia href#微信二次开发/a/lilia href#C/a/lilia href#Android/a/lilia href#iOS/a/lilia href#PHP/a/lilia href#游戏开发/a/li/ul/divdiv classm_listh2职业技能/h2ullia href#网络营销/a/lilia href#SEO/a/lilia href#淘宝美工/a/lilia href#影楼后期/a/lilia href#淘宝运营/a/li/ul/divdiv classm_listh2语言学习/h2ullia href#韩语/a/lilia href#日语/a/lilia href#泰语/a/lilia href#西班牙语/a/li/ul/div/div/lilidiv classt_pica href#img srcpicture/t1.jpg altArry老师 width66 height66/a/divdiv classt_desca href#Arry老师/ap潭州软件学院创始人/pspan关注999999/span/div/lilidiv classt_pica href#img srcpicture/xy1.jpg altArry老师 width66 height66/a/divdiv classt_desca href#Arry老师/ap潭州软件学院创始人/pspan关注999999/span/div/lilidiv classt_pica href#img srcpicture/xy2.jpg altArry老师 width66 height66/a/divdiv classt_desca href#Arry老师/ap潭州软件学院创始人/pspan关注999999/span/div/lilidiv classt_pica href#img srcpicture/xy3.jpg altArry老师 width66 height66/a/divdiv classt_desca href#Arry老师/ap潭州软件学院创始人/pspan关注999999/span/div/lilidiv classt_pica href#img srcpicture/xy4.jpg altArry老师 width66 height66/a/divdiv classt_desca href#Arry老师/ap潭州软件学院创始人/pspan关注999999/span/div/lilidiv classt_pica href#img srcpicture/xy5.jpg altArry老师 width66 height66/a/divdiv classt_desca href#Arry老师/ap潭州软件学院创始人/pspan关注999999/span/div/li/uldiv classclear/div/div/div!--end teacher--!--student start--div classstudenth2学员动态/h2div classs_boxulliimg srcpicture/xy1.jpg alt欧巴 width216 height280div classs_yy/divdiv classs_desch3欧巴/h3p欧巴韩语中“哥哥”的意思。欧巴在韩国是尊称也是很亲密的男女之间的称呼。常见于韩剧女生对男生称欧巴。/pa href#详情/a/div/liliimg srcpicture/xy2.jpg alt欧巴 width216 height280div classs_yy/divdiv classs_desch3欧巴/h3p欧巴韩语中“哥哥”的意思。欧巴在韩国是尊称也是很亲密的男女之间的称呼。常见于韩剧女生对男生称欧巴。/pa href#详情/a/div/liliimg srcpicture/xy3.jpg alt欧巴 width216 height280div classs_yy/divdiv classs_desch3欧巴/h3p欧巴韩语中“哥哥”的意思。欧巴在韩国是尊称也是很亲密的男女之间的称呼。常见于韩剧女生对男生称欧巴。/pa href#详情/a/div/liliimg srcpicture/xy4.jpg alt欧巴 width216 height280div classs_yy/divdiv classs_desch3欧巴/h3p欧巴韩语中“哥哥”的意思。欧巴在韩国是尊称也是很亲密的男女之间的称呼。常见于韩剧女生对男生称欧巴。/pa href#详情/a/div/lili classs_en_liimg srcpicture/xy5.jpg alt欧巴 width216 height280div classs_yy/divdiv classs_desch3欧巴/h3p欧巴韩语中“哥哥”的意思。欧巴在韩国是尊称也是很亲密的男女之间的称呼。常见于韩剧女生对男生称欧巴。/pa href#详情/a/div /li/uldiv classclear/div/div/div!--end student--!--links start--div classlinksh2友情链接/h2div classl_aa href#YY直播/a|a href#高考派/a|a href#学习方法网/a|a href#高分网/a|a href#VOA英语学习网/a|a href#英语单词表/a|a href#校导网/a|a href#四六级英语/a|a href#雅思考试/a|a href#托福考试/a|a href#播种网/a|a href#环球北美考试院/a|a href#环球雅思/a|a href#六一儿童网/a|a href#可可英语/a|a href#托福论坛/a|a href#教育城/a/div/div!--end links--/div!--end teams--!--footer start--div classfooterdiv classf_condiv classf_descdldt关于潭州/dtdda href#了解潭州/a/dddda href#加入潭州/a/dddda href#联系我们/a/dd/dldldt学习资讯/dtdda href#学院课程/a/dddda href#就业指南/a/dd/dldldt服务中心/dtdda href#安卓APP/a/dddda href#IOS APP/a/dd/dldldt关注我们/dtdda href# classshare f_wb/aa href# classshare f_qq/a/dd/dl/divdiv classf_teldiv classf_qrcodeimg srcpicture/weixin.png alt潭州官方微信 width102 height127/divdiv classf_timep classf_phone400-009-6359/pp classf_pricespan周一至周六 9:30-23:00/spanspan仅收市话费/span/pp classf_mm24小时在线客服/p/div/divdiv classclear/div/div/div!--end footer--!--copyright start--div classcopyrightCopyright copy; 2013-2014 www.mooncollege.cn All Rights Reserved 版权所有湖南潭州教育咨询有限公司 备案号备13016338号/div!--end copyright--/body
/html
CSS样式代码
style typetext/css*{margin:0;padding:0;}body{font-size:12px;font-family:微软雅黑;color:#666;background:#eeeff3;}img{border:0;}/*header start*/.header{width:100%;height:70px;background:#15171f;}.header .h_top{width:1180px;height:70px;margin:0 auto;}.header .h_top .h_logo{width:220px;padding-top:16px;float:left;}/*h_nav start*/.header .h_top .h_nav{width:650px;height:70px;float:left;color:#fff;list-style:none;}.header .h_top .h_nav ul li{list-style:none;float:left;}.header .h_top .h_nav ul li a{text-decoration:none;display:block;line-height:70px;padding: 0 20px 0 20px;color:#fff;font-size:14px;margin:0 5px 0 5px;}.header .h_top .h_nav ul li a:hover{background:#323744;}/*end h_nav*//*h_search start*/.header .h_top .h_search{width:160px;height:32px;border:1px solid #323744;background:#323744;float:left;margin-top:18px;}.header .h_top .h_search:hover{border:1px solid #818997;}.header .h_top .h_search .h_text{width:125px;height:32px;border:0;background:#323744;font-size:14px;font-family:微软雅黑;color:#fff;line-height:32px;padding-left:10px;float:left;}.header .h_top .h_search .h_btn{width:20px;height:20px;display:block;float:left;margin-top:5px;background:url(picture/pe_icon.png) no-repeat -368px 0;}/*end h_search*//*h_message start*/.header .h_top .h_message{width:112px;height:70px;float:left;margin-left:34px;}.header .h_top .h_message .h_info{width:52px;height:70px;float:left;position:relative;}.header .h_top .h_message .h_info:hover{background:#323744;}.header .h_top .h_message .h_info a{width:22px;height:16px;display:block;background:url(picture/pe_icon.png) no-repeat -368px -23px;margin: 26px auto;}.header .h_top .h_message .h_info i{width:7px;height:7px;display:block;background:#eb6b83;border-radius:4px;border:1px solid #FFF;position:absolute;top:17px;left:34px;}.header .h_top .h_message .h_pic{width:60px;height:70px;float:left;}.header .h_top .h_message .h_pic:hover{background:#323744;}.header .h_top .h_message .h_pic a{display:block;width:30px;height:30px;margin: 20px auto;}.header .h_top .h_message .h_pic a img{border-radius:15px;}/*end h_message*//*banner start*/.banner{width:100%;height:375px;background:url(picture/banner.jpg) no-repeat top center;}/*end banner*//*menu start*/.menu{width:100%;height:110px;border-bottom:1px solid #d9dce1;background:#fff;}.menu .m_con{width:1180px;height:110px;margin:0 auto;}.menu .m_con .m_list{width:215px;height:80px;border-right:1px solid #d9dce1;margin-top:12px;margin-left:20px;float:left;}.menu .m_con .m_list h2{font-size:18px;color:#5580fb;font-weight:500;line-height:36px;}.menu .m_con .m_list ul li{list-style:none;float:left;margin-right:10px;line-height:22px;}.menu .m_con .m_list ul li a{color:#333;text-decoration:none;}.menu .m_con .m_list ul li a:hover{color:#5580fb;}.menu .m_con .m_list_end{border:0;}/*end menu*/.course_list{width:1180px;border-bottom:1px solid #d9dce1;margin:45px auto;}.course_list .c_course{width:222px;height:185px;float:left;margin:0 7px;margin-bottom:20px;}.course_list .c_course .c_con{width:222px;height:185px;position:relative;}/*c_first start*/.course_list .c_course .c_first{background:#5580fb;text-align:center;color:#fff;font-size:14px;}.course_list .c_course .c_first h2{padding-top:50px;font-weight:500;font-size:24px;}.course_list .c_course .c_first p{line-height:36px;}.course_list .c_course .c_first a{text-decoration:none;color:#fff;}/*end c_first*//*c_list start*/.course_list .c_course .c_list .c_yy{width:222px;height:145px;background:#000;position:absolute;top:0;left:0;opacity:0.6;filter:alpha(opacity60);display:none;}.course_list .c_course .c_list .c_desc{width:222px;height:145px;position:absolute;top:0;left:0;color:#999;display:none;}.course_list .c_course .c_list:hover .c_desc{display:block;}.course_list .c_course .c_list:hover .c_yy{display:block;}.course_list .c_course .c_list .c_desc p{padding-left:15px;line-height:24px;}.course_list .c_course .c_list .c_desc .c_title{color:#fff;font-size:14px;padding-top:15px;}.course_list .c_course .c_list .c_tit_main{text-align:center;display:block;line-height:40px;text-decoration:none;color:#333;font-size:14px;}.course_list .c_course .c_list .c_tit_main:hover{color:#5580fb;}.course_list .c_course .c_list .c_desc .c_btn{width:80px;height:30px;background:#5580fb;display:block;text-decoration:none;text-align:center;line-height:30px;margin:10px auto;color:#fff;font-size:14px;border-radius:2px;}.clear{clear:both;}.course_list .c_course .c_zhiye{background:#7784a9;}.course_list .c_course .c_yuyan{background:#3faa77;}.course_list .c_course .c_student{background:#6a9a36;}/*end c_list*/.teams{width:100%;background:#fff;padding-top:20px;}/*teacher start*/.teacher{width:1180px;margin:0 auto;border-bottom:1px solid #d9dce1;}.teacher h2{font-size:24px;font-weight:500;}.teacher .t_team{width:1180px;}.teacher .t_team ul li{list-style:none;float:left;width:216px;height:66px;margin:30px 9px;}.teacher .t_team ul li:hover{background:#EFEFEF;}.teacher .t_team ul li .t_pic{width:66px;float:left;}.teacher .t_team ul li .t_desc{width:130px;height:66px;float:right;}.teacher .t_team ul li .t_desc p{line-height:26px;}.teacher .t_team ul li .t_desc a{font-size:14px;color:#5580fb;text-decoration:none;}/*end teacher*//*student start*/.student{width:1180px;margin:0 auto;border-bottom:1px solid #d9dce1;padding-bottom: 30px;}.student h2{font-weight:500;font-size:24px;line-height:70px;}.student .s_box ul li{list-style:none;float:left;width:216px;height:280px;margin-right:22px;position:relative;}.student .s_box ul .s_en_li{margin-right:0;}.student .s_box ul li .s_yy{width:216px;height:280px;background:#000;position:absolute;top:0;left:0;opacity:0.6;filter:alpha(opacity60);display:none;}.student .s_box ul li .s_desc{width:216px;height:280px;position:absolute;top:0;left:0;color:#fff;display:none;}.student .s_box ul li .s_desc h3{padding:15px 0 0 20px;font-weight:500;font-size:18px;} .student .s_box ul li .s_desc p{padding:20px;line-height:26px;}.student .s_box ul li .s_desc a{width:60px;height:60px;display:block;border-radius:30px;background:#5580fb;margin:0 auto;line-height:60px;text-align:center;font-size:16px;text-decoration:none;color:#fff;}.student .s_box ul li:hover .s_yy{display:block;}.student .s_box ul li:hover .s_desc{display:block;}/*end student*//*links start*/.links{width:1180px;margin:0 auto;padding-bottom: 30px;}.links h2{font-size:24px;font-weight:500;line-height:70px;}.links .l_a{width:1180px;color:#8e949f;}.links .l_a a{padding:0 10px;line-height:30px;text-decoration:none;color:#8e949f;font-size:14px;display:inline-block;}.links .l_a a:hover{color:#5580fb;}/*end links*//*footer start*/.footer{width:100%;background:#15171f;}.footer .f_con{width:1180px;margin:0px auto;color:#51555d;padding: 40px 0 40px 0;}.footer .f_con .f_desc dl{float:left;margin-right:60px;}.footer .f_con .f_desc dl dt{font-size:18px;margin-bottom: 10px;}.footer .f_con .f_desc dl dd{line-height:34px;}.footer .f_con .f_desc dl dd a{text-decoration:none;color:#51555d;font-size:14px;}.footer .f_con .f_desc dl dd a:hover{color:#fff;}.footer .f_con .f_desc dl dd .share{width:35px;height:34px;display:block;float:left;background:url(picture/pe_icon.png) no-repeat;margin-right:5px;}.footer .f_con .f_desc dl dd .f_wb{background-position: -227px -77px;}.footer .f_con .f_desc dl dd .f_wb:hover{background-position: -227px -113px;}.footer .f_con .f_desc dl dd .f_qq{background-position: -265px -77px;}.footer .f_con .f_desc dl dd .f_qq:hover{background-position: -265px -113px;}.footer .f_con .f_tel{width:365px;float:right;}.footer .f_con .f_tel .f_qrcode{width:153px;height:135px;border-right:1px solid #202328;float:left;}.footer .f_con .f_tel .f_time{float:left;padding-left: 51px;}.footer .f_con .f_tel .f_time .f_price{margin:10px auto;}.footer .f_con .f_tel .f_time .f_price span{display:block;}.footer .f_con .f_tel .f_time .f_phone{font-size:24px;color:#fff;margin-bottom:10px;}.footer .f_con .f_tel .f_time .f_price span{line-height:24px;font-size:14px;}.footer .f_con .f_tel .f_time .f_mm{width:152px;height:39px;text-align:center;border:1px solid #292c35;line-height:39px;font-size:14px;border-radius:19px;}/*end footer*//*copyright start*/.copyright{width:100%;height:54px;background:#191b24;line-height:54px;text-align:center;font-size:14px;color:#333740;}/*end copyright*//style 六、 如何让学习不再盲目
第一、带着目标去学习无论看书报课还是各种线下活动。 首先要明确自己的学习目标是什么是想解决什么问题实现怎样的目标。
第二、学习要建立个人知识体系 知识是学不完的书籍是浩如烟海的。我们尽情徜徉其中的时候千万不要被海水淹死没有自我了。在学习过程中我们会发现每一个知识点都是有她的边界和背景的我们要善于归纳整理知识
第三、学到了就要用到
有时我们一天下来感觉学到了很多干货那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事但只有会学习的人才有价值。 七、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容请 “点赞” “✍️评论” “收藏” 一键三连哦
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者一起探讨 前端 Node 知识互相学习」
3.
以上内容技术相关问题欢迎一起交流学习
