手机端样式

<style>
  body,h1,h2,h3,h4,h5,h6,textarea,select,p,ul,dl,dd,ol,pre,input,th,td{ margin:0px; padding:0px; font-family:"微软雅黑"; }
  html{ width:100%; height:100%; overflow:hidden; box-sizing:border-box;/*怪异盒模型*/
  /*html的父级是document 去掉document的滚动条*/}
   
  body{ height:100%; overflow:auto; background:#eeeeee; font:50px "微软雅黑"; color:#fff;}
   
  /* 清浮动 */
  .clear{ zoom:1;}
  .clear:after{ content:""; display:block; clear:both;}
  a{ -webkit-top-highlight-color:transparent;/*去除a标签的背景阴影*/ }
  input{ -webkit-appearance:none;/*去除input的默认样式*/ }
  /*header头部*/
  header{ width:100%; height:1.55rem; background-color:#fe5400; font-size:24px; position:fixed; top:0; left:0; padding-top:0.3rem;}
  header h2{ float:left; font-size:1rem; margin:0 0.25rem;}
  header input{ width:13.85rem; height:1.25rem; text-align:center; color:#e5beb5; background:#b52600; border:none; font-size:0.6rem; float:left;}
  /*section内容*/
  section{ margin:1.85rem 0 2.1rem 0; }
  section .banner{ width:100%; height:5rem; overflow:hidden;}
  section .banner div{ float:left; width:100%; height:5rem;}
  section .banner div img{ width:100%; height:100%; display:block;}
   
  section .nav{ padding:0 0.6rem; margin-bottom:0.4rem; background:#ffffff;}
  section .nav div{ float:left; width:1.9rem; margin:0 0.5rem; padding-top:0.4rem;}
  section .nav div img{ width:1.9rem; height:1.9rem; border-radius:50%;}
  section .nav div h4{ font-size:0.7rem; line-height:1.1rem; color:#bebebe;}
   
  section .biaoQian{ background:#fff; height:1.6rem;}
  section .biaoQian div { float:left;}
  section .biaoQian .touT{ font-size:0.7rem; color:#da1119; padding:0.3rem; border-right:1px solid #CCC; font-weight:bold; }
  section .biaoQian .zuix{ font-size:0.7rem; color:#da1119; border:1px solid #da1119; margin-left:0.4rem; margin-top:0.2rem;}
  section .biaoQian .text{ font-size:0.7rem; color:#9d9d9d; margin-left:0.4rem; margin-top:0.2rem;}
   
  .wrap{ height:8rem; width:100%; background:#fff;}
  .wrap .wrap_left{ float:left; width:6rem; padding-left:0.3rem; border-right:1px solid #666;}
  .wrap .wrap_left .taoQian{ font-size:0.8rem; color:#f25e4e; padding-top:0.4rem;}
  .wrap .wrap_left p{ font-size:0.6rem; color:#999; line-height:0.9rem;}
  .wrap .wrap_left img{ width:5.3rem; height:5.3rem;}
  .wrap_right{ float:left; padding-top:0.3rem; width:9.3rem; padding-left:0.3rem;}
  .right_top{ border-bottom:1px solid #666;}
  .top_left{ height:3.5rem; float:left;}
  .top_left .yhh{ font-size:0.8rem; color:#7dd3f6;}
  .top_left p{ font-size:0.6rem; color:#999; line-height:0.9rem;}
  .top_left a{ font-size:0.5rem;}
  .top_rig{ float:left; margin-left:1.8rem;}
  .top_rig img{ width:1.8rem; height:3.2rem;}
   
  .right_bot .bot_left,
  .right_bot .bot_right{ float:left; width:4.5rem; font-size:0.7rem; color:#00C;}
  .right_bot .bot_left{ background:#090; }
  .right_bot .bot_right{ background:#009;}
   
  /*footer底部*/
  footer{ height:2rem; width:100%; background:#FFF; position:fixed; bottom:0; left:0; padding-top:0.1rem;}
  footer .fooBottom .box{ float:left; margin:0 1rem; width:1.2rem;}
  footer .box a{ width:1.2rem; height:1rem;}
  footer .box img{ width:1.2rem; height:1rem; display:block;}
  footer .box h6{ color:#000; font-size:0.6rem;}
   
   
   
   
  </style>
时间: 2024-08-24 22:15:37

手机端样式的相关文章

修改手机端radio 样式

实现手机端radio样式修改 http://www.iconfont.cn/搜索对勾图片和圆圈图,分别命名为radio.png 和 select.png 填写自己要的颜色,点击下载png,一般人都会 <span class="address-radio checked"></span> <input type="radio" name="address" class="hide"> .add

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

手机端的viewport属性

Window.devicePixelRatioThis read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. 该值为分辨率之间的比,不是直接比较像素.分辨率是指单位英寸内像素数,类似于PPI.pc端浏览器中dpr的值都为1,所以css中1px的元素在屏幕中占据1物理像素.但在手

destoon修改手机端分页

1. global.func.php pages函数和listpages函数 函数开头增加 $DT_TOUCH,$newsamplepages变量 global $DT_URL, $DT, $L,$DT_TOUCH,$newsamplepages; 函数最后 include DT_ROOT.'/api/pages.'.((!$DT['pages_mode'] && $page < 100) ? 'default' : 'sample').'.php';改成 if($newsample

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

手机端小问题整理

1,tap后会出现一个半透明的灰色背景.起初以为是outline作怪,加上后发现没反应.最后发现是tap后的背景高亮,要重设这个表现,则须要设置-webkit-tap-highlight-color为所需色彩.直接透明吧:a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);} 2,另外,怎样去掉textarea,input的默认样式(IOS上的圆角及内阴影等,Android未測试):input,t

手机端的META你知道多少?

一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

手机端的META

一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

七牛用户如何将视频转码成普清高清来适应不同的手机端或者web端

Qiniu 七牛问题解答 非常多人会用到七牛视频转码问题,要将视频转码成适用于各种终端的视频,也有的用户对转码服务的码率,帧率,分辨率等理解不多.不知道该怎样设置这些參数.以下我给大家科普一下. 问题解决方式 1,我们在七牛后台提供了各种转码的有用參数.大家能够看下: 假设你想要查看上面图片中各种处理样式的内容能够选中后,在以下会有參数的设定字符串. 2,用户存在一个误区,就是他并不知道码率,和帧率等參数的设定,事实上你用七牛转码的时候,转成某类的视频格式,是採用默认的码率等信息的.不用特定的去