PC--CSS维护
一、在样式表开头添加一个注释块,用以描述这个样式表的创建日期、创建者、标记等备注信息。
/*
*Site: www.daqianduan.com
*Author: 浩子
*Updated: 2010.5.7
*Updated by: raceman
*/
二、包括公用颜色标记
/*
COLORS
Body background: #def455
Container background: #fff
Main Text: #333
Links: #00600f
Visited links: #098761
Hover links: #aaf433
H1, H2, H3: #960
H4, H5, H6: #000
*/
三、给ID和Class进行有意义的命名
不推荐的命名方式:
.green-box { … }
#big-text { … }
推 荐使用的命名方式:
.pullquote {… }
#introduction {… }
四、将关联的样式规则进行整合
#header { … }
#header h1 { … }
#header h1 img { … }
#header form { … }
#header a#skip { … }#navigation { … }
#navigation ul { … }
#navigation ul li { … }
#navigation ul li a { … }
#navigation ul li a:hover { … }
#content { … }
#content h2 { … }
#content p { … }
#content ul { … }
#content ul li { … }[/css]
/*
navigation styles
*/
#navigation { … }
五、给样式添加清晰的注释
/*
header styles
*/
#header { … }
#header h1 { … }
#header h1 img { … }
#header form { … }
在大前端后面的文章中,我们将讨论如何管理你整站的CSS文件呢。请大家关注。
PC--CSS维护的更多相关文章
- 代码:PC CSS(工作中用)
常规内容区域的:标题和文字 2016-5-23 .p16{font-size:16px;color:#333;}/* 16号#333的标题 */ .p12-gray{font-size:16px;co ...
- 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...
- 前端分辨pc和移动端导入不同css
通过navigator获取浏览器,根据浏览器的不同判断出pc和移动端然后设置不同的css 分辨不同屏幕导入不同的css文件: function loadCSS() { if((navigator.us ...
- XHTML 基础(含部分css)
基于http://www.ycku.com/xhtml/ 的视频教程的一些笔记 关于xhtml的解释 引用百度百科 可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过 ...
- 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
- CSS架构的优选和解决方案
背景 上周我厂前端小伙伴们开了一个技术交流会,关于如何优选CSS架构.解决掉平时写CSS时频繁出现的各种问题,这是前端人员老生常谈的问题,但却很少搬上台面,铺开正式地开交流会.这次会议,便是围绕CSS ...
- JS判断PC还是移动端打开网页
最近在做移动端网站,也需兼容PC端.还没找到更好的方法,只能用javascr判断用户是在PC端打开还是移动端打开. JS判断 var isPC = function (){ var userAg ...
- js手机端和pc端加载不同的样式
function loadCSS() { if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| ...
- js css等静态文件版本控制,一处配置多处更新.net版【原创】
日常web开发中,我们修改了js.css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了 怎么办呢? 1.小白:让客户清除缓存?,No , 不靠谱 2.初级 ...
- 【CSS】378- [译]44个 CSS 精选知识点
写在前面 一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,然后又花了将近1个小时从头到尾 ...
随机推荐
- Eclipse+Java+OpenCV246环境搭建和代码测试
1.首先下载OpenCV2.4.6,下载的时候,选择windows版的.然后安装 2.其实安装的过程就是解压的过程,并没有什么安装向导之类的,安装完成后,我们最关心的是这个目录:opencv\buil ...
- 设计模式之Application Programs and Toolkits
Application Programs 应用程序 If you're building an application programsuch as a document editor or spre ...
- andorid 开发笔记 -- 问题与解决
1. SQLiteDataBase 中 TimeStamp 转化为 Date 的问题:java.text.ParseException: Unparseable date: "Sun Jan ...
- Hacker(19)----检测Windows系统漏洞
想完全掌握Windows中存在的漏洞需要使用专业的漏洞扫描软件.目前常用的有MBSA(MircosoftBaselineSecurityAnalyzer).360安全卫士等. 一.使用MBSA检测系统 ...
- iptables 实现centos内网机器访问外网
环境:一台带外网和内网的机器,另一台只有内网,默认不能上网.两台机器都是centos系统带外网机器的外网ip为 123.221.20.11, 内网ip为 192.168.15.100内网机器的内网ip ...
- Redis的快照功能
引言: Redis是基于内存的数据库,同时也提供了若干持久化的方案,允许用户把内存中的数据,写入本地文件系统,以备下次重启或者当机之后继续使用.本文将描述如何基于Redis来设置这些功能. 快照的设 ...
- js获取浏览器滚动条距离顶端的距离
最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存: 一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示 ...
- html5响应式布局
1.media控制布局 <link type="text/css" rel="stylesheet" href="css04.css" ...
- 基于nginx的rtmp的服务器(nginx-rtmp-module)
一,首先下载安装nginx需要依赖的库文件: 1.1,选定源码目录 选定目录 /usr/local/RTMP cd /usr/local/RTMP 1.2,安装PCRE库 cd /usr/local/ ...
- c#串口编程和单片机通信重大发现
1.遇到问题时看看这里 //每次响应中断结束后清空缓存,防止在显示关闭时,打开后又一次性出现 serialPort1.DiscardInBuffer();