HTML+CSS+JS【公司网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
💥 文章目录
一、🏁 网站题目
💪💪💪 公司网站 婚纱摄影 精美设计 6页
二、🚩 网站描述
🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）
🥇 一套A+的网页应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有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实现动态轮播特效, 表单提交, 点击事件等等。
四、🏴 网站效果
五、🏳️ 网站代码
<body>
<!-- 顶部导航栏 start -->
<div class="header">
<div class="header-container">
<div class="header-logo">
<div class="logo-img"><img src="./img/首页/导航条logo.jpg" width="50" height="50"></div>
<div class="logo-img"><img src="./img/首页/导航条保障.svg"
style="width: 67px;height: 24px;margin-top: 13px;margin-left: 5px;"></div>
</div>
<div class="header-nav">
<div class="header-nav-text">
<a href="./首页.html" class="header-nav-v" target="_self">
<span class="header-nav-t header-nav-t-active">首页</span>
</a>
<a href="./风格作品.html" class="header-nav-v header-nav-v-hover" target="_self">
<span class="header-nav-t ">风格作品</span>
<div class="header-nav-t-list">
<li>中式风格</li>
<li>韩式风格</li>
<li>森系风格</li>
<li>田园风格</li>
<li>纪实婚礼</li>
<li>法式风格</li>
<li>创意婚照</li>
<li>旅拍作品</li>
</div>
</a>
<a href="./套餐报价.html" class="header-nav-v" target="_self">
<span class="header-nav-t">套餐报价</span>
</a>
<a href="./旅拍.html" class="header-nav-v" target="_self">
<span class="header-nav-t">旅拍</span>
</a>
<a href="./优惠活动.html" class="header-nav-v" target="_self">
<span class="header-nav-t">优惠活动</span>
</a>
</div>
<div class="header-nav-img">
<a href=""><img src="./img/首页/放大镜.png" width="22px" height="22px"></a>
</div>
<div class="header-nav-kefu">
<div class="header-nav-kefu-img">
<img src="./img/首页/言语.png" width="18px" height="18px">
</div>
<a href=""><span class="header-nav-kefu-text">在线客服</span></a>
</div>
</div>
</div>
</div>
<!-- 顶部导航栏 end -->
<!-- 主体 start -->
<div class="main">
<!-- 轮播图 start -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/首页/轮播图1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/首页/轮播图2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/首页/轮播图3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/首页/轮播图4.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="./js/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: 3000
},
// 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
allowTouchMove: false,
})
</script>
<!-- 轮播图 end -->
<!-- 套餐报价 start -->
<div class="fl-quotation">
<div class="quotation-container">
<div class="quotation-title">
<h3>套餐报价</h3>
<p>在线了解报价,0元预约拍摄档期</p>
</div>
<div class="quotation-img">
<div class="quotation-item">
<div class="quotation-item-img">
<img src="./img/首页/套餐报价1.jpg">
</div>
<div class="quotation-item-text">
<p>0元预约档期</p>
</div>
</div>
<div class="quotation-item">
<div class="quotation-item-img">
<img src="./img/首页/套餐报价2.jpg">
</div>
<div class="quotation-item-text">
<p>人气优选套餐</p>
</div>
</div>
<div class="quotation-item">
<div class="quotation-item-img">
<img src="./img/首页/套餐报价3.jpg">
</div>
<div class="quotation-item-text">
<p>店长推荐套餐</p>
</div>
</div>
<div class="quotation-item">
<div class="quotation-item-img">
<img src="./img/首页/套餐报价4.jpg">
</div>
<div class="quotation-item-text">
<p>性价比之选</p>
</div>
</div>
</div>
<div class="quotation-more">
<div class="quotation-more-text">
<a href="">查看更多报价</a>
</div>
</div>
</div>
</div>
<!-- 套餐报价 end -->
<!-- 婚纱照风格作品 start -->
<div class="fl-works">
<div class="works-container ">
<h3 class="works-title">婚纱照风格作品</h3>
<div class="works-items wow">
<div class="works-item-out">
<div class="works-item-in-img">
<img src="./img/首页/风格作品1.jpg" alt="">
</div>
<div class="item-in-text1">
<span>韩式风格婚纱照</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">内景婚纱</div>
<div class="item-in-text2-s2">韩式风格婚纱</div>
</div>
<div class="item-in-text3">
<span>拍摄特点：粉色、内景，纯色，简约；
优惠活动:在线预约可享受3000元现金优惠;
咨询客服获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="works-item-out">
<div class="works-item-in-img">
<img src="./img/首页/风格作品2.jpg" alt="">
</div>
<div class="item-in-text1">
<span>纯色经典韩式</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">纯色韩风</div>
<div class="item-in-text2-s2">韩式风格婚纱</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点]】韩式、简约，纯色、背景拍摄;
【优惠活动】在线预约可享受3000元现金优惠；
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="works-item-out">
<div class="works-item-in-img">
<img src="./img/首页/风格作品3.jpg" alt="">
</div>
<div class="item-in-text1">
<span>中式经典</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">中式婚纱</div>
<div class="item-in-text2-s2">中式风格婚纱</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点]】中国式、红色，喜庆、中式服装;
【优惠活动】在线预约可享受3000元现金优惠；
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="works-item-out">
<div class="works-item-in-img">
<img src="./img/首页/风格作品4.jpg" alt="">
</div>
<div class="item-in-text1">
<span>魔幻创意</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">创意魔幻</div>
<div class="item-in-text2-s2">外景森系婚纱</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点】拍摄特点：森系、梦幻，绿色、创意、外景;
【优惠活动】在线预约可享受3000元现金优惠；
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="works-item-out">
<div class="works-item-in-img">
<img src="./img/首页/风格作品5.jpg" alt="">
</div>
<div class="item-in-text1">
<span>蓝色国风</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">纯色拍摄</div>
<div class="item-in-text2-s2">内景风格婚纱</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点】新中式、国风、内景、背景拍摄、中式旗袍
【优惠活动】在线预约可享受3000元现金优惠；
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="works-item-out">
<div class="works-item-in-img">
<img src="./img/首页/风格作品6.jpg" width="335" height="250">
</div>
<div class="item-in-text1">
<span>定制油画风</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">定制拍摄</div>
<div class="item-in-text2-s2">内景风格婚纱</div>
</div>
<div class="item-in-text3">
<span>拍摄特点：复古、中式，内景、创意；
咨询客服可获取报价及拍摄档期！</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
</div>
<div class="works-more">
<a href="">查看更多作品</a>
</div>
</div>
</div>
<!-- 婚纱照风格作品 end -->
<!-- 局部背景图 start -->
<div class="fl-center-bg">
<div class="center-bg-container">
<img src="./img/首页/全国旅拍.jpg" alt="">
</div>
</div>
<!-- 局部背景图 end -->
<!-- 旅拍作品 start -->
<div class="fl-travel">
<div class="travel-container">
<h3 class="travel-title">旅拍作品</h3>
<div class="travel-items">
<div class="travel-item-out">
<div class="travel-item-in-img">
<img src="./img/首页/旅拍作品1.jpg" alt="">
</div>
<div class="item-in-text1">
<span>杭州旅拍</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">杭州旅拍</div>
<div class="item-in-text2-s2">茶园建筑风格</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点】外景、建筑、湖景、茶园、蓝色婚纱
【优惠活动】在线预约可享受3000元现金优惠;
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="travel-item-out">
<div class="travel-item-in-img">
<img src="./img/首页/旅拍作品2.jpg" alt="">
</div>
<div class="item-in-text1">
<span>济州岛旅拍</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">济州岛景</div>
<div class="item-in-text2-s2">街景码头礁石</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点】海景、街景、礁石、码头、海岸；
【优惠活动】在线预约可享受3000元现金优惠;
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
<div class="travel-item-out">
<div class="travel-item-in-img">
<img src="./img/首页/旅拍作品3.jpg" alt="">
</div>
<div class="item-in-text1">
<span>丽江</span>
</div>
<div class="item-in-text2">
<div class="item-in-text2-s1">丽江旅拍</div>
<div class="item-in-text2-s2">浪漫风格婚纱</div>
</div>
<div class="item-in-text3">
<span>【拍摄特点】丽江、拉市海、旧建筑、街拍
【优惠活动】在线预约可享受3000元现金优惠;
【咨询客服】获取套餐价格、拍摄档期等!</span>
</div>
<div class="item-in-text4">
<span>咨询价格</span>
</div>
</div>
</div>
<div class="travel-more">
<a href="">查看更多旅拍</a>
</div>
</div>
</div>
<!-- 旅拍作品 end -->
<!-- 一站式服务 start -->
<div class="fl-service">
<div class="service-container">
<img src="./img/首页/结婚服务.jpg" alt="">
</div>
</div>
<!-- 一站式服务 end -->
<!-- 报价 start -->
<div class="fl-offer">
<div class="offer-container wow">
<img src="./img/首页/在线报价.jpg" alt="">
<div class="offer-online">
<div class="offer-online-item">
<div class="online-item-title">
<div class="online-title-text1">
<span>在线获取婚纱照报价</span>
</div>
<div class="online-title-text2">
已有<span>119</span>人参加
</div>
</div>
<div class="online-item-content">
<div class="online-content-text online-content-text1">
<span>请输入您的称呼</span>
<input type="text">
</div>
<div class="online-content-text online-content-text2">
<span class="big">请输入手机号
<span style="color:#ff8833 ;margin-left: 5px;">(必填)</span>
</span>
<input type="text">
</div>
</div>
<div class="online-item-obtain">
<span>立即获取报价</span>
</div>
<div class="online-item-scoll">
<div class="clue-list-slider use-transition">
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">马**</span></div>
<div class="clue-item-middle">139****6813</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">勾**</span></div>
<div class="clue-item-middle">173****0295</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">于**</span></div>
<div class="clue-item-middle">177****6007</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">王**</span></div>
<div class="clue-item-middle">166****8094</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">彭**</span></div>
<div class="clue-item-middle">186****9820</div>
<div class="clue-item-right">领取成功</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 报价 end -->
<!-- 攻略 start -->
<div class="fl-strategy">
<div class="strategy-container">
<div class="strategy-title">
<span>婚纱照攻略</span>
</div>
<div class="strategy-content">
<div class="strategy-list">
<ul>
<li>
<span class="list1">1</span>
<div>影楼和工作室有什么区别？</div>
<div class=" strategy-article strategy-article1">
<div class="article-ask">
<div class="article-ask1">问</div>
<div class="article-ask2">影楼和工作室有什么区别？</div>
</div>
<div class="article-answer ">
<div class="answer-ask1">答</div>
<div class="answer-ask2">
1、规模上的不同影楼一般规模比较大，门店比较多，而且所处的地理位置也比较优越，一般都是繁华的商业地段。摄影工作室规模通常会比较小，只有一家门店，而且地理位置相对偏僻。
如果你现在正好有拍婚纱照的想法，那可以先了解拍婚纱照多少钱及拍婚纱照需要注意什么问题。那么，下面为大家介绍拍婚纱照要问清楚什么。拍婚纱照要问清楚什么
</div>
</div>
</div>
</li>
<li>
<span class="list2">2</span>
<div>婚纱照放在卧室的什么地方好？</div>
<div class="strategy-article strategy-article2">
<div class="article-ask">
<div class="article-ask1">问</div>
<div class="article-ask2">婚纱照放在卧室的什么地方好？</div>
</div>
<div class="article-answer ">
<div class="answer-ask1">答</div>
<div class="answer-ask2">
1.床头左边
如果要在卧室中挂婚纱照，那么床头是非常适合的位置。很多夫妻都喜欢在床头正上方挂婚纱照，这是有点危险的，还容易形成压迫感。最适合的地方是床头的左边，有利于夫妻生活。
2.床的对面
如果床的对面是一片白墙，不妨挂上婚纱照当做装饰品。而且挂在床对面的话，每天醒来和睡前都能看到婚纱照，有利于两人时刻保持甜蜜。假如两人发生了争吵，看到照片也能消气。
</div>
</div>
</div>
</li>
<li>
<span class="list3">3</span>
<div>一般拍婚纱照大概多少钱合适？</div>
<div class="strategy-article strategy-article3">
<div class="article-ask">
<div class="article-ask1">问</div>
<div class="article-ask2">一般拍婚纱照大概多少钱合适？</div>
</div>
<div class="article-answer ">
<div class="answer-ask1">答</div>
<div class="answer-ask2">
婚纱照是记录新人们之间甜蜜浪漫感情最好的行为，一般来讲大家都会挑选性价比较高的商家来完成自己这此生一次的拍摄之旅。，拍婚纱照的价格一般在人民币5000元左右，在这个价格范围内的婚纱摄影商家其性价比较高，商家的服务质量以及所在地域不同，价格就会有些差异。但是整个的婚纱摄影市场平均价格在人民币4000-7000元之间。
小提示：
拍婚纱照影楼和工作室哪个好
尽管都是拍婚纱照的地方，工作室和影楼却大有不同。一般婚纱摄影工作室规模比较小，是凭借着过硬的技术、完善的服务而立足的；而影楼一般规模比较大，地理位置比较优越，主张效率，是忙碌的新人们的选择
</div>
</div>
</div>
</li>
<li>
<span class="list4">4</span>
<div>拍婚纱照需要问清楚什么问题？</div>
<div class="strategy-article strategy-article4">
<div class="article-ask">
<div class="article-ask1">问</div>
<div class="article-ask2">拍婚纱照需要问清楚什么问题？</div>
</div>
<div class="article-answer ">
<div class="answer-ask1">答</div>
<div class="answer-ask2">
如果你现在正好有拍婚纱照的想法，那可以先了解拍婚纱照多少钱及拍婚纱照需要注意什么问题。那么，下面为大家介绍拍婚纱照要问清楚什么。 拍婚纱照要问清楚什么
1、套餐问题
拍婚纱照时要问清楚套餐，套餐内的相关问题一定要了解清楚，比如几套服装、几套造型等等，还要知道照片总数，相框数量是几个等。
2、后期问题
可以了解后期照片多久能做好，不要等婚期到了，婚纱照还没做好，还要问清楚对于照片不满意，能不能免费重修，避免修图不满意无法更改。
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="strategy-more">
<a href="">查看更多攻略</a>
</div>
</div>
</div>
<!-- 攻略 end -->
<!-- 底部背景图 start -->
<div class="fl-footer-bg">
<img src="./img/首页/品牌实力.jpg" width="1420" height="621">
</div>
<!-- 底部背景图 end -->
</div>
<!-- 主体 end -->
<!-- 侧边栏 start -->
<div class="aside">
<div class="aside-item">
<div class="aside-icon">
<svg t="1660216991149" class="icon" viewBox="0 0 1101 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4007" width="20" height="21">
<path
d="M331.790414 1016.76416a34.74919 34.74919 0 0 1-34.720589-34.74919v-111.855211H127.613898A120.463859 120.463859 0 0 1 7.150039 749.7245V268.441068A261.805832 261.805832 0 0 1 268.498268 7.092839H973.549324a120.435259 120.435259 0 0 1 120.406659 120.435258v481.283432a261.805832 261.805832 0 0 1-261.34823 261.34823H535.537929l-182.297397 139.482962a34.320188 34.320188 0 0 1-20.963915 7.15004zM78.107027 266.98246v482.71344a51.480282 51.480282 0 0 0 51.480282 51.480281h202.288906a34.74919 34.74919 0 0 1 34.77779 34.74919v75.704614l136.165345-104.27617a34.320188 34.320188 0 0 1 20.935314-7.150039h308.881689a190.419841 190.419841 0 0 0 190.419842-190.419841V127.585298a51.480282 51.480282 0 0 0-49.478271-50.936879H268.526869A190.419841 190.419841 0 0 0 78.078427 267.068261z m623.140208 179.952184a81.396045 81.396045 0 1 1 81.396045 81.396045 81.396045 81.396045 0 0 1-81.396045-81.310244z m-231.804268 0a81.396045 81.396045 0 1 1 81.367445 81.396045 81.367445 81.367445 0 0 1-81.396045-81.310244z m-232.34767 0a81.424645 81.424645 0 1 1 81.424645 81.396045 81.424645 81.424645 0 0 1-81.453246-81.310244z m464.151938 0z m-231.804268 0z"
p-id="4008"></path>
</svg>
</div>
<div class="aside-text">在线客服</div>
</div>
<div class="aside-item aside-item-active">
<div class="aside-icon">
<svg t="1660217167906" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3456" width="20" height="21">
<path
d="M418.4 867.8c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l311.7-311.7-224-224-311.7 311.7c-5.9 5.9-15.4 5.9-21.2 0-5.9-5.9-5.9-15.4 0-21.2l322.3-322.3c5.9-5.9 15.4-5.9 21.2 0l245.2 245.2c5.9 5.9 5.9 15.4 0 21.2L429 863.4c-2.9 2.9-6.7 4.4-10.6 4.4z"
fill="#333333" p-id="3457"></path>
<path
d="M740.7 545.5c-4 0-7.8-1.6-10.6-4.4L484.9 295.9c-5.9-5.9-5.9-15.4 0-21.2l56.3-56.3c2.8-2.8 6.6-4.4 10.6-4.4s7.8 1.6 10.6 4.4l245.2 245.2c5.9 5.9 5.9 15.4 0 21.2l-56.3 56.3c-2.8 2.9-6.6 4.4-10.6 4.4z m-224-260.2l224 224 35.1-35.1-224-224-35.1 35.1z"
fill="#333333" p-id="3458"></path>
<path
d="M797.2 489.1c-4 0-7.8-1.6-10.6-4.4L541.3 239.5c-5.9-5.9-5.9-15.4 0-21.2l35.6-35.6c36-36 94.7-36 130.7 0l135.7 135.7c17.5 17.5 27.1 40.7 27.1 65.4 0 24.7-9.6 47.9-27.1 65.4l-35.6 35.6c-2.8 2.7-6.6 4.3-10.5 4.3z m-224-260.2l224 224 25-25c24.3-24.3 24.3-64 0-88.3L686.5 203.9c-24.3-24.3-64-24.3-88.3 0l-25 25zM418.4 867.8h-0.2l-249.9-2.7c-4 0-7.8-1.7-10.6-4.6-2.8-2.9-4.3-6.7-4.2-10.7l4.7-242.5c0.1-5 2.7-9.7 6.9-12.4 4.2-2.7 9.5-3.1 14.1-1.1l97.6 43.1c4.1 1.8 7.2 5.4 8.4 9.7l18.9 67.2 83.4 18.9c5.2 1.2 9.3 5 11 10l34.2 105.4c1.5 4.6 0.7 9.6-2.2 13.5-2.8 3.9-7.3 6.2-12.1 6.2z m-234.5-32.5l213.9 2.3-25.1-77.5-83.8-19c-5.4-1.2-9.6-5.3-11.1-10.6l-19.4-69-70.5-31.1-4 204.9z"
fill="#333333" p-id="3459"></path>
<path
d="M267 853.4L172.6 759l-1.8 93.4zM271.6 666.5c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l287-287.1c5.9-5.9 15.4-5.9 21.2 0 5.9 5.9 5.9 15.4 0 21.2l-287 287.1c-3 2.9-6.8 4.4-10.6 4.4zM381.2 763.2c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l287.1-287.1c5.9-5.9 15.4-5.9 21.2 0 5.9 5.9 5.9 15.4 0 21.2L391.8 758.8c-2.9 2.9-6.8 4.4-10.6 4.4z"
fill="#333333" p-id="3460"></path>
</svg>
</div>
<div class="aside-text">
获取报价
<!-- 弹窗 start -->
<div class="window">
<div class="window-container">
<div class="window-title">
<div class="window-title1">
<span>在线获取婚纱照报价</span>
</div>
<div class="window-title2">
已有
<span>121</span>
人参加
</div>
</div>
<div class="window-content">
<div class="window-content1">
<div class="window-content1-l">
<p class="content1-l-text">称呼</p>
<div class="window-input">
<input type="text" placeholder="请输入您的称呼">
</div>
</div>
<div class="window-content1-l">
<p class="content1-l-text">电话</p>
<div class="window-input">
<input type="text" placeholder="请输入手机号">
</div>
</div>
</div>
<div class="window-content2">
立即预约
</div>
<div class="window-content3">
<div class="online-item-scoll">
<div class="clue-list-slider use-transition">
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">马**</span></div>
<div class="clue-item-middle">139****6813</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">勾**</span></div>
<div class="clue-item-middle">173****0295</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">于**</span></div>
<div class="clue-item-middle">177****6007</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">王**</span></div>
<div class="clue-item-middle">166****8094</div>
<div class="clue-item-right">领取成功</div>
</div>
<div class="clue-item">
<div class="clue-item-left"><i class="icon-speaker"></i> <span
class="username">彭**</span></div>
<div class="clue-item-middle">186****9820</div>
<div class="clue-item-right">领取成功</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 弹窗 end -->
</div>
</div>
<a href="#">
<div class="aside-item">
<div class="aside-icon aside-top">
<svg t="1660217200600" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4245" width="20" height="21">
<path
d="M383.786667 640.853333a42.666667 42.666667 0 0 1-8.192 56.149334l-3.968 2.986666-64.64 42.496a42.666667 42.666667 0 0 0-16.085334 20.138667l-1.621333 5.034667L267.946667 853.333333H384a42.666667 42.666667 0 0 1 42.368 37.674667L426.666667 896a42.666667 42.666667 0 0 1-37.674667 42.368L384 938.666667H213.333333a42.666667 42.666667 0 0 1-42.325333-48.213334l0.938667-4.778666 34.56-138.666667a128.042667 128.042667 0 0 1 46.250666-70.570667l7.082667-5.12 64.853333-42.666666a42.666667 42.666667 0 0 1 59.093334 12.202666z m311.168-14.677333l4.352 2.517333 65.066666 42.794667a128 128 0 0 1 50.773334 67.2l2.346666 8.32 34.56 138.666667a42.666667 42.666667 0 0 1-36.565333 52.736L810.666667 938.666667h-170.666667a42.666667 42.666667 0 0 1-4.992-85.034667L640 853.333333h116.053333l-21.333333-85.674666a42.709333 42.709333 0 0 0-13.397333-21.888l-4.096-3.157334-64.853334-42.666666a42.666667 42.666667 0 0 1 37.76-75.861334l4.821334 2.133334z"
fill="#03CD8E" p-id="4246"></path>
<path
d="M512 102.570667a85.333333 85.333333 0 0 0-60.586667 25.258666l-30.165333 30.165334a469.333333 469.333333 0 0 0-131.882667 403.2l52.48 341.290666A42.666667 42.666667 0 0 0 384 938.666667h256a42.666667 42.666667 0 0 0 42.154667-36.181334l52.48-341.333333a469.333333 469.333333 0 0 0-131.84-403.157333l-30.293334-30.293334A85.248 85.248 0 0 0 512 102.570667z m-30.421333 115.754666L512 187.946667l30.421333 30.378666 9.088 9.386667a384 384 0 0 1 98.816 320.426667L603.306667 853.333333H420.608l-46.933333-305.152a384 384 0 0 1 107.946666-329.856z"
fill="#049DEE" p-id="4247"></path>
<path
d="M512 384a42.666667 42.666667 0 0 1 42.368 37.674667L554.666667 426.666667v128a42.666667 42.666667 0 0 1-85.034667 4.992L469.333333 554.666667v-128a42.666667 42.666667 0 0 1 42.666667-42.666667z"
fill="#049DEE" p-id="4248"></path>
</svg>
</div>
</div>
</a>
</div>
<!-- 侧边栏 end -->
<!-- 底部栏 start -->
<div class="footer">
<div class="footer-container">
<div class="footer-logo">
<div class="logo-item " style="margin-right: 80px;">
<div style="width: 40px;height: 40px; "><img src="./img/首页/底部1.png" width="40" height="40"></div>
<div class="item-text">
<div class="item-text1">协助维权</div>
<div class="item-text2">蒙受经济损失，可申请百度协助</div>
</div>
</div>
<div class="logo-item" style="margin-right: 80px;">
<div style="width: 40px;height: 40px; "><img src="./img/首页/底部2.png" width="40" height="40"></div>
<div class="item-text">
<div class="item-text1">虚假赔偿</div>
<div class="item-text2">遇到品牌或资质冒用，可申请百度保障</div>
</div>
</div>
<div class="logo-item">
<div style="width: 40px;height: 40px; "><img src="./img/首页/底部3.png" width="40" height="40"></div>
<div class="item-text">
<div class="item-text1">欺诈赔偿</div>
<div class="item-text2">遇到欺诈，经核查属实，可申请保障退还费用</div>
</div>
</div>
</div>
<div class="footer-nav">
<span class="footer-list">首页</span>
<span class="footer-list">风格作品</span>
<span class="footer-list">套餐报价</span>
<span class="footer-list">旅拍</span>
<span class="footer-list">优惠活动</span>
</div>
<div class="footer-text">
<span>Copyright © 哪拍科技（北京）有限公司</span>
<span>地址：北京市北京市海淀区中关村东升科技园</span>
</div>
</div>
</div>
<!-- 底部栏 end -->
<script src="./js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
六、🏳️🌈 如何学习进步
- 看书、看博客、学课程或者看视频等
- 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
- 思考学习别人思路后，脱离书本和博客，完全自己实现功能
- 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
- 在别人的框架和要求下，写代码实现业务
- 自己负责别人设计的模块的实现
- 独立设计业务模块并开发实现
- 负责大项目框架设计和拆分，带领别人进行开发
- 其他高阶的架构和管理工作，已经不仅仅是代码能力了
七、🏴☠️ 更多干货
🌝 关注我 学习更多知识~
🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~
🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~
扫一扫
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
