根据模块化的思想,将目录划分为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的常识的更多相关文章

  1. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  2. 项目中如果管理前端文件CSS和JS

    如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...

  3. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  4. [Vscode插件] 自动编译项目中的Sass文件为CSS

    插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...

  5. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  6. 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

    ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content(" ...

  7. vue项目中,使用vue-awesome-swiper插件实现轮播图

    一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...

  8. MVC 之 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后的丢失

    在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="s ...

  9. 记一次项目中的css样式复用

    本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...

随机推荐

  1. ScrollView和listview的冲突问题,关于宽度,和滑动

    只需要重新listview即可 package com.exmple.listscrow; import java.util.logging.LogManager; import android.co ...

  2. Dynamics AX 2012 R2 配置报表服务器

    今天Reinhard在使用报表的过程中,发现以下错误: The default Report Server Configuration ID could not be found in the SRS ...

  3. Linux系统使用yum安装nodejs

    先执行: yum install \ http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm 再执行: su ...

  4. Robotlegs框架1.5简介

    该框架的1.5版本位于https://github.com/robotlegs/robotlegs-framework/tree/version1,现在已经出了重新架构的2.0版本,所以我决定先研究已 ...

  5. 【转】【C/C++】实现memcpy函数

    本文转自:http://my.oschina.net/renhc/blog/36345 面试中如问到memcpy的实现,那就要小心了,这里有陷阱. 先看下标准memcpy()的解释: ? 1 2 vo ...

  6. JAVA线程同步辅助类Exchanger-交换

    可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹配,并且在返回时接收其伙伴的对象.Exchanger 可能被视为 Synchro ...

  7. 离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程

    关于CDH和Cloudera Manager CDH (Cloudera's Distribution, including Apache Hadoop),是Hadoop众多分支中的一种,由Cloud ...

  8. 获取ip

    需要引用System.Web http://stackoverflow.com/questions/4879837/smart-way-to-get-the-public-internet-ip-ad ...

  9. 《BI那点儿事》数据流转换——百分比抽样、行抽样

    百分比抽样和行抽样可以从数据源中随机选择一组数据.这两种task都可以产生两组输出,一组是随机选择的,另一组是没有被选择的.可以将这些选择出的数据发送到开发或者测试服务器上.这个Task的最合适的应用 ...

  10. Web API开发实例——对产品Product进行增删改查

    1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...