假设,背景图片的高度为50px;宽度为100px,名称为xx.gif,上半部分为默认图像,下半部分为鼠标经过图像;超链接a标签定义为块状显示,宽为100px,高度为25px,那么我们的样式就这样写:
a{display:blockbackground:url(xx.gif) no-repeat left topheight:25pxwidth:100px}
a:hover{background:url(xx.gif) no-repeat left -25px}
这里主要是使用了a标签的hover属性,如果有兴趣可以去看看伪类属性。
为什么用一张图片,而不是两张图片:
我们在查看页面的时候,页面为了显示信息,本地浏览器会向服务器发送请求信息,每个链接都会发送一次请求,如果是两张图片的话,就会有两个请求信息,如果是一张的话,只发送一次请求,这样会减轻服务器压力,同时也加快页面加载速度。(这点内容,我不是很精通,大致就这么个意思)
visualstudiocode怎么写css在Visual Studio Code中编写CSS的步骤如下:
创建一个HTML文件,然后在文件中添加<style>标签,以开始编写CSS代码。
在<style>标签中,使用CSS语法编写CSS代码。
使用快捷键Ctrl+S保存文件,以便在浏览器中查看效果。
使用快捷键Ctrl+Shift+V在浏览器中预览结果。
sw里有没有钢笔工具
没有。Adobe Photoshop中有钢笔工具,但是Adobe Illustrator中没有。
2小时视频总比特率多少正常
2小时视频总比特率大约为24Mbps(比特每秒)。
aimouse没有找到数据设备是需要联网吗
不需要。在安装完成后,如果您的Airmouse没有找到数据设备,您可以在设备管理器中查看Airmouse是否正确安装,如果正确安装,则无需连接互联网即可使用Airmouse。
qq音乐怎么把微信账号穿到另一个微信
微信音乐不能将微信账号穿到另一个微信账号,但是可以将歌曲分享到另一个微信账号上。只需在微信音乐中找到你想要分享的歌曲,点击右上角的“分享”按钮,然后选择“微信好友”或“朋友圈”,并选择你想要分享的微信账号,即可完成歌曲的分享。
steam更新账单地址怎么填
在Steam客户端中,点击“帐户”,然后点击“管理帐户”,在“基本信息”标签中,您将看到“更新账单地址”字段,您可以在此处输入您的新账单地址。
推特搜索主题标签出现的用户是指
使用特定主题标签在推特上发表推文的用户。
vs2019硬编码的大小常导致不一致
可能是由于编译器版本不同,导致硬编码的大小不一致。你可以尝试使用同一版本的编译器,或者使用编译器参数来指定硬编码大小。
appmarket.exe损坏的影像
如果你的电脑上的appmarket.exe文件损坏,可以尝试以下几种方法来修复它:
从备份中恢复appmarket.exe文件。如果你有定期备份电脑上的文件,可以尝试从备份中恢复appmarket.exe文件。
从可靠的来源重新下载appmarket.exe文件。你可以从可靠的来源(如应用商店或官方网站)重新下载appmarket.exe文件,然后替换损坏的文件。
使用系统文件检查器修复损坏的文件。Windows系统自带的文
以下是财新数据可视化实验室前端工程师卢达分享的开发总结,希望能帮忙解答问题:)财新数据可视化实验室前端工程师卢达分享,可视化项目 平安银行2014年度“体检报告” 的开发经验。他为大家介绍必备工具,一步一步剖析开发过程,更偷偷传授秘笈。文字信息密度极高,助你快速理解开发思路。
作者:财新数据可视化实验室 前端工程师 卢达
项目概述
项目名称:平安银行2014年度“体检报告”
项目目标:在移动端,以纵向翻页的形式,展示平安银行2014年度主要数据和业务介绍。
必备工具和使用的技术
开发语言:HTML5、CSS3、JavaScript
使用类库:jQuery.js、Swiper.js、jWeixin.js
开发工具:SublimeText2、Chrome、PhotoShop
开发过程
一、准备工作:
1. 与设计师确定总体的展现形式和需求,确定开发量、可行性以及所使用的工具。
2. 确定动画部分完全使用CSS3。翻页使用Swiper.js类库实现方案。
引入相关类库
jQuery.js主要用于快捷的编写相关基础程序。
Swiper.js实现翻页的主程序。
jWeixin.js实现自定义微信分享信息的功能。(此功能需要后台人员配置服务器)
3. 拿到设计草图,整理页面的展示思路。
4. 编写基础代码,测试基本功能。
二、深入开发:
1. 将设计图按需求,分别制作成相应的文件。
按动画需求将设计图中的图层,分别存为相应的图片文件。
合并背景图,以减少请求数和图片的加载时间。
2. 分析代码和样式可以共用部分,编写相关代码(如每页的标题和结论)。
3. 每页单独编写代码和测试。
编写封面动画代码。
编写第一版前两页“头脑敏捷,频出创新风暴”和“四大动力源造就一颗大心脏”代码:
这两页的内容都分为多个页面,所以采取了自动+手动横向滑动切换的效果。(后因需求改为多页直接纵向滑动翻页)
编写其他页面代码:
动画使用CSS3来实现。
图表(如柱状图等)使用CSS,按照数据的相对数值来控制样式。
4. 合并单页代码,生成主页面并调试。
翻到当前页时,动画才开始播放。这里利用CSS后代选择器的特性。判断动画是否播放。
将程序传到测试服务器上,使用相应手机对页面进行测试,主要测试样式是否正确、运行是否流畅。(测试机主要有:iPhone4S、5S、6、6plus,三星S3、Note2等)。
修改已发现的BUG。
三、收尾工作:
1. 增加页面的相关提示信息(如翻页提示等)。
2. 增加Loading页面,增加有好度(Loading页面主要用于,首页包括主程序、首页图片等加载完成后,再显示首页,避免用户看到不完整的页面)。
3. 添加分享信息,测试相关功能。
4. 完成后提交到测试服务器,给设计人员和客户测试。
5. 根据修改意见调整代码。
:)项目上线!
经验总结
使用CSS来实现动画,减少JS的操作,可以提高代码的执行效率。
图片使用背景图合并的方法,可以减少页面加载时间。
Loading页面的加入,可以避免用户看到不完整的页面,提高用户体验。
熟练使用好类库可以减少开发时间。
开始开发之前确定好总体需求,分析页面的通用部分,可以事半功倍。