web网页设计与开发____婚纱网站(5页 汉堡菜单 响应式)
2024-06-08 05:51:25
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | | HTML期末大学生网页设计作业，Web大学生网页
HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为
文章目录
- 前端学习路线
- 网页基本结构
- 网页演示
- HTML结构代码
- 学的反而越迷茫
- 学习更多
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>首页</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/style4.css"><link rel="stylesheet" href="css/style-m4.css"><link rel="stylesheet" href="css/iconfont.css"><link rel="stylesheet" href="css/swiper-3.4.2.min.css"><link rel="stylesheet" href="css/animate.css">
</head><body><div class="content"><!-- 1.头部开始 --><div class="header"><div class="header-c PC"><a href="#" class="logo"><img src="picture/logo-1.png" alt="" class="logo1"><img src="picture/logo-2.png" alt="" class="logo2"></a><ul class="nav"><li class="nav-item active"><a href="#">首页</a></li><li class="nav-item"><a href="index1.html">婚纱礼服</a></li><li class="nav-item"><a href="index2.html">珠宝配饰</a><span class="line"></span></li><li class="nav-item"><a href="index3.html">最新活动</a></li><li class="nav-item"><a href="index4.html">关于我们</a></li></ul></div> </div><div class="header header-m"><div class="header-c"><a href="#" class="logo"><img src="picture/logo-1.png" alt="" class="logo1"><img src="picture/logo-2.png" alt="" class="logo2"></a><div class="btn icon-caidan"></div><ul class="nav"><li class="nav-item active"><a href="#">首页</a></li><li class="nav-item"><a href="index1.html">婚纱礼服</a></li><li class="nav-item"><a href="index2.html">珠宝配饰</a><span class="line"></span></li><li class="nav-item"><a href="index4.html">最新活动</a></li><li class="nav-item"><a href="index4.html">关于我们</a></li></ul></div></div><div class="containner"><!-- 2.banner --><div class="banner"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="picture/banner11.jpg" alt="" class="logo"></div><div class="swiper-slide"><img src="picture/banner2.jpg" alt=""></div></div><!-- Add Pagination --><div class="swiper-pagination"></div><!-- Add Arrows --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div><!-- 3.内容板块 --><div class="main"><div class="main-c"><!-- 3.1 婚纱礼服 --><div class="wedding"><!-- 标题 --><div class="title"><h3>婚纱礼服</h3><span class="eng">Wedding Dress</span></div><!-- 轮播 --><div class="swiper-contai"><div class="swiper-wrapper"><div class="swiper-slide"><img src="picture/wedding2.jpg" alt="" class="logo"><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-2.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-3.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-4.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/wedding2.jpg" alt="" class="logo"></div><div class="swiper-slide"><img src="picture/WeddingDress-2.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-3.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-4.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/wedding2.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-2.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-3.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-4.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/wedding2.jpg" alt="" class="logo"><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-2.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-3.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><div class="swiper-slide"><img src="picture/WeddingDress-4.jpg" alt=""><div class="mask"><h3>HER STYLE / 一字肩拖尾主纱</h3><p>$5389.00</p><p>白色 / M / VK2531</p></div></div><!-- Add Pagination --></div><div class="swiper-pagination"></div></div><!-- 轮播---M端 --><div class="swiper-contai swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="picture/wedding2.jpg" alt=""><img src="picture/WeddingDress-2.jpg" alt=""><img src="picture/WeddingDress-3.jpg" alt=""><img src="picture/WeddingDress-4.jpg" alt=""></div> <div class="swiper-slide"><img src="picture/wedding2.jpg" alt=""><img src="picture/WeddingDress-2.jpg" alt=""><img src="picture/WeddingDress-3.jpg" alt=""><img src="picture/WeddingDress-4.jpg" alt=""> </div> <div class="swiper-slide"><img src="picture/wedding2.jpg" alt=""><img src="picture/WeddingDress-2.jpg" alt=""><img src="picture/WeddingDress-3.jpg" alt=""><img src="picture/WeddingDress-4.jpg" alt=""></div> <div class="swiper-slide"><img src="picture/wedding2.jpg" alt="" class="logo"><img src="picture/WeddingDress-2.jpg" alt=""><img src="picture/WeddingDress-3.jpg" alt=""><img src="picture/WeddingDress-4.jpg" alt=""></div> </div><div class="swiper-pagination"></div></div><!-- 更多 --><div class="more"><a href="#">MORE</a></div></div></div><!--3.2 珠宝 --><div class="jewelry"><div class="jewelry-c"><div class="title"><h3>珠宝配饰</h3><span class="eng">Jewelry Show</span></div><ul class="nav"><li class="nav-item"><img src="picture/jewelry1.jpg" alt=""> <div class="mask"><h4>传世之作，经典重现</h4><p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors ofTiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p></div></li><li class="nav-item"><img src="picture/jewelry2.jpg" alt=""><div class="mask"><h4>传世之作，经典重现</h4><p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors ofTiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p></div></li><li class="nav-item"><img src="picture/jewelry.jpg" alt=""><div class="mask"><h4>传世之作，经典重现</h4><p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors ofTiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p></div></li><li class="nav-item"><img src="picture/jewelry4.jpg" alt=""><div class="mask"><h4>传世之作，经典重现</h4><p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors ofTiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p></div></li></ul><div class="more"><a href="#">MORE</a></div></div></div><!-- 3.3 最新活动 --><div class="activvities"><div class="activvities-c"><div class="title"><h3>最新活动</h3><span class="eng">Latest Activities</span></div><ul class="nav"><li class="nav-item"><img src="picture/activities-1.jpg" alt=""> <div class="border"></div><div class="mask"><h3>06-18 <span>2021</span></h3><h4>新品发布会</h4><p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p><a href="#">more <span>></span></a> </div> </li><li class="nav-item"><img src="picture/wedding2.jpg" alt=""><div class="border"></div><div class="mask"><h3>12-24 <span>2021</span></h3><h4>圣诞高级定制发布会</h4><p>《金字塔铭文》中有这样的话：“天空把自己的光芒伸向你，以便你可以去到任何</p><a href="#">more <span>></span></a> </div> </li><li class="nav-item"><img src="picture/WeddingDress-3.jpg" alt=""><div class="border"></div><div class="mask"><h3>06-21 <span>2021</span></h3><h4>夏季新品发布会</h4><p>“我非常欣赏并且热爱美国。因为这里是我获得成功的地方。也许你什么都没有</p><a href="#">more <span>></span></a> </div> </li><li class="nav-item"><img src="picture/WeddingDress-6.jpg" alt=""><div class="border"></div><div class="mask"><h3>06-18 <span>2021</span></h3><h4>新品发布会</h4><p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p><a href="#">more <span>></span></a> </div> </li></ul><!-- Swiper --><div class="swiper-about"><div class="swiper-wrapper"><div class="swiper-slide"><img src="picture/activities-1.jpg" alt=""> <div class="mask"><h3>06-18 <span>2021</span></h3><h4>新品发布会</h4><p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p><a href="#">more <span>></span></a> </div> </div> <div class="swiper-slide"><img src="picture/wedding2.jpg" alt=""><div class="mask"><h3>12-24 <span>2021</span></h3><h4>圣诞高级定制发布会</h4><p>《金字塔铭文》中有这样的话：“天空把自己的光芒伸向你，以便你可以去到任何</p><a href="#">more <span>></span></a> </div></div> <div class="swiper-slide"><img src="picture/WeddingDress-6.jpg" alt=""> <div class="mask"><h3>06-18 <span>2021</span></h3><h4>新品发布会</h4><p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p><a href="#">more <span>></span></a> </div> </div> <div class="swiper-slide"><img src="picture/WeddingDress-3.jpg" alt=""><div class="mask"><h3>06-21 <span>2021</span></h3><h4>夏季新品发布会</h4><p>“我非常欣赏并且热爱美国。因为这里是我获得成功的地方。也许你什么都没有</p><a href="#">more <span>></span></a> </div> </div></div></div><div class="more"><a href="#">MORE</a></div></div></div><!-- 3.4 设计师 --><div class="designers"><div class="designers-c"><div class="title"><h3>设计师</h3><span class="eng">Designers</span></div><ui class="nav"><li class="nav-item"><img src="picture/sign1jpg.jpg" alt=""><div class="text"><h3>Jason . W</h3><span>首席设计师</span><p>法国时装设计师，VERONICA品牌创始人之一，设计总监，2016福布斯最具影响力的设计师,最受欢迎设计大师,确实非常厉害的;</p><a href="#"> MORE</a></div></li><li class="nav-item"><img src="picture/designers2.png" alt=""><div class="text"><h3>颜澈</h3><span>资深设计师</span><p>法国时装设计师，设计界的“设计鬼才”从题材到表现方式都引起了极大的福布斯中国最具潜力，每一个产品都是我们精...</p><a href="#"> MORE</a></div></li><li class="nav-item"><img src="picture/designers3.png" alt=""><div class="text"><h3>Katherine .J </h3><span>运营总监</span><p>The world's leading electronic design journalNEWWEBPICK recommended the designer electronic design journal </p><a href="#"> MORE</a></div></li></ui></div></div><!-- 4.底部 --><div class="footer"><div class="footer-c"><div class="left"><p>网站备案号：豫ICP备110121210号</p><span>增值电信业务经营许可证号：豫B2-20100033</span></div><div class="right"><p>© 2021 VERONICA</p><a href="#">联系我们</a><a href="#">加入我们</a></div></div></div><!-- 5.广告跟随 --><div class="toup" id="advance"><a href="#" class="animated bounceIn"></a><a href="#" class="animated bounceIn"></a></div></div></div><script src="js/swiper.min.js"></script><script src="js/main4.js"></script>
</div></body></html>学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
web网页设计与开发____婚纱网站(5页 汉堡菜单 响应式)相关推荐
- HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...
- HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...
- html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- 文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
web网页设计实例作业 --中国风的茶文化(4页) web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
- DIV布局 web网页设计实例作业 ——抗疫-逆行者(5页) 致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
web网页设计实例作业 --抗疫-逆行者(5页) 致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
最新文章
- Java_中快速获取系统时间
- 漫谈我国主流人工智能软件基础设施
- 求多项式解(三种方法MATLAB)
- Nginx静态资源盗链的效果展示
- ImportError: No module named 'matplotlib'(python 安装各种 )
- 华山论“件”：Kafka、RabbitMQ、RocketMQ技能大比拼
- 十条不错的编程观点(转)
- Oracle如何一次插入多条数据
- 一个贼简单的代码表白
- java jdk 文档下载_Java帮助文档 JDK全系列 官方中英下载地址
- IDEA打包jar 跳过测试
- TMS320F28374S之X-BAR
- [渝粤教育] 北京化工大学 自然辩证法概论 参考 资料
- CAD数字签名的实现
- python多元函数求解_使用遗传算法求二元函数的最小值
- 手机中sensor 的原理简介
- IDEA打包，运行等错误
- 【思维论01】如何让自己像打王者荣耀一样发了疯、石乐志的学习？
- 【推荐实践】大规模异构图召回在美团到店推荐广告的应用
- 三天打鱼两天晒网问题Java解法