首页 > 代码库 > 手机端样式

手机端样式

2024-09-09 09:17:47   221人阅读

<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>

手机端样式


联系
我们