智能手机网页开发笔记

原创 2013年12月03日 17:06:46

画面上有一个温度按钮,点击按钮时弹出温度选择的下拉框。

要求弹出的下拉框与select控件的下拉框一样。

实现方案:

在温度按钮上覆盖一个与温度按钮同样大小透明的select控件。

点击温度按钮时,实际上点击的是select控件。

代码如下:

<div style="width:220px;height:220px;background-image:url(button.jpg);overflow:hidden;">
<select style="width:240px;height:222px;border:none;margin-left:-1px;margin-top:-1px;color:transparent;background-color:transparent;-webkit-appearance: none;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>

关键点:

1、div的overflow要设为hidden。

2、select控件的宽度要大于div的宽度加上select控件的下拉箭头的宽度,这样才能隐藏select控件的下拉箭头。

3、select控件的高度为div控件的高度+2,marging-left,marging-top为-1px,保证select控件获得焦点时不会露馅。

4、select控件的前景色和背景色都要设为透明。

5、为了兼容浏览器,加上-webkit-appearance: none;

智能手机的硬件体系结构

随着通信产业的不断发展,移动终端已经由原来单一的通话功能向话音、数据、图像、音乐和多媒体方向综合演变        而对于移动终端,基本上可以分成两种:一种是传统手机(feature phone);另...
  • dadalan
  • dadalan
  • 2009年07月31日 15:00
  • 5174

jsp网页开发笔记

jsp网页开发笔记和小技巧
  • RoyeaiqXiaoXin
  • RoyeaiqXiaoXin
  • 2015年03月08日 19:54
  • 302

web前端网页开发笔记

因为平时上机的时候深感程序敲的太水,所以今天下午在实验室把jsp想要重新敲一敲,环境Apache,tomcat也是自己重新配置的。 首先需要提醒的是,若想点击绿色的按钮就直接显示出来网页的结果,而不...
  • Scarlett_geng
  • Scarlett_geng
  • 2015年10月11日 16:36
  • 342

移动平台网页开发笔记

1、限制网页最小宽度,使用缩放手势不能再把界面缩小。 如果要完全禁止页面的缩放 2、根据不同宽度调用不同的CSS。  第一段表示为宽度 第二段表示为宽度>=481时,调用的CS...
  • guoerwei
  • guoerwei
  • 2011年09月26日 15:23
  • 507

旧智能手机各种妙用

旧智能手机各种妙用 作者:minigps     现在手机更新换代的速度太快了,最新数据显示,中国每年淘汰近4亿部手机,但由于回收价格太低,价格从几十元到几百元不等,仅1%的旧手机被回收。...
  • echo3
  • echo3
  • 2015年11月26日 15:41
  • 649

中国智能手机保有量已超9亿

截止2015年Q3季度,中国智能手机保有量已超9亿。伴随国内大屏智能手机普及率的不断提升,移动广告也因之受益。作为国内移动大屏广告的探索者,爱告率先提出了大屏广告的概念,并开启了移动互联网大屏广告新趋...
  • shituoyeweng133
  • shituoyeweng133
  • 2015年12月21日 15:51
  • 434

Web网页开发心得笔记

Div与span的区别 div与span都是用来定义文档中的节的 div与span主要用于应用样式表。 为块状容器,会使原有结构产生变化,元素所包含的内容都会另起一行,不会与其他元素在同一行。 ...
  • tham_
  • tham_
  • 2015年04月16日 09:24
  • 437

微信网页开发——随手笔记

一、公众号设置      1.账号详情:           公众号的头像、二维码、名称都是必须填写的,如果没有这些信息,是不能进行网页开发的。 2.功能设置       ...
  • u010375663
  • u010375663
  • 2017年08月10日 16:26
  • 244

关于触屏智能手机的操作简单说明,安致机型。

时间总是不够,因为打算忙的还不算多,真正需要做的事,一直还没开始。 传统上的机械历史,带动人类的操作能力不断向前。机械键盘手机,符合了人类的传统需求。 但是触屏机的出现,准确的说,是苹果品...
  • zhanglitao422
  • zhanglitao422
  • 2012年10月09日 23:34
  • 421

网页开发

HTML: 直接传递参数 >直接传递参数/a> jsp 参数赋值: value="" 网页执行java 示例程序 网页间传值方法: ...
  • techtitan
  • techtitan
  • 2014年09月14日 16:47
  • 410
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:智能手机网页开发笔记
举报原因:
原因补充:

(最多只允许输入30个字)