⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 汽车网站 | 汽车介绍 | 汽车官网 | 汽车租赁 | 企业网页 | 等网站的设计与制作 | 此作品为学生汽车网页设计题材 | 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 lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>沃夫德尔首页</title>
</head>
<style>*{padding: 0;margin: 0;
}
.db{width: 1200px;margin: 0 auto;overflow: hidden;
}
.db0{background-color: #082939;
}
.db li{float: left;list-style-type: none;width: 130px;font-size: 20px;color: white;line-height: 80px;text-align: center;
}
.a1{float: left;margin: 20px 19px;
}
.dibu1{width: 1200px;margin: 0 auto;overflow: hidden;}
.a2{float: left;list-style-type: none;color: white;margin:20px 20px 0 0;
}
.a2 li{list-style-type: none;padding: 0 0 12px;
}
.dibu0{background-color: #082939;
}
.a3{color: white;
}
.a4{margin: 0 0 0 1040px;
}
.dibu-1{background-color:black
}
.dibu2{width: 1200px;margin: 0 auto;color: #FFFFFF;line-height: 30px;
}
.dibu2 p{width: 700px;margin: 0 auto;
}
.tu1{width: 1922px;margin: 0 auto;
}
.tu1 p{text-align: center;font-size: 30px;
}
.tu2{width: 1200px;margin:100px auto ;overflow: hidden;
}
.b1{float: left;list-style-type: none;
}
.b2{float: right;list-style-type: none;width: 724px;}
.b3{/* width: 700px; */overflow: hidden;
}
.a5{float: left;padding: 5px;border: 1px solid #1F74A3;color: white;border-radius: 5px;list-style-type: none;background-color:#1F74A3 ;margin: 30px 0 20px 30px;
}
.a6{float: left;padding: 5px;border: 1px solid #1F74A3;border-radius: 5px;list-style-type: none;background-color:white ;margin: 30px 0 20px 30px;
}
.a7{float: right;padding: 5px;list-style-type: none;margin: 30px 0 20px;
}
.b4 li{/* width: 700px; */margin: 15px 0 10px;list-style-type: none;border-bottom: dashed black 1px;
}
.b5{background-color: #EEF0F3;
}
.b6{margin: 0 auto;width: 1200px;
}
.b7{margin: 0 auto;width: 1900px;
}
.b8{background-color: #101010;
}
.c1{background-color: #EEF0F3;
}
.c2{text-align: center;padding: 100px 0 50px;font-size: 40px;
}
.c3{text-align: center;font-size: 40px;color: #FE941B;
}
.c4{margin: 0 auto;font-size: 30px;border-bottom: solid black 1px;width: 1250px;
}
.c5{width: 1700px;height: 350px;margin: 30px auto;border: 1px solid black;overflow: hidden;
}
.c6{float: left;list-style-type: none;
}
.c6 li{padding:17px 0;
}
.zhong{overflow: hidden;width: 1200px;margin: 0 auto;
}
.zuo{float: left;width: 810px;}
.you{float: right;width: 380px;}
.c7{margin: 50px;
}
.a8{padding: 5px;background-color: #F2F2F2;
}
.a9{text-align: center;
}
.b9{padding: 10px;text-align: center;border-top: black 0.5px dashed;border-bottom: black 0.5px dashed;
}
span{color: #1F74A3;
}
.c8{border-bottom: black 0.5px dashed;
}
.c9{margin: 50px auto;width: 350px;
}
.c9 button{background-color: #2D6FA4;border-radius: 5px;padding: 0px 10px;color: white;
}
</style>
<body><div class="db0"><!-- 通用顶部 --><div class="db"><div class="a1"><img src="picture/logo.png" alt=""></div><ul><li>首页</li><li>关于我们</li><li>产品推展</li><li>智能体验</li><li>技术支持</li><li>新闻中心</li><li>商务服务</li></ul></div></div><div><!-- 中间部分 --><div class="tu1"><img src="picture/img_02.jpg" alt=""></div><div class="tu1"><p>资讯</p><p>INFORMATION</p></div><div class="tu2"><ul><li class="b1"><img src="picture/img_05.jpg" alt=""></li><li class="b2"><div class="b3"><ul><li class="a5">行业新闻</li><li class="a6">公司活动</li><li class="a7">更多</li></ul></div><div class="b4"><ul><li>01  audiolab 8200CD获英国《WHATHIFI？》最佳CD机大奖我的妈的什么车进房间2015-10-28</li><li>01  audiolab 8200CD获英国《WHAT HIFI？》最佳CD机大方法二分法二分法奖2015-10-28</li><li>01   audiolab 8200CD获英国《WHAT HIFI？》最佳CD机给他人提供热太热他大奖2015-10-28</li><li>01  audiolab 8200CD获英国《WHAT HIFI？》最个人干的风格让他佳CD机大奖2015-10-28</li><li>01   audiolab 8200CD获英国《WHAT HIFI？》最佳了几句了了解CD机大奖2015-10-28</li><li>01 audiolab 8200CD获英国《WHAT HIFI？》最佳C了空间看看空间D机大奖2015-10-28</li><li>01    audiolab 8200CD获英国《WHAT HIFI？》最佳CD机大奖2015-10-28</li></ul></div></li></ul></div><div class="b5"><div class="b6"><img src="http://www.ylcp.shop/files/files/1650332263059/images/%E6%B2%83%E5%A4%AB%E5%BE%B7%E5%B0%94%E9%A6%96%E9%A1%B5_03.jpg" alt=""></div></div><div class="b5"><div class="b7"><img src="http://www.ylcp.shop/files/files/1650332263059/images/%E6%B2%83%E5%A4%AB%E5%BE%B7%E5%B0%94%E9%A6%96%E9%A1%B5_05.jpg" alt=""></div></div><div class="c1"><p class="c2">招商加盟</p><p class="c3"><img src="http://www.ylcp.shop/files/files/1650332263059/images/%E6%B2%83%E5%A4%AB%E5%BE%B7%E5%B0%94%E9%A6%96%E9%A1%B5_08.jpg" alt="">400-60000-798</p><p class="c4">智能骑行——充满机遇与挑战的热门行业  沃夫德尔——值得信赖的行业领导品牌期待您的加盟</p><p class="c2">常见问题</p><div class="c5"><ul><li class="c6"><ul><li>公路头盔和山地头盔的区别在哪？</li><li>山地头盔有帽檐，公路头盔一般没有头盔的使用寿命多长？</li><li>一般头盔使用2-3年就需要更换，而且它属于一次性产品，如果摔跤后，盔出现裂痕等，就需要重新更换新的</li><li>livall智能头盔的待机时间多长，电池的使用寿命多久？</li><li>电池容量是380MA，可正常工作时间是6个多小时，每次充电时间大概要1.5小时。</li><li>而电池的使用寿命跟平常我们使用的智能手机电池（大约500次充电）差不多</li></ul></li><li class="c6"><ul><li>公路头盔和山地头盔的区别在哪？</li><li>山地头盔有帽檐，公路头盔一般没有头盔的使用寿命多长？</li><li>一般头盔使用2-3年就需要更换，而且它属于一次性产品，如果摔跤后，盔出现裂痕等，就需要重新更换新的</li><li>livall智能头盔的待机时间多长，电池的使用寿命多久？</li><li>电池容量是380MA，可正常工作时间是6个多小时，每次充电时间大概要1.5小时。</li><li>而电池的使用寿命跟平常我们使用的智能手机电池（大约500次充电）差不多</li></ul></li></ul></div></div><div class="b8"><div class="b6"><img src="picture/img_14.jpg" alt=""></div></div></div><div class="dibu0"><!-- 通用底部 --><div class="dibu1"><div class="dibu1a"><ul><li class="a2">首页</li><li class="a2"><ul><li>关于我们</li><li>公司简介</li><li>企业理念</li><li>发展历程</li><li>发展战略</li><li>发展前景</li><li>实力荣誉</li><li>员工天地</li></ul></li><li class="a2"><ul><li>沃夫德尔</li><li>Smart4U</li><li>livall</li></ul></li><li class="a2"><ul><li>智能体验</li><li>产品体验</li><li>骑行体验</li></ul></li><li class="a2"><ul><li>技术支持</li><li>常见问题</li><li>优质服务</li><li>联系方式</li><li>在线客服</li><li>在线留言</li></ul></li><li class="a2"><ul><li>招商加盟</li><li>招商加盟</li><li>招贤纳士</li></ul></li><li class="a2"><ul><li>新闻中心</li><li>行业新闻</li><li>公司动态</li></ul></li><li class="a2"><ul><li>商务服务</li><li>淘宝</li><li>天猫</li><li>京东</li><li>苏宁</li><li>全国体验网点</li></ul></li></ul></div><div class="dibu1b"><p class="a3">公司地址：深圳市南山区科技园北区清华信息港科研楼903</p><div class="a4"><img src="picture/code.png" alt=""></div></div></div></div><div class="dibu-1"><div class="dibu2"><p>版权所有：深圳沃夫特尔有限公司 备案号：粤CP189565988565号-1 技术支持：网联讯科技</p></div></div>
</body>
</html>

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页带psd)相关推荐

