⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业,Web大学生网页
-
HTML:结构
-
CSS:样式
在操作方面上运用了html5和css3,
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript:做与用户的交互行为
前端学习路线
(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">
<title>淘宝网 - 淘!我喜欢</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="css/font_1476086402_7038264.css">
<link rel="stylesheet" href="css/resetStyle.css">
<link rel="stylesheet" href="css/QR.css">
<link rel="stylesheet" href="css/fixed-nav.css">
<link rel="stylesheet" href="css/fixed-search.css">
<link rel="stylesheet" href="css/help.css">
<link rel="stylesheet" href="css/link.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/often-visit.css">
<link rel="stylesheet" href="css/trail.css">
<link rel="stylesheet" href="css/side-nav.css">
<link rel="stylesheet" href="css/slide1.css">
<link rel="stylesheet" href="css/slide2.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/head.css">
<link rel="stylesheet" href="css/aliAPP.css">
<link rel="stylesheet" href="css/side-announcement.css">
<link rel="stylesheet" href="css/side-recharge.css">
<link rel="stylesheet" href="css/side-user.css">
<link rel="stylesheet" href="css/hot-today.css">
<link rel="stylesheet" href="css/popularity.css">
<link rel="stylesheet" href="css/my-often-visit.css">
<link rel="stylesheet" href="css/ifashion.css">
<link rel="stylesheet" href="css/quality.css">
<link rel="stylesheet" href="css/feature.css">
<link rel="stylesheet" href="css/benefits.css">
<link rel="stylesheet" href="css/headline.css">
<link rel="stylesheet" href="css/goodGoods.css">
<link rel="stylesheet" href="css/goodShop.css">
<link rel="stylesheet" href="css/hotSale.css">
<link rel="stylesheet" href="css/hotSaleBottom.css">
<link rel="stylesheet" href="css/guessYouLike.css">
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1652753810198/img/title.ico" type="image/x-icon">
<style>
body{
background: #F1F1F1; }
#search{
width: inherit; height: inherit; background: #fff; }
#logo,.search,.QR-code{
float: left; }
#search .search-bg{
width: 1190px; height: 164px; margin: 0 auto; position: relative; }
#main{
width: 1190px; margin: 0 auto; }
#sub-main{
width: 889px; position: relative; float: left; }
#sub-main #market,#sub-main .slide,#sub-main .good-bag,#sub-main .slide2,#sub-main .hot-today{
float: left; }
.good-bag{
margin: 10px 0 0 9px; }
.bag{
position: absolute; left: 0; top: 489px; }
.bag img{
width: 192px; }
#side{
float: right; width: 290px; }
.price-99{
display: inline-block; line-height: 0; margin: 15px 0 0 5px; }
.startwork-lowprice{
float: left; margin: 16px 0 0 5px; }
#shunfengbaoyou{
width: 290px; height: 270px; margin-top: 73px; }
#shunfengbaoyou img{
margin-left: 5px; }
#shunfengbaoyou h2{
font-size: 14px; font-weight: bold; color: #3C3C3C; margin-bottom: 12px; }
</style>
</head>
<body>
<!--固定的右侧导航条-->
<div class="fixed-nav">
<ul>
<li class="often"><a href="javascript:;">我常逛的</a></li>
<li class="fashion"><a href="javascript:;">时尚</a></li>
<li class="quality"><a href="javascript:;">品质</a></li>
<li class="feature"><a href="javascript:;">特色</a></li>
<li class="benefits"><a href="javascript:;">实惠</a></li>
<li class="guess-like"><a href="javascript:;">猜你喜欢</a></li>
<li class="top"><a href="javascript:;"><span class="arrows iconfont icon-jiantoushang"></span><span class="top-span">顶部</span></a></li>
<li class="couple-back"><a href="javascript:;">反馈</a></li>
<li class="report"><a href="javascript:;">暴恐举报</a></li>
</ul>
</div>
<!--固定定位的search-->
<div class="fixed-search">
<div class="wrap">
<a class="logo" href="#"><img src="picture/1.png" alt=""></a>
<div class="box-1">
<form class="form clear" action="#">
<div class="choose">
<a class="active goods" href="javascript:;">宝贝</a>
<a class="Tmall" href="javascript:;">天猫</a>
<a class="shop" href="javascript:;">店铺</a>
</div>
<input class="text" type="text">
<span class="wrap-1 iconfont icon-xiangji"><input class="file" type="file"></span>
<input class="submit" type="submit" value="搜索">
</form>
</div>
<div class="box-2">
<form class="form clear" action="#">
<div class="choose">
<a class="active Tmall" href="javascript:;">天猫</a>
<a class="goods" href="javascript:;">宝贝</a>
<a class="shop" href="javascript:;">店铺</a>
</div>
<input class="text text-2" type="text">
<input class="submit submit-2" type="submit" value="搜索">
</form>
</div>
<div class="box-3">
<form class="form clear" action="#">
<div class="choose">
<a class="active shop" href="javascript:;">店铺</a>
<a class="Tmall" href="javascript:;">天猫</a>
<a class="goods" href="javascript:;">宝贝</a>
</div>
<input class="text text-3" type="text">
<input class="submit" type="submit" value="搜索">
</form>
</div>
</div>
</div>
<!--头部-->
<div id="header">
<div id="headwrap">
<div id="head">
<ul class="left">
<li><a class="active left-1" href="#">亲,请登录</a></li>
<li><a class="left-2" href="#">免费注册</a></li>
<li><a class="left-3" href="#">手机逛淘宝</a></li>
</ul>
<ul class="right">
<li class="li-1 my-taobao"><a class="left" href="#">我的淘宝</a><span class="iconfont icon-xiajiantou"></span>
<ul>
<li><a href="#">已买到的宝贝</a></li>
<li><a href="#">我的足迹</a></li>
</ul>
</li>
<li class="li-1 shopping-cart"><span class="left iconfont icon-gouwuche"></span><a href="#">购物车<span class="count">0</span></a><span class="iconfont icon-xiajiantou"></span>
<ul></ul>
</li>
<li class="li-1 favorite"><span class="left iconfont icon-shoucangjia"></span><a href="#">收藏夹</a><span class="iconfont icon-xiajiantou"></span>
<ul>
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店铺</a></li>
</ul>
</li>
<li class="li-1 classify"><a class="left" href="#">商品分类</a><span class="iconfont icon-shuxian"></span>
</li>
<li class="li-1 seller"><a class="left" href="#">卖家中心</a><span class="iconfont icon-xiajiantou"></span>
<ul>
<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>
</ul>
</li>
<li class="li-1 service"><a class="left" href="#">联系客服</a><span class="iconfont icon-xiajiantou"></span>
<ul>
<li><a href="#">消费者客服</a></li>
<li><a href="#">卖家客服</a></li>
</ul>
</li>
<!-- 网站导航 -->
<li class="nav-li-1 navigation"><span class="left iconfont icon-daohang"></span><a href="#">网站导航</a><span class="iconfont icon-xiajiantou"></span>
<ul class="ul-1">
<li class="li-2 d-1">
<h2 class="h2-1">主题市场</h2>
<ul class="ul-2">
<li><a class="hot" 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 class="n" 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><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><a class="hot" 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>
</ul>
</li>
<li class="li-2 d-2">
<h2 class="h2-2">特色市场</h2>
<ul class="ul-2 w-2">
<li><a class="n" href="#">iFashion</a></li>
<li><a href="#">爱逛街</a></li>
<li><a href="#">美妆秀</a></li>
<li><a class="hot" 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 class="hot" 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 class="n" href="#">亲宝贝</a></li>
<li><a href="#">闲鱼</a></li>
<li><a href="#">桃花源</a></li>
<li><a href="#">农资</a></li>
<li>
<aclass="hot" href="#">天天特价
</aclass="hot"></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>
</ul>
</li>
<li class="li-2 d-3">
<h2 class="h2-3">阿里APP</h2>
<ul class="ul-2 w-2">
<li><a class="hot" href="#">淘宝</a></li>
<li><a href="#">天猫</a></li>
<li><a href="#">支付宝</a></li>