智能手机网页开发笔记

原创 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;

相关文章推荐

CSS3立体智能手机开关,网页开关超酷效果

CSS3代码,测试请使用ie9,或火狐及Chrome等浏览器,立体开关效果是很多人喜欢的网页特效,现在好多的智能手机上见到比较多的效果,用CSs3来实现,代码要精简不少,用传统CSS也是可以实现的,只...

《Photoshop智能手机APP界面设计》学习笔记

第一章 APP用户界面基础 1.1 手机UI设计相关基本概念 1.1.1 什么是UI设计 UI(User's Interface)即用户界面, 它不仅仅是美化界面,还需要研究用户,让界...

手机端网页开发集锦

Top10响应式手机网页开发软件

现在人们对手机的要求越来越高,恨不得把整个世界都一手掌控。各大门户网站如今都编制了wap网页,但这也是项耗时费力的复杂工程。如果你想简单点,省掉自己编程的麻烦,可以求助于下面的这些网站开发软件。  ...
  • S1012W2
  • S1012W2
  • 2014年09月29日 20:56
  • 822

手机端网页开发问题汇总

经历过电脑端网页开发的朋友,在第一进行手机端开发时候,总感觉一头雾水,我也一样,将自己近期来在手机端开发中的问题与解决方法分享,如有不对或更好的方法,请指正。1.如何让网页在手机端正常显示?而是pc端...
  • xi_2130
  • xi_2130
  • 2015年10月07日 16:36
  • 425

智能手机之硬件开发知识篇一

硬件开发知识: 手机软件层次:         手机软件技术也可按技术含量高低分为三层:技术含量低的是人机界面软件,稍高一些的是接口软件和模块软件,最高的是基础通信软件。         第一次层...

智能手机Smartphone开发从零起步

  • 2007年09月25日 13:57
  • 709KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:智能手机网页开发笔记
举报原因:
原因补充:

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