HTML5期末大作业：电影介绍网站设计——电影从你的全世界路过(4页)带音乐特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计
HTML5期末大作业:电影介绍网站设计--电影从你的全世界路过(4页)带音乐特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业 ...
免费html5 css3大学生网页设计期末作业网页制作作业成品
html5 css3大学生网页设计期末作业网页制作作业成品布局技术:html5 css3 页面个数:6个网页元素:图文超链接表单效果图: 目录如下: <!DOCTYPE html&g ...
宠物之家网站大学生网页制作教程学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码
使用Django制作一个电影视频网站--后台界面制作
准备: 需要软件与所需环境: mysql+pycharm软件+warmserver+Anaconda3环境+仿站小工具(从别人的网页中找html/css/js等前端内容)+Navicat for M ...
制作一个简单HTML+CSS个人网页设计（web前端大作业）
这是一个电影网页制作,非常简单,非常适合大学生网页制作 html <!doctype html> <html> <head> <meta charset=&q ...
HTML5期末大作业：重庆火锅网站设计——代码质量好-重庆火锅(5页) HTML+CSS+JavaScript 大学生网页制作期末作业
HTML5期末大作业:重庆火锅网站设计--代码质量好-重庆火锅(5页) HTML+CSS+JavaScript 大学生网页制作期末作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
HTML5期末大作业：仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品大学生网页制作期末作业
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品大学生网页制作期末作业常见网页设计作业题材有个人. ...
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页带psd)

文章目录

前端学习路线

网页基本结构

网页演示

HTML结构代码

学的反而越迷茫

学习更多

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页带psd)相关推荐

最新文章

热门文章

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页 带psd)

文章目录

前端学习路线

网页基本结构

网页演示

HTML结构代码

学的反而越迷茫

学习更多

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页 带psd)相关推荐

最新文章

热门文章

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页带psd)

HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页带psd)相关推荐