手机页面
来源:互联网 发布:经营之道软件攻略 编辑:程序博客网 时间:2024/04/29 05:59
@charset "utf-8";/* CSS Document */body{ margin:0; padding:0; font-family:"微软雅黑", Arial; color:#333; background-color:#fff; font-size:16px;}input,select{ margin:0; padding:0; font-family:"微软雅黑", Arial;}ul,li,p,h1,h2,h3,dt,dl,dd,ol{ margin:0; padding:0; list-style-type:none;}.fl{ float:left;}.fr{ float:right;}img{ border:0;}input[type="text"],input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}header{ width:100%; height:50px;}.home-top{ width:100%; height:50px; line-height:50px; text-align:center; font-size:1.2em; color:#fff; background:#009400; position:relative; z-index:2; position:relative;}.top{ width:100%; height:50px; line-height:50px; text-align:center; font-size:1.2em; color:#fff; background:#4d7eda; position:relative; z-index:2; position:relative;}.search{ background-image:url(./images/bg.jpg); background-size:100% 100%; background-repeat:no-repeat; background-position:top center; width:80%; height:100%; position:absolute; top:0; z-index:1; padding:0 10%;}.search-box{ margin:55% 0 0 0; width:100%;}.search-code{ width:100%; height:40px; background-color:#009400; border-radius:40px; position:relative; z-index:1000;}.search-box h1{ text-align:center;font-size:1.2em; font-weight:normal; color:#009400; padding-bottom:10px;}.text01{ width:74%; height:40px; border:none; outline:none; background:none; float:left; padding-left:5%; font-size:1.2em; font-weight:bold; color:#fff;}.button01{ width:20%; height:40px; border:0; border-radius:0; background:none;display:block; float:right; background-image:url(./images/icon01.svg); background-size:30px 30px; background-repeat:no-repeat; background-position:center center; border-left:1px #fff solid; cursor:pointer;}.search-button{ width:100%; text-align:center; padding-top:10px;}.search-button input{ width:30%; height:30px; border-radius:5px; font-size:1em; color:#fff; border:0; display:inline-block; margin:0 5px; cursor:pointer;}.button02{ background-color:#88bc30;}.button03{ background-color:#f6c514;}.list-top{ width:100%; height:50px; line-height:50px; background-color:#12b112;}.icon{ width:10%;}.icon a{ width:100%; height:50px; display:block;}.icon01{ background-image:url(./images/icon04.svg); background-repeat:no-repeat; background-position:center center; background-size:25px 25px;}.icon02{ background-image:url(./images/icon02.svg); background-repeat:no-repeat; background-position:center center; background-size:32px 32px;}.icon06{ background-image:url(./images/icon06.svg); background-repeat:no-repeat; background-position:center center; background-size:23px 23px;}.icon07{ background-image:url(./images/icon07.svg); background-repeat:no-repeat; background-position:center center; background-size:23px 23px;}.icon03{ background-image:url(./images/icon03.svg); background-repeat:no-repeat; background-position:center center; background-size:25px 25px;}.list-title{ width:60%; line-height:50px;text-align:center; position:absolute; padding:0 20%; z-index:-1;}.list-title a{ width:40%; height:50px; display:inline-block; color:#ff0; text-decoration:none;}.list-title a:hover{ color:#fff; }.list-current{ width:40%; height:50px; display:inline-block; text-decoration:none;color:#fff;}.product-title{ width:60%; line-height:50px;text-align:center; position:absolute; padding:0 20%; z-index:-1;}.product-title a{ font-size:1.2em; color:#fff; text-decoration:none; }.icon05{ width:20px; height:20px; background-image:url(./images/icon05.svg); background-repeat:no-repeat; background-position: center center; background-size:20px 20px; margin-right:5px; display:block; float:left; margin-top:-1px;}.list{ width:100%;}@media screen and (max-device-width: 1024px) {.list ul{ padding:5px 1%;}.list li{text-align:center; margin-bottom:10px;width:50%}.list li img{ width:96%; height:500px;}}@media screen and (max-device-width: 736px) {.list ul{ padding:5px 1%;}.list li{text-align:center; margin-bottom:10px;width:50%}.list li img{ width:96%; height:195px;}}@media screen and (max-device-width: 400px) {.list ul{ padding:5px 1%;}.list li{text-align:center; margin-bottom:10px;width:50%}.list li img{ width:96%; height:188px;}}@media screen and (max-device-width: 375px) {.list ul{ padding:5px 1%;}.list li{text-align:center; margin-bottom:10px;width:50%}.list li img{ width:96%; height:176px;}}@media screen and (max-device-width: 360px) {.list ul{ padding:5px 1%;}.list li{text-align:center; margin-bottom:10px;width:50%}.list li img{ width:96%; height:169px;}}@media screen and (max-device-width: 359px) {.list ul{ padding:5px 1%;}.list li{text-align:center; margin-bottom:5px; width:50%}.list li img{ width:96%; height:151px;}}.product{ padding:0 3%; margin-bottom:90px; float:left; width:94%;}.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }.rslides li:first-child { position: relative; display: block; float: left; }.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }.slide_container { position: relative; float: left; width: 100%; }.slide { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }.slide li { position: absolute; width: 100%; left: 0; top: 0; } .slide img { display: block; position: relative; z-index: 1; height: auto; width: 100%; border: 0; }.slide .caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; background: #000; background: rgba(0,0,0, .8); left: 0; right: 0; bottom: 0; padding: 10px 20px; margin: 0; max-width: none; } .slide_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 65%; left: -10px; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 21px; width: 21px; background:url(./images/arrow-left.png); margin-top: -45px; }.slide_nav:active { opacity: 1.0; }.slide_nav.next { left: auto; background:url(./images/arrow-right.png); right: -10px; }.product-banner{ width:100%; float:left; margin:10px 0 0px 0px;}.product-infor{ width:100%; float:left;}.product-infor dt h1{ font-size:1em; color:#4d7eda; border-bottom:#bbb 1px dashed; font-weight:normal; padding:10px 0;}.product-infor dt p,.product-infor dd p{ font-size:0.8em; color:#333; line-height:20px;border-bottom:#bbb 1px dashed; padding:10px 0;}.product-infor dd h1{ font-size:1em; color:#4d7eda; font-weight:normal; padding-top:10px;}.product-lc{ text-align:center; width:100%; float:left; padding-top:10px;}.product-lc dd,.product-lc dt{ display:inline-block; font-size:0.7em;}.prodcut-lc dd{ width:30px; height:30px; background-color:#F00;}.footer-nav{ width:96%; float:left; text-align:center; position:fixed; bottom:0px; background-color:#fff; z-index:100; padding:5px 2% 0 2%;}.footer-nav li{ width:24%; height:30px; float:left; line-height:30px; margin:0 1px 5px 2px;}.footer-nav li a{ width:100%; height:30px; display:block; background-color:#4d7eda; color:#fff; text-decoration:none; font-size:0.8em; }.footer-nav li a:hover{ background-color:#f5a125;}.footer-nav li a.footer-current { background-color:#d48510;}.map{ width:100%; float:left; margin-top:10px;}.icon08{ background-image:url(./images/icon08.svg); background-repeat:no-repeat; background-position:center center; background-size:25px 25px;}.help{ padding:0 3%; margin-bottom:90px; float:left; width:94%;}.help h1{ font-weight:normal; font-size:1.2em; line-height:50px; color:#4d7eda;}.step{ width:18px; height:18px; border-radius:20px; font-size:1em; color:#fff; text-align:center; line-height:18px; display:block; float:left; background-color:#4d7eda; margin-right:10px; margin-top:2px;}.help-style01{ width:100%; float:left; margin-bottom:30px;}.help-style01 dd{ float:left; width:100%;}.help-style01 dd{ width:46%; float:left; padding:2%;}.help-style01 dd img{ width:100%; height:150px;}.help-style01 dd p{ font-size:0.5em; height:20px; padding-top:10px;}.error{ text-align:center; position:absolute; top:50%; margin-top:-50px; width:80%; font-size:1em; background-color:rgba(255,255,255,0.7); border-radius:5px; padding:20px 0;}.error p{ padding-bottom:10px;}<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%String path = request.getContextPath(); String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="viewport" content="width=device-width"><meta name="apple-mobile-web-app-capable" content="yes"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><title>商品信息</title><link href="<%=path%>/static/css/weixinstyle.css" rel="stylesheet"><script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script><style type="text/css">div .test { text-align:center;}img { width:100%;}</style></head><body> <div data-role="content"> <div class="test"> <p>产品图片</p> <p>--------------------</p> <img src="<%=path%>/static/login/images/banner_slide_03.jpg" /> <p>图片二</p> <p>图片三</p> <p></p> <p>产品属性列表</p> <p>--------------------</p> <p>列表一</p> <p></p> <p>资质图片</p> <p>--------------------</p> <p>图片一</p> <p>图片二</p> <p>图片三</p> </div> </div><div class="footer-nav" style=""> <ul> <li><a href="main" class="footer-current">商品信息</a></li> <li><a href="company">平台官网</a></li> <li><a href="online">在线下单</a></li> <li><a href="connection">联系我们</a></li> <li><a href="">备用1</a></li> <li><a href="">备用2</a></li> <li><a href="">备用3</a></li> <li><a href="">备用4</a></li> </ul> </div></body></html>
阅读全文
0 0
- 手机页面
- 手机页面
- 手机手机信息页面实现
- jsp页面适应手机页面
- 手机页面禁止页面拖动
- jsp页面适应手机页面
- 手机页面编写笔记
- 禁止手机页面缩放
- 手机页面html100%宽度
- 手机页面布局头部
- 让手机适应页面
- 页面自适应手机显示
- 手机端页面收获
- 电管家手机页面
- 手机键盘压扁页面
- 手机端调试页面
- 手机安全卫士------Splash页面
- 手机页面开发工具
- 纪念一下访问量到10000次
- 728. Self Dividing Numbers
- namenode安全模式产生原因及作用
- java构造器
- 自定义排序
- 手机页面
- java注意事项
- POJ 3461 Oulipo(KMP 一个串在另一个串出现的次数(可重叠|不可))
- 除留余数法实现哈希表,开vector法解决冲突
- Mysql报错:You must reset your password using ALTER USER statement before executing this statement.
- 南阳oj The Triangle
- 锁
- [Linux] 生成随机密码
- 递归专练C 经典汉诺塔问题