Css @media min-width和max-width区别

在使用Css进行媒体查询的时候,经常会用到min-width和max-width

min-width是最小宽度(大于等于)

max-width是最大宽度(小于等于)

先看下面的代码,这是从bootstrap中摘出来的,min-width来确认分别是768、992、1200。当然了过[......]

阅读全文

飞鱼

Css重置:Reset CSS

Reset CSS

 

Tags:
飞鱼

利用clearfix清除浮动

一般情况下我们会用clear:both来清除浮动。

我们通过举例来说明:

上边的代码,想要清除浮动,我们需要在div盒子里添加一个div带有clear:both的样式,如下:
[crayon-5b096731d823b16[......]

阅读全文

飞鱼

Css利用box-sizing:border-box限定内边距和边框在固定宽度和高度内执行

box-sizing是css3的新属性,今天我们来讲一下它的一个值:border-box

我们举例来说明

有一个div盒子,它的宽度是200px,边框宽度是5px,内边距是10px.那么这个盒子的实际宽度应该是:200 + 5*2 + 10*2 = 230px;

现在我们给这个盒子[......]

阅读全文

飞鱼

导航固定,下拉高度和颜色发生变化

导航固定,当下拉滚动条一定高度时,导航条的高度或者颜色发生改变。

使用方法:

在导航的外围添加一个div或header

Css

Js

[crayon-5b[......]

阅读全文

飞鱼

网页平滑返回顶部Jquery代码(2018版)

以下是经过美化过的Jquery返回顶部代码,具有平滑效果,返回顶部的图标用的是font awesome字体。使用font awesome的好处是图标可以随意换,方便快捷!

好了,我们开始!

将以下三个文件保存到同一目录,预览html页面就可以看到效果。因为以下代码稍微美化过,css中加入[......]

阅读全文

飞鱼

Html lange属性各国语言代码表

最近,总有朋友问,html5中,lang属性的各国语言代码,比如大家都知道英语<html lang="en">,那么中国的代码是什么呢,有的说是zh,有的说是zh-cn等等。

现在给出大家一个各国语言的代码表,以后用的时候直接参考就可以!比如你的网站是中文简体,那么你在下边表格la[......]

阅读全文

飞鱼

CSS > 子元素选择器

Css子元素选择器(Child selectors)只能选择作为某元素子元素的元素。子选择器使用了大于号(子结合符)。

选择子元素

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果您希望选择只作为 h[......]

阅读全文

飞鱼

Css3 :empty 选择器

Css3的 :empty 选择器匹配没有子元素(包括文本节点)的每个元素。所有主流浏览器均支持 :empty 选择器,除了 IE8 及更早的版本。

样式:

以下为html测试代码
[crayon-5b09673[......]

阅读全文

Tags: ,
飞鱼

Css background-position: 让背景图片水平垂直居中

在制作网页的过程中,我们有时候可能需要让背景图片水平垂直居中。

这一点可以通过css的背景图片定位属性background-position来实现:

div{background-position:center center}

其中第一个center是水平居中(X轴),第二个cen[......]

阅读全文

飞鱼