Web前端学习记录(十五)
2024-05-28 08:50:31
写在前面：
由于w小小的失误，这篇其实应该是(十二)，害，这件事情说来话长，尽管想改一下名字，但时间的先后没办法呀，只好将错就错了。
w：开始表演。
y：视而不见。
w：······
实现shoppingIndex.html中的图片轮播效果：
只能这样预览一下图片：
关键的picSlide.js:
// Created by guoqy
// 图片轮播效果
//用于标识当前轮播到第几幅图片
var sign = 2;
//显示轮播图片
function showPic(index) {//轮播效果，中当前显示的图片var focusImg = document.getElementById("focusImg");//图片路径var imgSrc = "images/index/pic";imgSrc =imgSrc+ index + ".jpg";//更换轮播图片focusImg.src = imgSrc;//获取圆点列表var lis = document.getElementsByClassName("focusBox")[0].getElementsByTagName("li"); //移除所有轮播按钮的css样式for (var i = 0; i < lis.length; i++) {lis[i].className = "";}//设置轮播图片对应的轮播按钮样式lis[index - 1].className = "cur";
}
//对轮播图片进行计算处理
function setCurrentPic() {showPic(sign);sign++;if (sign == 4) {sign = 1;}
}
//窗体加载时，指定显示的图片
window.onload = function () {showPic(1);
}
//设置定时器
window.setInterval("setCurrentPic()",1000);
老生常谈的style.css
@charset "utf-8";
/* CSS Document */
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000
}
a{color:#000;text-decoration:none
}
a:hover{color:#ce2626;text-decoration:none
}
img{border:none
}
.font14{font-size:14px;font-weight:700
}
.font16{font-size:16px;font-weight:700
}
.padding-top{padding-top:8px
}
/*头部*/
.top_line{border-bottom:1px solid #ccc;font-size:12px;font-family:"宋体";line-height:30px
}
.nav_font16{font-size:16px;font-weight:700;color:#fff
}
.orange{font-weight:700;color:#f60
}
.nav_active{background:#b12121;padding:5px 0;height:30px
}
a.white{color:#fff;text-decoration:none
}
a.white:hover{color:#ff0;text-decoration:none
}
.shopcart{background:url(../images/shoppingcart.png) no-repeat center;width:16px;height:16px;display:inline-block}
/*左侧导航*/
.table1 tr th{height:33px;background:#e5e4e1;font-size:15px;text-indent:10px;text-align:left
}
.table1 tr td{height:33px;background:#fafafa;font-size:14px;text-indent:10px;text-align:left
}
.red_dot{font-size:25px;margin-right:10px;background:url(../images/red_dot.gif) no-repeat;width:8px;height:8px;display:inline-block
}
/*右侧公告*/
.notice_title{font-size:16px;text-indent:20px;text-align:left
}
.gray_dot{color:#ccc;font-size:25px;margin-right:10px;background:url(../images/gray_dot.gif) no-repeat;width:8px;height:8px;display:inline-block
}
.notice_text{display:block;width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left
}
/*foot*/
.foot_bg{line-height:20px;padding-top:10px;font-size:12px
}
.padding-bottom{padding-bottom:10px
}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px
}shoppingIndex.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漫步时尚广场-购物栏目</title>
<link href="css/style.css" rel="stylesheet" type="text/css"><style type="text/css">.focusBox {position: absolute;top: 490px;width: 120px;left: 50%;margin-left: -60px;list-style: none;}.focusBox li {float: left;margin-right: 10px;width: 15px;height: 15px;border-radius: 10px;background: gray;cursor: pointer;}.focusBox li.cur {background: #f60;opacity: 0.6;filter: alpha(opacity=60);}</style><script type="text/javascript" src="js/pictureSlide.js" ></script>
</head>
<body>
<!--顶部区域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line"><tr><td bgcolor="#f7f7f7" ><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td class="padding-top"><img src="data:images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="../manageadmin/login.html" class="orange">[请登录]</a> <a href="../register/register.html" class="orange"> [免费注册]</a></td><td align="right" > 客户服务<img src="data:images/arrow.gif"> 网站导航<img src="data:images/arrow.gif"> <span class="droparrow"><span class="shopcart"></span>我的购物车<span class="orange">0</span>件<img src="data:images/arrow.gif" /></span></td></tr></table></td></tr>
</table>
<!--顶部区域 end-->
<!--logo和banner start-->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td height="95"><a href="../index.html"><img src="data:images/logo.jpg"></a></td><td align="right"><img src="data:images/banner.jpg"></td></tr>
</table>
<!--logo和banner end-->
<!--菜单导航 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626" ><tr><td><table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16"><tr><td width="200"> </td><td width="80" align="center" class="nav_active"><a href="shoppingIndex.html" class="white">首页</a></td><td width="100" align="center"><a href="shoppingShow.html" class="white">最新上架</a></td><td width="100" align="center">品牌活动</td><td width="100" align="center">原厂直供</td><td width="80" align="center">团购</td><td width="100" align="center">限时抢购</td><td width="100" align="center">促销打折</td><td width="200" align="center"> </td></tr></table></td></tr>
</table>
<!--菜单导航 end-->
<!--中间部分 start-->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top"><tr><td width="220" valign="top" ><!--购物分类 start--><table width="100%" border="0" cellspacing="1" cellpadding="0" class="table1" bgcolor="#e5e4e1"><tr><th >女装</th></tr><tr><td ><span class="red_dot"></span><a href="#" >上衣</a><img src="data:images/arrow_r.jpg" align="right" ></td></tr><tr><td ><span class="red_dot"></span>下装<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><td ><span class="red_dot"></span>连衣裙<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><td ><span class="red_dot"></span>内衣<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><th>男装</th></tr><tr><td ><span class="red_dot"></span>T恤<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><td ><span class="red_dot"></span>短裤<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><td ><span class="red_dot"></span>衬衫<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><th>童装</th></tr><tr><td ><span class="red_dot"></span>上衣<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><td ><span class="red_dot"></span>裤子<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><th>运动</th></tr><tr><td ><span class="red_dot"></span>运动裤<img src="data:images/arrow_r.jpg" align="right"></td></tr><tr><td ><span class="red_dot"></span>跑步鞋<img src="data:images/arrow_r.jpg" align="right"></td></tr></table><!--购物分类end--></td><td width="716" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><!--焦点图 start--> <img src="data:images/index/pic1.jpg" width="690" height="350" id="focusImg"> <ul class="focusBox"><li onclick="showPic(1);"></li><li onclick="showPic(2);"></li><li onclick="showPic(3);"></li></ul><!--焦点图 end--></td><td valign="top"><!--右侧start--><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><!--公告 start--><table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#eeeeee"><tr><td height="35" bgcolor="#f7f7f7" class="notice_title">公告</td></tr><tr><td bgcolor="#ffffff"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top"><tr><td height="30" class="notice_text"><a href="#"><span class="gray_dot"></span>李主任点赞网店第一村</a></td></tr><tr><td height="30" class="notice_text"><span class="gray_dot"></span>网购维权有望一站解决</td></tr><tr><td height="30" class="notice_text"><span class="gray_dot"></span>25国30万商品全球直供</td></tr><tr><td height="30" class=" notice_text"><span class="gray_dot"></span>青岛交警淘宝体获公安部肯定</td></tr><tr><td height="30" class=" notice_text"><span class="gray_dot"></span>面对新常态 惟改革创新</td></tr><tr><td height="30" class=" notice_text"><span class="gray_dot"></span>差评敲诈淘宝 “差评师”获刑8个月</td></tr></table></td></tr></table><!--公告 end--></td></tr><tr><td height="8"></td></tr><tr><td><!--品牌推荐区 start--><table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f7f7f7"><tr><td align="center"><img src="data:images/index/link1.gif" width="80" height="35"></td><td align="center"><img src="data:images/index/link2.gif" width="80" height="35"></td><td align="center"><img src="data:images/index/link3.gif" width="80" height="35"></td></tr><tr><td align="center"><img src="data:images/index/link4.gif" width="80" height="35"></td><td align="center"><img src="data:images/index/link7.jpg" width="90" height="45" /></td><td align="center"><img src="data:images/index/link6.jpg" width="90" height="45"></td></tr><tr><td align="center"><img src="data:images/index/link5.jpg" width="90" height="45" /></td><td align="center"><img src="data:images/index/link8.jpg" width="90" height="45"></td><td align="center"><img src="data:images/index/link9.jpg" width="90" height="45"></td></tr></table><!--品牌推荐区 end--></td></tr></table><!-- 右侧end--></td></tr></table></td></tr><!--产品分类区start--><tr><td><table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#dddddd"><tr><td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0"><tr><td><img src="data:images/index/pro1.jpg" width="65" height="65"></td><td class="font14">热门品类<br/>护肤彩妆启示</td></tr><tr><td colspan="2">洗护套装 面部精华 香水</td></tr><tr><td colspan="2">粉底液 面霜 洁面</td></tr><tr><td colspan="2">美容工具 复方精油 洗发水 </td></tr></table></td><td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0"><tr><td><img src="data:images/index/pro2.jpg" width="65" height="65"></td><td class="font14">强效保养<br/>逆转皮肤问题</td></tr><tr><td colspan="2">隔离 保湿 补水 清洁</td></tr><tr><td colspan="2">清爽 排毒 去角质</td></tr><tr><td colspan="2">美白 袪痘 收缩毛孔 紧质</td></tr></table></td><td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0"><tr><td><img src="data:images/index/pro3.jpg" width="65" height="65"></td><td class="font14"> 人气品牌<br/>最IN大牌</td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2">薇姿 欧莱雅 美宝莲 </td></tr><tr><td colspan="2">SK-II 百雀羚 雅顿 </td></tr><tr><td colspan="2">美即 谜尚 妮维雅 </td></tr></table></td><td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0"><tr><td><img src="data:images/index/pro4.jpg" width="65" height="65"></td><td class="font14">潮流单品<br/>当季最红</td></tr><tr><td colspan="2">奶浴奶膏 补水凝胶 </td></tr><tr><td colspan="2">防装生发液 假发片 香水</td></tr><tr><td colspan="2">艾米尔彩妆 丰胸美乳霜</td></tr></table></td><td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0"><tr><td><img src="data:images/index/pro5.jpg" width="65" height="65"></td><td class="font14">美装精选<br/>超赞专题</td></tr><tr><td colspan="2">孕妇护肤 护季保养</td></tr><tr><td colspan="2">护肤嫩白集锦 快速约会妆</td></tr><tr><td colspan="2">美容时钟模式 5步护肤术</td></tr></table></td></tr></table></td></tr><!-- 产品分类区end--></table></td></tr>
</table>
<!--中间部分 end-->
<!--底部 start--><Br/>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" height="35" class="foot_bg"><tr><td class="padding-top"><table width="1200" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="20%" align="center"><img src="data:images/gray1.jpg" ></td><td width="20%" align="center"><img src="data:images/gray2.jpg" ></td><td width="20%" align="center"><img src="data:images/gray3.jpg" ></td><td width="20%" align="center"><img src="data:images/gray4.jpg" ></td><td width="20%" align="center"><img src="data:images/gray5.jpg" ></td></tr></table></td></tr><tr><td bgcolor="#efefef" class="foot_line padding-top"><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="top"><img src="data:images/red1.jpg"><br><img src="data:images/line1.jpg"/></td><td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td class="font16 padding-bottom">新手指导</td></tr><tr><td>用户注册</td></tr><tr><td>电话下单</td></tr><tr><td>购物流程</td></tr><tr><td>购物保障</td></tr><tr><td>服务协议</td></tr></table></td><td align="center" valign="top"><img src="data:images/red2.jpg"><br><img src="data:images/line1.jpg"/></td><td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td class="font16 padding-bottom">支付方式</td></tr><tr><td>货到付款</td></tr><tr><td>商城卡支付</td></tr><tr><td>支付宝、网银支付</td></tr><tr><td>优惠券抵用</td></tr></table><td align="center" valign="top"><img src="data:images/red3.jpg"><br><img src="data:images/line1.jpg"/></td><td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td class="font16 padding-bottom">配送方式</td></tr><tr><td>闪电发货</td></tr><tr><td>满百包邮</td></tr><tr><td>配送范围及时间</td></tr><tr><td>商品验收及签收</td></tr><tr><td>服务协议</td></tr></table></td><td align="center" valign="top"><img src="data:images/red4.jpg"><br><img src="data:images/line1.jpg"/></td><td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td class="font16 padding-bottom">售后服务</td></tr><tr><td>退换货协议</td></tr><tr><td>关于发票</td></tr><tr><td>退换货流程</td></tr><tr><td>退换货运费</td></tr></table></td><td align="center" valign="top"><img src="data:images/red5.jpg"><br><img src="data:images/line1.jpg"/></td><td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td class="font16 padding-bottom">关于帐号</td></tr><tr><td>修改个人信息</td></tr><tr><td>修改密码</td></tr><tr><td>找回密码</td></tr></table></td><td align="center" valign="top"><img src="data:images/red6.jpg"><br><img src="data:images/line1.jpg"/></td><td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td class="font16 padding-bottom">优惠活动</td></tr><tr><td>竞拍须知</td></tr><tr><td>抢购须知</td></tr></table></td></tr></table></td></tr><tr><td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br/>中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022<br/><img src="data:images/foot_pic.jpg"></td></tr>
</table>
<!--底部 end-->
</body>
</html>
后记：
这次犯了一个大错，没有认真看要求，导致记录的顺序出现错误，这样看着很难受。不想拥有太多情绪。
Web前端学习记录(十五)相关推荐
- Web前端学习记录(十)
写在前面 因为最近在学web前端,一般习惯用Google浏览器,所以找时间给她换了一个主题,十分的惬意,对着广阔无垠的浩瀚星海,对着满天的银光,就这样静静地坐着,心里就有了一片完整的星空. 使用Jav ...
- java学习记录十五：集合二Collections、Set、Map
java学习记录十五:集合二 一.Collections工具类 一.解释 二.常用方法 1.打乱集合顺序 2.按照默认规则排序 3.按指定规则排序 4.批量添加元素 二.可变参数 一.解释 二.写法 ...
- 前端学习笔记(十五)
第十五章 HTML5新增标签 一.HTML5概述 1.简介 HTML5万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言的第五次大修改.HTML5将成为 HTML.XHTML ...
- web前端学习第十四~十八天
这五天学习了如何布置一个电商的平台,花了一些时间,前面在磋磨的怎么布局,后面顺手就快了点,但还是花了很多时间. 项目的注意事项: 项目准备好目录文件,样式与结构相分离. 产品的图片,项目的固定的图片, ...
- Dubbo学习记录(十五) - 服务调用【一】-之 服务端Netty的hander包装过程与 服务端线程模型
Dubbo服务调用 之前写十几篇文章, 自己对Dubbo的运行有了一定的了解.而Dubbo服务调用则是重中之重, 目测将这个过程写出来起码需要5-6篇文章: 服务端Netty的hander包装 服务导 ...
- Web前端学习笔记（五）--- 手风琴菜单
效果图 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- web前端学习（十八）——CSS3表格属性（table）的相关设置
1.CSS表格 使用 CSS 可以使 HTML 表格更美观.指定CSS表格边框,使用border属性. 缩写边框属性设置在一个声明中所有的边框属性. 可以设置的属性分别(按顺序):border-wid ...
- Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性 描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...
- 【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
最新文章
- MVVM开发模式MVVM Light Toolkit中使用事件和参数传递
- 拜托别在问我 MySQL 性能优化了！
- EL表达式的作用与限制条件
- Lucene-3.0.0配置
- oracle 10 数据库覆盖
- idea debug异常关闭 Error running 'Tomcat8': Unable to open debugger port (127.0.0.1:50168): java.net.Soc
- Linux中的权限管理命令-chmod
- java异常_深入理解java异常处理机制
- ERROR 1201 (HY000) Could not initialize master info structure
- 【解决windows】Windows Linux双系统安装历程，超详细
- 解决在宝塔面板IIS服务器上部署svg/woff/woff2字体的问题
- 字典写入excel_实例9：用Python自动生成Excel档每日出货清单
- 【进大厂必学】面完 10 多家大厂后，总结了这些太容易被考的算法
- PHP_微信小程序（2）
- php 上传apk包到cdn_零基础搭建自己的博客网站和配置CDN设置wordpress篇
- 步进电机算法s曲线的原理与实现
- android日历提醒小程序源码,微信小程序倒班日历简洁实用demo完整源码
- 第七十四课 图的遍历（BFS）
- pythonif多个条件同时满足_Python if有多个条件怎么办
- 【Ybt OJ】[数学基础 第3章] 同余问题
热门文章
- Fremi problem费米问题如何解决
- 微信公众号服务器配置 | Token失败问题 | 获取access_token
- 游戏中常用的伪随机算法之PRD暴击算法
- 输变电工程三维模型GIM文件如何打开？内含什么信息？在设计软件中是如何交互的？
- 第六章 电磁新理论
- JavaCV音视频开发宝典：无需流媒体服务也无需转码，使用JavaCV和springBoot实现http-flv转封装直播服务，浏览器网页flv.js直接播放rtp、rtsp、rtmp实时视频
- 微信公众平台api下载php,微信公众平台消息接口PHP版
- 移动Windows Kits目录
- 【局部图像描述子】Harris角点检测器
- 第10课：测试人员在微服务时代的角色演变