CSS

前端开发必配置：html5shiv.js和respond.min.js的作用说明！

admin web前端 暂无评论 158 浏览

一、做页面开发时我们基本都会需要解决的问题：

1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

2、让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

    由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，故这两种问题还是需要解决的，…

    
Read more

css3实现图片划过一束光闪过效果(图片光影掠过效果)

admin web前端 暂无评论 127 浏览

css:

.guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.guangshu:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)),
…
Read more

CSS 定位详解

admin web前端 暂无评论 152 浏览

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。

本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。

 

…
    
Read more

CSS Grid 网格布局教程

admin web前端 暂无评论 233 浏览

一、概述

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。…

    
Read more

CSS Grid 布局完全指南(图解 Grid 详细教程)

admin web前端 暂无评论 152 浏览

本文最后更新于 2018年11月20日。推荐姊妹篇：Flexbox 布局完全指南(图解 Flexbox 布局详细教程)

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。…

    
Read more

一行css代码搞定响应式布局

admin web前端 暂无评论 181 浏览

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。

…
    
Read more

移动端字体自适应

admin web前端 暂无评论 266 浏览

完美适口：

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

为了使开发出来的应用或页面大小能适合各种高端手机使用，我们采用了h5的viewport来解决手机分辨率和屏幕大小的不同

    <meta name="viewport"
        content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
…
            
Read more

响应式网页设计–css设置网页字体大小自适应

admin web前端 暂无评论 366 浏览

响应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？

IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。

em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。

比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：

html{font-size:62.5%;
…
            
Read more

网络字体的中文用法

admin web前端 暂无评论 560 浏览

如果你使用的Windows XP操作系统，在浏览中文网页时，你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库，而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代，Windows系统的默认字体变成了微软雅黑，于是，所有的中文网站上的汉字使用的字体都是微软雅黑。

网页上的汉字显示时使用的字库可以用CSS指定(font-family)，比如说，你不喜欢微软雅黑，你的电脑里安装了另外一种字体，叫做“徐静蕾手写体”，你想用这种字体来显示你的网页上的汉字，你看可以在CSS里这样写：…

    
Read more