⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | 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>
<head>
<meta charset="utf-8">
<title>唯品会（原Vipshop.com）特卖会：品牌特卖_确保正品_确保低价_货到付款</title>
<!-- 公共的CSS -->
<link rel="stylesheet" href="css/public.css">
<!-- 引入网站头像 -->
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1653216524048/favicon.ico">
<!-- 首页的CSS -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<!--nav -->
<link rel="stylesheet" href="css/nav.css">
<!-- footer -->
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<!--nav start -->
<div class="nav">
<div class="h-top">
<div class="h-top-center">
<div class="area">
<div class="area-location">长沙市</div>
<div class="area-triangle"></div>
<div class="top_box">
<div>
<span>请选择你所在的收货地区<i>✖</i></span>
<ul>
<li class="current_ul">省份</li>
<li>地区</li>
</ul>
<section class="top_div">
<div class="top_one current_div">
<ul>
<li>北京市</li>
</ul>
</div>
<div class="top_two">请先选择省份</div>
</section>
</div>
</div>
</div>
<div class="select fr">
<ul>
<li class="wp-login ">
<a href="javascript:;"><span>请登录</span></a>
<div class="login-hide">
<i class="nav-line"></i>
<div class="nav-top-pic">
<span class="top-nav-pic-avater"></span>
<div class="top-nav-pic-right"><a href="javascript:;">您好！ [请登录]</a></div>
<p class="top-nav-list">
<span><a href="">我的收藏</a></span>
<span><a href="">我的订单</a></span>
<span><a href="">零钱</a></span>
<span><a href="">我的优惠券</a></span>
<span><a href="">我的唯品币</a></span>
<span><a href="">唯品金融</a></span>
</p>
</div>
</div>
</li>
<li class="wp-register">
<a href="javascript:;"><span>注册</span></a>
</li>
<li class="wp-signin">
<div class="icon-signin">
</div>
<a href="#"><span class="fr">签到有礼</span></a>
</li>
<li class="wp-order">
<a href="#"><span>我的订单</span></a>
</li>
<li class="wp-myfav">
<a href="#"><span style="margin-right: 4px;">我的特卖</span></a>
<div id="icon-myfav" class="fl">
</div>
<p>
<span><a href="">商品收藏</a></span>
<span><a href="">品牌收藏</a></span>
<span><a href="">我的足迹</a></span>
</p>
</li>
<li class="wp-vip">
<a href="#"><span>会员俱乐部</span></a>
<div id="icon-vip"></div>
</li>
<li class="wp-vipservice">
<a href="#"><span>客户服务</span></a>
<div id="icon-vipservice"></div>
</li>
<li class="wp-mobile">
<a href="#"><i class="phone"></i>手机版</a>
</li>
<li class="wp-more">
<a href="#"><span>更多</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--nav end -->
<!-- header start -->
<header>
<div class="logo w">
<h1>
<i></i>
<!-- 放入logo -->
<i></i>
<!-- 放入100%正品 -->
</h1>
<!-- 搜索栏 -->
<div class="box">
<input type="text" placeholder="女士羽绒服">
<span><button></button><i></i></span>
<ul>
<li><a href="" class="changecolor_a">大牌奥莱</a></li>
<li><b>|</b></li>
<li><a href="">王牌爆款</a></li>
<li><b>|</b></li>
<li><a href="">护肤套装</a></li>
<li><b>|</b></li>
<li><a href="">女士羽绒服</a></li>
<li><b>|</b></li>
<li><a href="">男士羽绒服</a></li>
</ul>
</div>
<!-- 购物袋 -->
<div class="car">
<i class="car_bag"></i>购物袋
<i class="car_count">0</i>
</div>
</div>
<!-- 导航栏 -->
<div class="main_nav w">
<div class="hide_nav">
<p>
<img src="picture/goods.png">
<span>商品分类</span>
</p>
<ol class="nav_ol">
<li>女装/男装/内衣</li>
<li>女鞋/男鞋/箱包</li>
<li>护肤彩妆/个护</li>
</ol>
</div>
<ul class="botList">
<li>
<a href="" class="changecolor_a">首页</a>
</li>
<li><a href="">最后疯抢</a></li>
<li><a href="">唯品快抢</a></li>
<li><a href="">女装</a></li>
<li><a href="">母婴</a></li>
<li><a href="">家电</a></li>
<li><a href="">国际</a></li>
<li><a href="">美妆</a></li>
<li><a href="">鞋包</a></li>
<li><a href="">男装</a></li>
<li><a href="">预告</a></li>
<li class="li_more">
<a href="">更多
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy"></use>
</svg>
</a>
<div class="div_more">
<ul>
<li>运动</li>
<li>家居</li>
<li>生活</li>
<li>配饰</li>
<li>唯品·奢</li>
<li>扶贫</li>
</ul>
</div>
</li>
</ul>
</div>
</header>
<!-- header end -->
<!-- 轮播图 start -->
<div class="banner-bg">
<div class="banner-main">
<div class="banner-main-center">
<ul>
<li></li>
<li></li>
</ul>
<span class="arr-left"></span>
<span class="arr-right"></span>
</div>
<div class="banner-bottom">
<ul>
<li class="banner-bottomline1">大牌特卖X 专柜大牌女装</li>
<li>|</li>
<li class="banner-bottomline2">大牌特卖X 马克华菲</li>
</ul>
</div>
</div>
</div>
<!-- 轮播图 end -->
<!-- 大牌特卖 start -->
<div class="line1" id="scroll">
<div class="line11">
</div>
<div class="line12 ct">
<i class="light light1"></i>
</div>
<div class="line13 ct">
<i class="light light2"></i>
</div>
<div class="line14 ct">
<i class="light light3"></i>
</div>
</div>
<!-- 大牌特卖 end -->
<!-- 每日必看 start -->
<div class="wrap_everylook" id="scroll1">
<img src="picture/15344789862278.jpg">
<!-- 第一个 -->
<div class="wrap_box">
<div>
<span><b>最后疯抢</b><u>•3折封顶</u></span>
<a href="">早10晚8上新 ></a>
</div>
<ul>
<li><img src="picture/824870103-578226387121541120-578226387121541122-50_5t_292x372_90.jpg">
<i><img src="picture/black_132x66_90(2).png"><u>共1862款</u></i>
<span><img src="picture/mst_2d41fbce75aa8c43a51509a5c73e569d_80x32_90.png">￥139</span>
</li>
<li><img src="picture/e113ccd8-e9a5-4219-9e30-ca528d31e539_420_531_292x372_90.jpg">
<i><img src="picture/black_132x66_90.png"><u>共700款</u></i>
<span><img src="picture/mst_2d41fbce75aa8c43a51509a5c73e569d_80x32_90.png">￥149</span>
</li>
<li><img src="picture/72623c19-aebe-474a-a812-283dfc1addc5_420_531_292x372_90.jpg">
<i><img src="picture/black_132x66_90(1).png"><u>共382款</u></i>
<span><img src="picture/mst_2d41fbce75aa8c43a51509a5c73e569d_80x32_90.png">￥69</span>
</li>
</ul>
</div>
<!-- 第二个 -->
<div class="wrap_box">
<div>
<span><b>排行榜</b></span>
<a href="">90%的会员都在买 ></a>
</div>
<ul>
<li><img src="picture/13e70153-eee7-4e52-9159-8354c51badae_420_531.jpg">
<i><img src="picture/mst_39228dba5276d88827c63ea282201711_208x38_90.png"></i>
<span>女士运动衣<i></i></span>
</li>
<li>
<img src="picture/3846ea5f-4800-40d5-978f-2f8e7f07d67c_5t.jpg">
<i><img src="picture/mst_39228dba5276d88827c63ea282201711_208x38_90.png"></i>
<span>女士大衣<i></i></span>
</li>
<li>
<img src="picture/008ea08f-23a4-45f6-9b6d-71711fdadc80_5t.jpg">
<i><img src="picture/mst_fce586cecfc6eb21a88cfb6b678d3c1e_208x38_90.png"></i>
<span>男式羽绒服<i></i></span>
</li>
</ul>
</div>
<!-- 第三个 -->
<div class="wrap_box">
<div>
<span><b>唯品快抢</b><b>•品质好物 天天低价</b></span>
<a href="">美好生活抢先到 ></a>
</div>
<ul>
<li><img src="picture/2da7d32c-6fd5-4b1d-a48d-9829bc1267f9_320x320_90.jpg!75.webp.jpg">
<span><img src="picture/primary_160x80_90.png.webp"></span>
<span><img src="picture/mst_d24fec498a2ea3ca0b4688fd311eb821_80x30_90.png">￥139</span>
</li>
<li><img src="picture/3b8cacdc-e60d-406e-b741-8458261369db_320x320_90.jpg!75.webp.jpg">
<span><img src="picture/primary_160x80_90.png(5).webp"></span>
<span><img src="picture/mst_d24fec498a2ea3ca0b4688fd311eb821_80x30_90.png">￥139</span>
</li>
<li><img src="picture/4655eaaa-d2e4-44b7-bb41-7ba4c03f1460_320x320_90.jpg!75.webp.jpg">
<span><img src="picture/primary_160x80_90.png(4).webp"></span>
<span><img src="picture/mst_d24fec498a2ea3ca0b4688fd311eb821_80x30_90.png">￥139</span>
</li>
<li><img src="picture/92216512-2a4d-4654-8415-4ee01fe9f6bf_320x320_90.jpg!75.webp.jpg">
<span><img src="picture/primary_160x80_90.png(3).webp"></span>
<span><img src="picture/mst_d24fec498a2ea3ca0b4688fd311eb821_80x30_90.png">￥139</span>
</li>
<li><img src="picture/5e21a35c-ed3e-4390-ac45-5e312ad0a532_320x320_90.jpg!75.webp.jpg">
<span><img src="picture/primary_160x80_90.png(2).webp"></span>
<span><img src="picture/mst_d24fec498a2ea3ca0b4688fd311eb821_80x30_90.png">￥139</span>
</li>
<li><img src="picture/b96c5d65-6dee-4f98-bbd4-b85aa329a3ff_320x320_90.jpg!75.webp.jpg">
<span><img src="picture/primary_160x80_90.png(6).webp"></span>
<span><img src="picture/mst_d24fec498a2ea3ca0b4688fd311eb821_80x30_90.png">￥139</span>
</li>
</ul>
</div>
</div>
<!-- 每日必看 end -->
<!-- 固定电梯导航 -->
<div class="fixedtool">
<div class="ear">
<div class="ear-left"></div>
<div class="ear-right"></div>
</div>
<ul>
<li class="current" onclick="scrollToView()">大牌特卖</li>
<li onclick="scrollToView1()">每日必看专区</li>
<li onclick="scrollToView2()">唯品会app下载</li>
</ul>
</div>
<!-- footer start -->
<div class="footer">
<div class="footer-inner w">
<ul>
<li>
<img src="picture/icons.png" alt="">
</li>
</ul>
</div>
<div class="footer-help w">
<dl class="footer-help_item">
<dt>服务保障</dt>
<dd><a href="#">正品保证</a></dd>
<dd><a href="#">7天无理由放心退</a></dd>
<dd><a href="#">7*15小时客户服务</a></dd>
<dd><a href="#">7天无理由随心换</a></dd>
</dl>
<dl class="footer-help_item">
<dt>购物指南</dt>
<dd><a href="#">导购演示</a></dd>
<dd><a href="#">订单操作</a></dd>
<dd><a href="#">会员注册</a></dd>
<dd><a href="#">账户管理</a></dd>
</dl>
<dl class="footer-help_item">
<dt>支付方式</dt>
<dd><a href="#">导购演示</a></dd>
<dd><a href="#">订单操作</a></dd>
<dd><a href="#">会员注册</a></dd>
<dd><a href="#">账户管理</a></dd>
</dl>
<dl class="footer-help_item">
<dt>配送方式</dt>
<dd><a href="#">导购演示</a></dd>
<dd><a href="#">订单操作</a></dd>
<dd><a href="#">会员注册</a></dd>
<dd><a href="#">账户管理</a></dd>
</dl>
<dl class="footer-help_item">
<dt>售后服务</dt>
<dd><a href="#">导购演示</a></dd>
<dd><a href="#">订单操作</a></dd>
<dd><a href="#">会员注册</a></dd>
<dd><a href="#">账户管理</a></dd>
</dl>
<dl class="footer-help_item_app" id="scroll2">
<p>唯品会app二维码</p>
<img src="picture/app.png" alt="">
<p>下载唯品会移动app</p>
</dl>
</div>
<div class="footer-help_mod w">
<p class="footer-help_mod_links">
<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>|
</p>
</div>
<div class="footer-help_mod_info w">
<p>Copyright © 2008-2020 vip.com，All Rights Reserved 使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司 粤公网安备 44010302111111号 粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2018〕5030-1743号 经营主体证照 风险监测信息 互联网药品信息服务资格证书：（粤）-经营性-2018-0271 网络食品交易第三方平台备案凭证：粤B2-20170777
医疗器械网络交易服务第三方平台备案 凭证：（粤）网械平台备字[2019]第00001号
</p>
</div>
</div>
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
