CSS

css实现网页右下角点赞小卡片效果(实例代码)

效果 实现HTML先准备一个干净的 html 页面,写好节点: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device... »

看完不迷糊的 CSS 盒子模型介绍

网页设计中常听的属性名:内容、内边距、边框、外边距, CSS盒子模型都具备这些属性。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。总结到此这篇关于看完不迷糊的 CSS 盒子模型介绍的文章就介绍到这了,更多相关CSS 盒子模型内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

CSS中的translate(-50%,-50%)实现水平垂直居中效果

translate 属性:向上和左,移动自身长宽的 50%,使其居于中心位置。与使用margin实现居中不同的是,margin必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate函数中的百分比是相对于自身宽高的百分比。 »

完美解决谷歌浏览器自动填充问题

在谷歌浏览器中,登陆成功后,谷歌浏览器会提示是否记住密码。如果选择记住密码,那么再次登录会出现诸如下边情况: 如果产品需求是不希望浏览器自动填充账号密码,那么怎么去除呢? 最先想到的是设置input标签属性autocomplete="off",不起作用1, 然后试着设置css input:-webkit-autofill设置背景色为透明和设置相应的字体颜色,依然不尽人意2。 然... »

CSS 屏幕大小自适应的实现示例

要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器:media的使用和规则:①被链接文档将显示在什么设备上。②用于为不同的媒介类型规定不同的样式。 »

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了,兼容性如下截图: 而filter中的drop-shadowIE13才开始支持,移动端Android4.4才开始支... »

CSS子元素选择父元素的实现

通常一个CSS选择器都是从上往下选择的,通过父元素选择子元素,那么能不能通过子元素选择父元素呢? »

css3实现动画的三种方式

这是一个考验面试者对css的基础知识。 css 实现动画主要有3种方式 第一种是: transition 实现渐变动画 第二种是: transform 转变动画 第三种是: animation 实现自定义动画 下面具体讲一下3种动画的实现方式。 transition渐变动画 我们先看一下 transition 的属性: property:填写需要变化的css属性如:width,line-heigh... »

浅谈CSS 伪元素伪类的妙用

在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展,伪元素/伪类也开始被大量应用:在性能愈加被看中的当下,处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王” ! 下面笔者总结的一些关于CSS的“骚操作”,希望能对你有所帮助: :hover和:focus显示浮层 我们完全可以只用CSS的父子选择器(用于“父子嵌套&rdqu... »

CSS八种让人眼前一亮的HOVER效果的示例代码

一.发送效果HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> CSS #send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh... »

利用纯css做一个下拉菜单功能的示例代码

导语: 这几天看面试题目的时候,经常能够看到用css去实现一个下拉菜单,但是我发现很多人却没能够做出来,最后只能勉强用js做出来。实话实说,我很震惊,这个功能实现起来很简单,甚至可以说是入门题目,怎么这么多人不会呢?所以今天来个面试干货,带大家直接手撸css做下拉菜单。 还是一样,话不多说,直接上效果图。 1,一个按钮,没点击前(手机端)或者鼠标没指向时(pc端) 2,点击后,或者鼠标指向后。 就... »

css 命名:BEM, scoped css, css modules 与 css-in-js详解

同 css modules,用算法命名。无法适配多套主题 css-in-js 使用算法命名,拥有 css modules 的优势。同时将 css 视为 js 的字符串,赋予 css 更多能力到此这篇关于css 命名:BEM, scoped css, css modules 与 css-in-js的文章就介绍到这了,更多相关css 命名内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希... »

CSS解决inline-block的错位问题

废话不多说 帖代码 html部分 <div class="positionleft">我是position方式的左边,占30%</div> <div class="positionright">我是position方式的右边,占70%</div> css部分 .positionleft { position: ... »

纯CSS实现图片百叶窗展示效果示例

首先给大家看一下完成效果 主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度。 第一步:构建一个百叶窗框架 html代码: <div class="container"> <ul> <li><... »

详解CSS布局中浮动问题的四种解决方案

clear属性,字面意思就是清除,那么both,就是清除浮动元素对我左右两边的影响。表示在p标签元素的最后面添加样式,同时这也正好符合内墙法的用法。 clear: both; 清除浮动的方法。overflow:hidden;表示隐藏元素,但是该元素占位置;而display:none;不占位置。 »

详解中文字体在CSS样式中font-family对应的英文名称

总结到此这篇关于中文字体在CSS样式中font-family对应的英文名称的文章就介绍到这了,更多相关CSS样式font-family英文名称内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

CSS中flex和inline-flex的区别详解

inline-flex 和 inline-block 一样,对内部元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。 »

深入浅析CSS 的多种背景及使用场景和技巧

本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料 CSS background是最常用的CSS属性之一。然而,并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中,会详细介绍background-image`属性,并结合图形来解释多个背景使用方式以及其实际好处。 ... »

纯css实现流向性和动态线条效果的代码

思路: 一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子移动 demo: css部分: @keyframes mymove { from{left:0px;} to{left:70px;} } .father{ background: #748096; border-radius:5px; position: relative; top: 70px; left: -5px... »

CSS常用样式之绘制双箭头的示例代码

一、多次调用单箭头 实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。 1、边框旋转单箭头实现 .arrow-right{ height: 120px; width: 30px; display :inline-block; position: relative; } .arrow-right::... »

解决line-height=height元素高度但是文字并没有垂直居中的问题

先说下为什么line-height等于元素高度文字却没有垂直居中,其实line-height等于元素高度的时候文本并不是真的居中了,而是看着居中了,当元素高度和font-size差距较大的时候,这种不是真正的居中就越发的明显,这里可以参看下什么是基线? »

详解CSS 子元素相对于父元素固定定位解决方案

基本概念 绝对定位(absolute):设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 https://www.w3school.com.cn/css/css_positioning_absolute.... »

CSS3动画和HTML5新特性详解

CSS3中有三个关于动画的属性:transform、transition和animation。逐帧动画由关键帧组成,很多个关键帧的连续播放就组成了动画,在CSS3中是由属性keyframes来完成逐帧动画的。(选择器)到此这篇关于CSS3动画和HTML5新特性详解的文章就介绍到这了,更多相关css3动画 html5新特性内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软... »

CSS实现鼠标悬停改变其他标签样式的示例代码

例如:将.div3取消注释后,.div1将无法控制.div2的样式!!!如果控制标签和被控制标签中间有内容,需要按照第三种方式写! »

CSS实现子元素div水平垂直居中的示例

div基本布局 <div class="main"> <div class="center"></div> </div> css样式 1. 配合定位与margin:auto 父元素加相对定位,子元素加绝对定位 .main{ width: 300px; height: 300px; background-colo... »

Page 1 of 223123»