1、class 样式一般用class,命名:中横线分隔,如:div-logo
id 一般用于js快速地区别和获取元素,命名:驼峰命名法,如:divLogo (中间首字母大写)

2、必不可少的图片,用<img>引入;
可有可无的装饰性图片,可用背景嵌入。

3、normalize.css与resets.css 都是重置样式,但是normalize.css利用了一些技巧,保证各个浏览器的兼容性。

4、rem相对参照物为根元素html,当没有设置font-size时,浏览器会有一个默认的rem,1rem=16px,与em是一致的。
一般设置html{font-size:62.5%;} 即1rem=10px;(10/16*100%)

5、::selection{background-color:#b3d4fc;text-shadow:none;}设置被选中文字的颜色及无阴影效果。

6、line-height使用px,不要用rem
中文版的Chrome (最小的字号12px,如果小于12px,则按照12px来算)1rem=12px, 而英文版的1rem=10px。

7、相邻同胞选择器
可选择紧接在另一个元素后的元素,且二者有相同的父级元素 。
下面选择的是item2和item3.
HTML代码:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
CSS代码:
li+li { font-size: 50px; }

8、display:inline-block;之后,出现空隙,解决方法
如<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
li{display:inline-block;}
ul{font-size:0;}
li{font-size:12px;}

9、 width: calc(33.33333% - 3rem);动态计算宽度
三个divdisplay:inline-block之后,要去掉中间的间隙,还要减去padding值

10、vertical-align 与line-height ???

11、css中空格符为\00a0
li:nth-child(1)::before{
content:"最新公告:\00a0\00a0";
color:#aaa;
}
12 、
h1一个页面只能有一个
h2次要于h1
h3一般是一个段落的标题,后面带有p文字的。

响应式 css的更多相关文章

  1. SpaceBase – 基于 Sass 的响应式 CSS 框架

    SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...

  2. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  3. kube框架结构-一个小型响应式CSS框架

    当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是你最好的选择.一个独立的CSS文件,帮助你更简单的创建响应式的的布局设计. Kube Framework包括网格.按钮. ...

  4. elf,基于flexbox的响应式CSS框架

    官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍 取名为"精灵"的elf,是一个 ...

  5. Gumby – 基于 Sass 的灵活的,响应式 CSS 框架

    Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...

  6. 实现响应式——CSS变量

    CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...

  7. 响应式css样式

    <div class="a"> 123 </div> @media(orientation:portrait) and (max-width:600px){ ...

  8. css 响应式(媒介查询)

    1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下: @media 类型 and (条件1) and (条件二){css样式} <link r ...

  9. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

随机推荐

  1. TI BLE协议栈软件框架分析

    看源代码的时候,一般都是从整个代码的入口处开始,TI  BLE 协议栈源码也不例外.它的入口main()函数就是整个程序的入口,由系统上电时自动调用. 它主要做了以下几件事情: (一)底层硬件初始化配 ...

  2. $(document).ready(function(){});

    $(document).ready 里的代码是在页面内容都加载完才执行的,你直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,如果你标签里执行的代码调用了当前还没加载过 ...

  3. JAVA文件夹导入到Eclipse中方法:

    将JAVA文件夹导入到Eclipse中方法:方法一: 直接将java文件夹复制,然后粘贴到项目下:方法二:1.打开eclipse,点击项目的空白处,选择import:2.选择Existing Proj ...

  4. git pull all braches

    控制台下执行如下: git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote ...

  5. spring记录

    context:property-placeholder 是将properties加载到Spring上下文中,接下来在定义bean的时候就能用${xx.xx}来访问了. util:properties ...

  6. windows系统调用 临界区机制

    #include "iostream" #include "windows.h" #include "cstring" using name ...

  7. Git使用方法

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  8. VS 编辑并继续(转载)

    转]Microsoft Visual Studio vs2008 vs2010 调试 编辑 修改 代码 在vs2008的文件菜单下,前两个菜单项分别是新建项目 和 新建网站. 这两项里,都可以建web ...

  9. 关于ClassLoader的一点小问题

    今天在看某框架的源码的时候,遇到一个使用URLClassLoader加载Servlet类的问题,当自己在eclipse里面做试验的时候,始终无法把Class加载成功.比如: ClassLoader c ...

  10. 芯航线FPGA学习套件之4*4矩阵键盘模块测试手册

    芯航线FPGA学习套件之4*4矩阵键盘模块测试手册   本手册以简明扼要的方式介绍芯航线FPGA学习套件提供的矩阵键盘模块的测试方法:   连接开发板,如下所示: 2.将矩阵键盘模块与开发板按如下图所 ...