⛵ 源码获取 文末联系 ✈
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>
<head>
<meta charset="utf-8">
<title>安踏商城</title>
<link href="style/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<div class="w top-nav">
<img class="logo" src="images/logo.gif" width="215" height="50" alt=""/>
<span><a href="#">登录</a>|<a href="#">注册</a></span>
<ul class="quick-menu clearfix">
<li class="first-item"><a href="#">我的安踏</a>|</li>
<li><a href="#">品牌官网</a>|</li>
<li class="mobile-btn"><a href="#">手机商城</a>|</li>
<li><a class="c-red" style="color:#d00;">企业团购</a>|</li>
<li>购物车(0)件</li>
</ul>
</div>
</div>
<div class="nav">
<ul class="w clearfix">
<li class="all-styles">所有商品分类</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="uni_logo"><img src="images/uni_logo.png" width="110" height="30" alt=""/></li>
<li class="nav-search">
<input type="text" placeholder="" autocomplete="off" value="" id="search_box" class="nav-search-input" promptvalue="" onkeydown="javascript:if( event.keyCode == 13 ) return search_goods('/search');">
<a class="nav-search-btn" id="search"></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="banner w-full">
<div class="banner-img"><img src="images/pc.jpg" alt=""/></div>
<div class="banner-tit"><a class="active" href="#">要疯篮球</a><a href="#">放肆街头</a><a href="#">新款气垫</a><a href="#">KT4定制</a></div>
</div>
<div class="series-nav">
<ul class="w">
<li class="item-1">
<img src="images/580-400-1.jpg" width="580" height="400" alt=""/>
<h3>篮球明星战靴</h3>
<p>汤普森四代|要疯系列|篮球服装</p>
</li>
<li class="item-1">
<img src="images/580-400-2.jpg" width="580" height="400" alt=""/>
<h3>跑步系列</h3>
<p>闪能科技跑鞋|夏季新款|舒适气垫|跑步服装</p>
</li>
<li class="item-2">
<img src="images/385-311-1.jpg" width="385" height="311" alt=""/>
<h3>2019夏上新</h3>
</li>
<li class="item-2">
<img src="images/385-311-2.jpg" width="385" height="<