下面是一个特产网站自适应CSS,这个特产自适应CSS通过屏幕宽度大小来进行适应的,而不是根据UA来判断,就加快了判断的速度,所以速度很快

中国特产站排名还是很好的,特别是手机端

li {
list-style-type: none;
}
.header, .excerpt .cat, .now-page, .pagination span:hover, .pagination ul>li>a:focus {
background-color: #C00;
}
.excerpt:hover {
border-color: #C00;
}
.excerpt h2 a:hover {
color: #C00;
}
#comments h4, #comments2 h4 {
border-left-color: #C00;
}
#frmSumbit input[type="submit"] {
background-color: #C00;
}
.excerpt-see-index h2 span {
color: #C00;
}
.logo-m {
background: #C00;
}
.excerpt {
padding: 20px 20px 20px 255px;
}
@media (max-width: 640px) {
.excerpt {
padding: 10px 10px 10px 180px;
}
}
@media (max-width: 480px) {
.excerpt {
padding: 10px 10px 0px 120px;
}
}
@media (max-width: 800px) {
.header {
background-color: transparent;
padding: 0;
}
}

特产网站自适应CSS的更多相关文章

  1. 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

    转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...

  2. CSS框架分析与网站的CSS架构

    框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题,是一种可复用的构架. 我们对CSS框架这个词比较陌生,但对于JavaScript框架就比较熟悉了,比如jQuery 但为 ...

  3. 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  4. 压缩网站的css和js,合并多个文件到一个文件

    压缩网站的css和js,合并多个文件到一个文件uglifyjs index.js html5shiv.min.js -o all.min.jsuglifycss index.min.css web.c ...

  5. 【项目总结】扯一扯电商网站前端css的整体架构设计(1)

    最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧, ...

  6. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  7. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  8. 网站注册(css)

    <! DOCTYPE HTML><html><head><meta charset="utf-8"><title>作业2 ...

  9. 通过改变viewport 实现网站自适应

    var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var userAgent = nav ...

随机推荐

  1. selenium_java

    等待 页面全加载 ChromeOptions options=new ChromeOptions(); /** *(1) NONE: 当html下载完成之后,不等待解析完成,selenium会直接返回 ...

  2. vue画图运用echarts

    <template> <div class="tubiao"> <div id="main" style="width: ...

  3. JS方法调用jQuery内部方法

    转载于:https://blog.csdn.net/tsoTeo/article/details/77848932 已经测试过,可以正常调用!!以下为原文: JS方法能不能调用JQuery里面的方法  ...

  4. 八十三:redis之redis的字符串、过期时间、列表操作

    字符串操作 设置值 set key value 设置有空格的值,加引号 set username 'hello world' 获取值 get key 删除值:del key 清除所有内容:flusha ...

  5. centos7安装VuePress

    VuePress可以帮你快速建站,使用MarkDown语法生成静态html yum install -y gcc-c++ make curl -sL https://rpm.nodesource.co ...

  6. Kibana 创建索引 POST 403 (forbidden) on create index

    一.问题描述: Kibana创建索引:kibana > management > index patterns > create index pattern 索引名称: mercha ...

  7. java:redis(redis安装配置,redis的伪集群配置)

    1.redis安装配置: .安装gcc : yum install gcc-c++ .使用FTP工具FileZilla上传redis安装包到linux根目录下(当前步骤可以替换为:在root目录下执行 ...

  8. 01vscode配置git

    一.准备工作 必须保证已安装git,相关安装git的教程很多,这里就不进行描述. 通过命令:git --version 查看git版本. 二.git config 配置 通过git config 配置 ...

  9. OpenCV-Python画直方图和累积直方图

    代码如下: import cv2 import numpy as np import matplotlib.pyplot as plt img = cv2.imread('C:\\Users\\adm ...

  10. 【Linux开发】linux设备驱动归纳总结(二):模块的相关基础概念

    linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10.04 开发平台:S3C2440开发板 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...