项目中必须知道的关于CSS+DIV的常识
根据模块化的思想,将目录划分为html,css,image三大部分。
css部分:(base.css、globa.css和mod文件夹)
1、base.css放置的是reset,clearfix等基础类和工具类;
2、globa.css放置的是布局样式,包括header,footer等样式;
3、mod文件夹下面放置的模块,组件的样式;
html部分:(mod文件夹和template文件夹)
1、mod文件夹下面放的是模块的代码片段集合。如果有可能尽可能粒度划分的更细,因为这些都是代码片段,希望以后有工具做到代码片段和css的自动载入;
2、template文件夹下面放的是产出物,其实就是一些模块的拼合。只要模块写的够好这块工作就很好做了。
images部分:(base文件夹、data文件夹、icon文件夹和mod文件夹)
1、图片文件夹的部署和css部署是对应的,base和global的前景图和背景图放在base文件夹里面。
2、用作例子的示例图片放在data里面比如,头像之类的
3、第三方和icon放在icon的文件夹中
4、Mod文件夹中放的是模块所需要的前景图和背景图,小图标用sprite合并到base中
下面是几个有关css的tips:
1、对非a标签添加伪类状态,例如span:hover{}。在采用偷天换日的手法a:hover span{},解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。
2、选项卡去掉虚线框,IE解决方案:<a href=”..” hidefocus=”true”>;FF下解决方案:a:focus {outline:none;-moz-outline:none;}
3、内联元素居中水平采用父元素text-align:center;垂直采用height=line-height;块级元素水平居中自身margin:0 auto;text-align:left(对子内联元素不入侵)
父元素text-align:center;块级元素可以采用text-indent调解左边距,比padding-left的好处在与不会影响固定宽度值
4、小图片存为gif文件比png-8要小,但是像css sprites这种颜色种类不多的大图片存为png-8要比gif要小
5、内联元素用display:inline-block;比较给力,IE6下虽然不支持这个属性,但是会触发内联元素的haslayout,所以表象一样。块级元素就不行了
6、内联元素float:left;之后按理说应该表现为块级,但是文字在IE6和IE7下会填充上一行的空隙。解决方案white-space: pre;
7、IE6下当高度小于font-size的时候,会被撑高。解决方案:font-size:1px;
8、css在浏览器渲染过程中是从右向左读取的,尽量不用名字空间约束样式名,尽量不对元素直接写样式。
项目中必须知道的关于CSS+DIV的常识的更多相关文章
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- 项目中如果管理前端文件CSS和JS
如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
- [Vscode插件] 自动编译项目中的Sass文件为CSS
插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content(" ...
- vue项目中,使用vue-awesome-swiper插件实现轮播图
一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...
- MVC 之 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后的丢失
在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="s ...
- 记一次项目中的css样式复用
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...
随机推荐
- Your pain
Your pain is the breaking of the shell that encloses your understanding. 你的痛苦是你那包裹知识的皮壳的破裂.
- windows 8.1无人值守安装
上个星期网上泄漏了微软最新的操作系统Windows 8.1,我便迫不及待的下载下来进行体验.发现其安装过程交互次数太多,太过漫长,遂研究了一下无人值守安装,现将成果记录如下. 一. 微软有专门的布署工 ...
- HDU 4048 Zhuge Liang's Stone Sentinel Maze
Zhuge Liang's Stone Sentinel Maze Time Limit: 10000/4000 MS (Java/Others) Memory Limit: 32768/327 ...
- logstash安装与基础用法
若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...
- Bootstrap_导航条
一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...
- h-ui前端框架
h-ui.net
- VBA中使用JavaScript脚本语言解析JSON数据
JSON:JavaScript 对象表示法(JavaScript Object Notation) 和xml相似,都是文本形式(保存在文本文件中或字符串等形式),比如: jsstr = {" ...
- 深入浅出设计模式——解释器模式(Interpreter Pattern)
模式动机 如果在系统中某一特定类型的问题发生的频率很高,此时可以考虑将这些问题的实例表述为一个语言中的句子,因此可以构建一个解释器,该解释器通过解释这些句子来解决这些问题.解释器模式描述了如何构成一个 ...
- Await Async Task
class Program { static void Main(string[] args) { Console.WriteLine("=======Start Main!======== ...
- java.util.concurrent包分类结构图
摘自:http://blog.csdn.net/tsyj810883979/article/details/6956290