基于html的美食网站——速鲜站餐饮食品(HTML+CSS+JavaScript)--水果超市(响应式)2页
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业
-
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 lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>水果超市title><link href="css/bootstrap.min.css" rel="stylesheet" /><link href="css/style.css" rel="stylesheet" /><script src="js/jquery.min.js">script><script src="js/bootstrap.min.js">script><script src="js/main.js">script><style>.box {width: 100%;border: #999 solid 1px;box-sizing: border-box;}.box-th {overflow: hidden;width: 100%;background-color: #88ace6;}.box-th ul li {float: left;width: 90px;height: 40px;margin-right: 10px;line-height: 30px;padding: 5px;text-align: center;}.current {color: #fff;background-color: green;}.box-tb {margin-top: 20px;height: 200px;padding: 0 10px;overflow: hidden;}.box-tb .item {line-height: 2;text-indent: 2rem;}.box-tb .item:nth-child(n + 2) {display: none;}.ly h5 {border-bottom: 1px solid rgb(133, 128, 128);padding-bottom: 3px;}style>head><body><header class="top"><div class="container"><div class="logo fontsize5 pull-left"><img src="images/logo.png" width="240" />div><div class="search pull-right">div>div>header><div class="clearfix">div><div class="menu clearfix"><ul class="container nav"><li class="first"><a href="index.html" target="_self">首页a>li><li class=""><a class="noborder" href="picture.html" target="_self">水果图片a>li><li class=""><a class="noborder" id="op">意见提交a>li>ul>div><div class="swipe" id="swipe"><div class="bg" id="swipe_bg">div><section><div class="img-box" id="swipe_img_box"><a href="#" class="link" id="swipe_link"><img src="./images/a.jpg" alt="" class="sw-img" id="swipe_img" />a>div><div class="select" id="swipe_select">div><div class="btn left" id="swipe_btn_left"><img src="./images/swiper-l.png" class="fa" alt="" />div><div class="btn right" id="swipe_btn_right"><img src="./images/swiper-r.png" class="fa" alt="" />div>section>div><div cla
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
