CSS - 教程之家

73浏览

0评论

css实现背景半透明文字不透明的效果示例

本文介绍了css实现背景半透明文字不透明的效果示例，分享给大家，具体如下：效果如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...

2020-11-01

68浏览

0评论

CSS实现精灵图与字体图标

精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访问次数，将多个常用的图片...

2020-11-01

60浏览

0评论

详解如何在css中引入自定义字体(font-face)

为啥要用这个，要从做海报说起，那是一个风雨交加的夜晚。。。好了不扯淡了，我们言归正传，为啥用他，因为浏览器没有字体呗。那为啥要你告诉呢？我自己不会去w3cschool去看去学啊。是...

2020-11-01

76浏览

0评论

CSS3实现可翻转的hover效果

CSS3实现可翻转的hover效果,具体代码如下所示：1.css/*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust...

2020-11-01

89浏览

0评论

CSS3之transition实现下划线的示例代码

本文章介绍了CSS3之transition实现下划线的示例代码，分享给大家，具体如下：在这里先看看我们的demo认识transition这是CSS3中新增的一个样式，可以实现动画的过度。通常使用在添加...

2020-11-01

115浏览

0评论

CSS3 清除浮动的方法示例

一、目的通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。二、内容简介1、引入，还原浮动本来的意义
2、说明，实际开发中常用浮动来做...

2020-11-01

70浏览

0评论

纯HTML和CSS实现JD轮播图效果

使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。　　　，如图为两个侧边箭头图片。<!DOCTYPE html><html lang="en"><head> <meta charset="UT...

2020-11-01

196浏览

0评论

使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果

有时侯页面很长，需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。HTML：添加一个链接，可修改锚点点击时滑动到指定位置，这里使用了Bootstrap 3.x版本的一个向下箭头作...

2020-11-01

73浏览

0评论

前端应该掌握的CSS实现多列等高布局技巧

1、引言我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就会导致每...

2020-11-01

88浏览

0评论

浅谈CSS浮动的特性

本文介绍了CSS浮动的特性，分享给大家，顺便给自己留个笔记浮动具有以下特性：盖不住的文本浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏...

2020-11-01

56浏览

0评论

详解css display:box 新属性

一、display:box;　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。二、可在其子代设置如下属性　　前提：使用如下属性，必须在父代设置display:b...

2020-11-01

60浏览

0评论

浅谈CSS层叠机制

css中为什么要有层叠机制因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突。在...

2020-11-01

68浏览

0评论

分享CSS书写规范、顺序【推荐大家使用】

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color...

2020-11-01

71浏览

0评论

css多行文本溢出时出现省略号的示例

多行文本溢出时出现省略号本文推荐2种方法。1. csstip：只兼容chrome内核的浏览器。ff不支持。.box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow:...

2020-11-01

39浏览

0评论

CSS 图片动画特效的示例代码（相框）

本文介绍了CSS 图片动画特效的示例代码（相框），分享给大家，具体如下：下面是效果图HTML代码<div class="box">  <img src="images/pic.png" alt...

2020-11-01

86浏览

0评论

CSS 翘边阴影的实现代码

本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下：仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现...

2020-11-01

83浏览

0评论

css控制元素高度实现自底向上和自顶向下的方法

从一个常见问题开始讨论：如何用css将一个元素的高度设置为【浏览器内容窗口高度】。方案一：使元素高度占满屏幕在css中，vh是一个特殊的长度单位，100vh的值就是【浏览器内容窗口...

2020-11-01

214浏览

0评论

css input[type=file] 样式美化(input上传文件样式 )

效果：<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> /*样式1*/ .a-upload { padding...

2020-11-01

83浏览

0评论

css3 column实现卡片瀑布流布局的示例代码

本文介绍了css3 column实现卡片瀑布流布局的示例代码，分享给大家，具体如下：实现效果今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。最后使用css3中的column...

2020-11-01

54浏览

0评论

CSS3实现背景透明文字不透明的示例代码

最近遇到一个需求，要在图片上显示带有半透明背景的文字，效果如下图所示：需求.png看到这个需求之后，第一反应是使用CSS3中的opacity设置元素的透明度。<!DOCTYPE html><html lang...

2020-11-01

66浏览

0评论

浅谈CSS中的尺寸单位

浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。概览绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡...

2020-11-01

115浏览

0评论

CSS中有些属性的前面会加上“*”或“_”所代表的意思

CSS中有些属性的前面会加上“*”或“_”所代表的意思给不同的浏览器识别例如：color{ background-color: #CC00FF; /*所有浏览器都会显示为...

2020-11-01

91浏览

0评论

CSS 设置滚动条样式的实例代码

CSS 设置滚动条样式的实现代码如下所示：•::-webkit-scrollbar 滚动条整体部分
•::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决...

2020-11-01

84浏览

0评论

深入浅析CSS 选择器分组

选择器分组假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2, p {color:gray;}将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则...

2020-11-01

70浏览

0评论

css 评分效果的星星示例

纳尼？什么星星外衣？好，直接上图比较能说清楚：仔细看会发现规律：可以根据百分比/分值动态改变高亮星星的个数。分步骤图：这种效果，如果遇到一分一个星，没有半星（或者有也可以，直接加一...

2020-11-01

84浏览

0评论

CSS3实现文本垂直排列的方法

最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的...

2020-11-01

83浏览

0评论

利用CSS3实现文字折纸效果实例代码

前言本文主要跟大家分享了一个利用CSS3实现文字折纸效果的实例，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧效果图：示例代码：代码如下，复制即可使用：<!DOCTYPE...

2020-11-01

114浏览

0评论

通过css使用background-color为背景图添加遮罩效果的两种方法

一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法：...

2020-11-01

79浏览

0评论

css遮罩全屏居中对齐的实现方式

具体代码如下所示：<style>#toastLoaderFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999;...

2020-11-01

60浏览

0评论

HTML+CSS实现下拉菜单的实现

1.下拉列表实例代码如下：<!doctype html><html><head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0; text-decoration:none; list-style:...

2020-11-01

79浏览

0评论

CSS中的导航栏和下拉菜单的实现

一、CSS导航栏（1）导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。（2）垂直导航栏<1>代码如下<!doctyre html><html>...

2020-11-01

79浏览

0评论

CSS清除浮动方法大全(小结)

1、父级div定义伪类：after和zoom<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:1...

2020-11-01

55浏览

0评论

css 借助autoflow 属性实现选座位效果

1.autoflow属性，如果元素内容的长宽超出元素本身的长宽则会出现滚动条<HTML> <HEAD> <TITLE>测试表格内的滚动条</TITLE> </HEAD> <BODY> <div id="wins" style="pos...

2020-11-01

81浏览

0评论

对常见的css属性进行浏览器兼容性总结(推荐)

为什么要对css属性进行浏览器兼容性总结呢？用的时候，直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗？css3.jpeg其实，在实际的开发过程中，我们对常见的css属性兼...

2020-11-01

99浏览

0评论

详解css图像拼合技术（精灵图）

CSS图像拼合技术1.图像拼合图像拼合技术就是单个图像的集合。有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的...

2020-11-01

72浏览

0评论

详解css栅格系统在项目中的灵活运用

前言css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求UI设计了如下布局，其中左上角橙色部...

2020-11-01

87浏览

0评论

CSS设置列表样式和创建导航菜单实现代码

一、设置列表的符号 list-style-type: 属性；//设置列表样式list-style-type: none; //清楚样式属性有很多可以自己去试：circle，disc,decimal。。。。二、设置列表图片符号为ul,...

2020-11-01

84浏览

0评论

CSS实现响应式布局的方法

用CSS实现响应式布局响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询，下面就介绍一下怎么运用：使用@media 的三种方法1.直接在CSS文...

2020-11-01

87浏览

0评论

详解CSS pointer-events属性的使用

在前端的开发中，我们都是直接与用户接触，应该尽量让用户感到操作畅快愉悦，获得类似native的感觉。其中动画是最常用的方法。这里的需求是，弹层的设计，这个弹层希望可以像 native...

2020-11-01

134浏览

0评论

css把容器级别（div...）标签固定在一个位置（在页面最右边）

代码如下所示：.process{ border:1px solid #B7B7B8; background:#F8F8F8; width:80px; height:250px;  　　position: fixed; 　　right:0...

2020-11-01

70浏览

0评论

CSS BEM 命名规范简介(推荐)

1 什么是 BEM 命名规范Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。BEM 是一个简单又非常有用的命名约定。让你的前端...

2020-11-01

116浏览

0评论

CSS 字体新玩法之彩色字体的实现

如果你们设计师想在某些特别的专题活动中使用下图的字体作为标题字体进行展现，怎么办呢？做成图片咯。然后你可能会遇到这几个问题：不同屏幕下的适配，要是只做一种尺寸的图，放大或...

2020-11-01

76浏览

0评论

CSS transform-origin属性的理解

前言最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性...

2020-11-01

91浏览

0评论

详解CSS定义字体、颜色、背景等属性

•字体属性•字体font-family:"字体1","字体2",... 例：font-family：“宋体”;
•字号font-size:大小的取值例：font-size:16px; 注意：xx-small:...

2020-11-01

86浏览

0评论

深入理解CSS overflow:hidden——溢出,坍塌,清除浮动

overflow：hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完这篇...

2020-11-01

96浏览

0评论

CSS代码实现三角形和饼图

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}.triangle_top{width:0;height: 0;border-width:50px;border-...

2020-11-01

67浏览

0评论

详解关于使用媒体查询@meda失效原因的总结

最近在写自己的个人博客时遇到了一个小问题，为了解决响应式设计，便加入了媒体查询@meida来自适应各种大小的终端设备。但是在其中还发现了不少坑，在这里希望通过这篇文章分享给...

2020-11-01

71浏览

0评论

css实现导航切换的实例代码

css导航切换效果图如下：代码如下，复制即可使用：<!DOCTYPE html><html><head> <title>css实现导航切换</title> <style type="text/css"> .clothes{width:1170px;...

2020-11-01

153浏览

0评论

浅谈最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各...

2020-11-01

80浏览

0评论

23种CSS垂直居中技巧

网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的...

2020-11-01

热门文章