导航栏：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">ul {list-style: none;}#li1 {background-image: url(img/bg1.png);}#li2 {background-image: url(img/bg2.png);}#li3 {background-image: url(img/bg3.png);}#li4 {background-image: url(img/bg4.png);}.nav li {float: left;margin: 0 2;}.nav li a {width: 120px;height: 58px;display: inline-block;text-align: center;line-height: 50px;color: white;text-decoration: none;font-size: 20px;}.li5 a:hover {background-image: url(img/bg5.png);}.li6 a:hover {background-image: url(img/bg6.png);}</style></head><body><div class="nav"><ul><li id="li1" class="li5"><a href="#">首页</a></li><li id="li2" class="li6"><a href="#">学院简介</a></li><li id="li3" class="li5"><a href="#">专业信息</a></li><li id="li4" class="li6"><a href="#">师资信息</a></li></ul></div></body>
</html>

截图：

购物页面：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东网页</title><style type="text/css">#img {width: 186px;height: 205px;}#div0 {width: 720px;height: 600px;border: 1px solid #0099FF;margin: 0 auto;text-align: center;}h3 {text-align: center;font-size: 32px;color: red;}#div1 {margin: 10px;float: left;text-align: center;vertical-align: center;width: 208px;height: 225px;}#div2 {margin: 10px;float: left;text-align: center;vertical-align: center;width: 208px;height: 225px;}#div3 {margin: 10px;float: left;text-align: center;vertical-align: center;width: 208px;height: 225px;}#div4 {margin: 10px;float: left;text-align: center;vertical-align: center;width: 208px;height: 225px;}#div5 {margin: 10px;float: left;text-align: center;vertical-align: center;width: 208px;height: 225px;}#div6 {margin: 10px;float: left;text-align: center;vertical-align: center;width: 208px;height: 225px;}.div a img {border: 10px groove #9966cc;}.div a:hover img {border: 10px dashed #9999CC;}</style></head><body><div id="div0" class="div"><h3>京东商品导购</h3><div id="div1"><a href="#"><img id="img" src="img/image41-1.jpg"></a></div><div id="div2"><a href="#"><img id="img" src="img/image41-2.jpg"></a></div><div id="div3"><a href="#"><img id="img" src="img/image41-3.jpg"></a></div><div id="div4"><a href="#"><img id="img" src="img/image41-4.jpg"></a></div><div id="div5"><a href="#"><img id="img" src="img/image41-5.jpg"></a></div><div id="div6"><a href="#"><img id="img" src="img/image41-6.jpg"></a></div></div></body>
</html>

截图：

Web前端开发实验（导航栏、购物页面）相关推荐

Web前端开发实验作业 - 网页计算器
Web前端开发实验作业 - 网页计算器项目已上传至GitHub 仅供学习交流需要自取不妨点个start 谢谢 https://github.com/zhenggengqiong/Computer ...
视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
web前端－CSS 导航栏－024
导航栏熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表作为标准的HTML基础一个导航栏是必须的 .在我们的例子中我们将建立一 ...
web前端开发实验——2
一.设计一个网页,页面内容为 "I can designe HTML page!",背景色为黑色,字体颜色为白色,页面的样式使用内嵌的CSS定义. <!DOCTYPE htm ...
重庆市南川隆化职业学校计算机,重庆市第十三届中等职业学校职业技能大赛“web前端开发”赛项在南川隆化职中举行...
5月10日到11日,重庆市第十三届中等职业学校职业技能大赛"web前端开发"赛项在南川隆化职中举行.来自全市39所中职学校的50名教师选手.56名学生选手参加比赛.本次大赛由重庆市 ...
web前端开发技术实验与实践（第三版）储久良编著项目12 设计简易网站导航
web前端开发技术实验与实践(第三版)储久良编著项目12 设计简易网站导航实训三项目12 设计简易网站导航一.页面文字素材: 序号网站名称 URL 1 百度 http://www.ba ...
web前端开发技术实验与实践（第三版）储久良编著项目16 div+CSS页面布局设计
web前端开发技术实验与实践(第三版)储久良编著项目16 实训五项目16 一.页面文字素材: 这是头部信息区. 这是导航信息区. 这是主题信息区. 这是右侧信息区. 这是版权信息区. 二.代码: ...
html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
Web前端开发技术课程实验报告实验3：Vue路由实验
实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载 Web前端开发技术课程实验报告实验3:Vue路由实验姓名:_ __ _ ___ ___ 班级:_ _ _ ___ _ _ ...
web前端开发技术实验与实践（第三版）储久良编著项目13 设计新生课程简介
web前端开发技术实验与实践(第三版)储久良编著项目13 设计新生课程简介实训三项目13 设计新生课程简介一.页面文字素材: 英语基础英语.高级英语.报刊选读.视听.口语.英语写作.翻译 ...

Web前端开发实验（导航栏、购物页面）

导航栏：

购物页面：

Web前端开发实验（导航栏、购物页面）相关推荐

最新文章

热门文章