⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | 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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
<div class="w1280 clearfix">
<a href="" class="logo fl">
<img src="picture/logo.png" alt="">
</a>
<div class="fr clearfix">
<div class="fr tel">
<h3>全国免费加盟热线 <img src="picture/tel.png" alt=""><img src="picture/n2.png" alt=""></h3>
</div>
<div class="clearfix"></div>
<ul class="clearfix navbar">
<li>
<a href="">首 页<b></b></a>
</li>
<li>
<a href="aboutus.html">关于我们<b></b></a>
</li>
<li>
<a href="products.html">产品展示<b></b></a>
</li>
<li>
<a href="newslist.html">新闻中心<b></b></a>
</li>
<li>
<a href="branch.html">门店分布<b></b></a>
</li>
<li>
<a href="joinus.html">招商加盟<b></b></a>
</li>
<li>
<a href="contactus.html">联系我们<b></b></a>
</li>
</ul>
</div>
</div>
</div>
<div class="banner">
<div class="bd">
<ul class="bannerfix slides clearfix">
<li>
<img class="bimg" src="picture/banner.png" alt="">
</li>
<li>
<img class="bimg" src="picture/banner.png" alt="">
</li>
<li>
<img class="bimg" src="picture/banner.png" alt="">
</li>
</ul>
</div>
<div class="bamnline"><span></span></div>
</div>
<div class="section1">
<div class="w1280 clearfix">
<div class="left fl" data-scroll-reveal="enter left over 1s and move 50px">
<b></b>
<p>
食为本,心为媒<br> 技艺,是对传统的续存和升华。
<br> 而标准,则是现代品质坚守的底线。
<br> 随着时代流变而坚守的技艺与标准,
<br> 已成为线上花甲成长之路的灵魂。
</p>
<h2>精致之选</h2>
</div>
<div class="right fr" data-scroll-reveal="enter right over 1s and move 50px">
<video width="638" height="359" src="file/mov_bbb.mp4" controls="controls"> </video>
</div>
</div>
</div>
<div class="section2">
<div class="w1280">
<div class="txtMarquee-top" data-scroll-reveal="enter bottom over 1s and move 50px">
<div class="bd">
<ul class="infoList">
<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>
</div>
</div>
</div>
</div>
<div class="section3">
<ul class="clearfix">
<li data-scroll-reveal="enter bottom over 1s and move 50px">
<a href="">
<strong><img src="picture/750.png" alt=""></strong>
<p>线上花甲全国加盟店<br>总计750余家</p>
</a>
</li>
<li data-scroll-reveal="enter bottom over 1s and move 50px">
<a href="">
<strong><img src="picture/158.png" alt=""></strong>
<p>线上花甲门店已遍<br>布全国158座城市</p>
</a>
</li>
<li data-scroll-reveal="enter bottom over 1s and move 50px">
<a href="">
<strong><img src="picture/1000.png" alt=""></strong>
<p>线上花甲年销量超<br>10000000份</p>
</a>
</li>
</ul>
</div>
<div class="w1280">
<div class="section4 clearfix">
<div class="div1" data-scroll-reveal="enter left over 1s and move 50px">
<a href="">
<figure><img src="picture/tu1.png" alt=""></figure>
<figcaption>
<h2>名企赋能 品牌增信 创业无忧</h2>
<h3>安徽路可集团公司拥有多年餐饮连锁运营经验<b></b></h3>
<p>
是一家围绕餐饮连锁经营、直营渠道建设、企业营销策 划、品牌推广和培训咨询为核心业务的综合性公司。凭借高瞻远瞩的战略远见和多 年经验累积,成为一家知名实战运营机构。 自公司创建伊始,便以弘扬中国美食文 化为己任,
</p>
<span class="more">>More</span>
</figcaption>
</a>
</div>
<div class="div2" data-scroll-reveal="enter right over 1s and move 50px">
<a href="">
<figcaption>
<h2>健康美味</h2>
<h3><b></b></h3>
<p>
线上花甲独创《线上四部曲》并辅以精品蔬菜,营养搭配 ,既满足不同顾客口味需求,又能体验美食的乐趣!
</p>
</figcaption>
<figure><img src="picture/tu3.png" alt=""></figure>
</a>
</div>
<div class="div3" data-scroll-reveal="enter right over 1s and move 50px">
<a href="">
<figure><img src="picture/tu2.png" alt=""></figure>
<figcaption>
<h2>精致体验</h2>
<h3><b></b></h3>
<p>
线上花甲的创新脚步从未停止,全新2代品牌形象升级,门店利用现代 空间美学与潮流元素相融合,营造出一个更受年轻人青睐、简约、时 尚的用餐氛围。……
</p>
</figcaption>
</a>
</div>
</div>
</div>
<div class="section5">
<div class="w1280">
<div class="white-bg" data-scroll-reveal="enter bottom over 1s and move 50px,wait 0.6s"></div>
<div class="s5-text " data-scroll-reveal="enter bottom over 1s and move 50px,wait 1.6s">
<h2><img src="picture/tit.png" alt=""></h2>
<p>
每一道美食的背后,总会有一段鲜为人知的小故事,线上花甲的诞生 也不例外。多年前,他和她在山东美丽的青岛结 识,她总是热衷于 各种各样的海鲜美食,尤其是花甲,为了心爱的 她,他从岳母那里学 会正宗的辣炒蛤蜊和各种海鲜做法,岳母告诉他:
<b>“花甲代表一生的
爱情,是一个甲子的承诺”!</b>
</p>
<p class