网站首页 CSS
-
CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML<divid="send-btn"><button>//这里是一个svg的占位Send</button></div&...
2021-07-16 longtao100 CSS 965 ℃ 0 评论 -
完美解决谷歌浏览器自动填充问题
在谷歌浏览器中，登陆成功后，谷歌浏览器会提示是否记住密码。如果选择记住密码，那么再次登录会出现诸如下边情况：如果产品需求是不希望浏览器自动填充账号密码，那么怎么去除呢？最先想到的是设置input标签属性autocomplete=...
2021-07-16 longtao100 CSS 726 ℃ 0 评论 -
看完不迷糊的 CSS 盒子模型介绍
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)，CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS...
2021-07-16 longtao100 CSS 770 ℃ 0 评论 -
CSS 屏幕大小自适应的实现示例
要想实现css屏幕大小自适应，首先得引入CSS3@media媒体查询器：media的使用和规则： ①被链接文档将显示在什么设备上。 ②用于为不同的媒介类型规定不同的样式。语法： @media设备名...
2021-07-16 longtao100 CSS 973 ℃ 0 评论 -
CSS中的translate(-50%,-50%)实现水平垂直居中效果
translate(-50%,-50%)属性：向上和左，移动自身长宽的50%，使其居于中心位置。与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranla...
2021-07-16 longtao100 CSS 771 ℃ 0 评论 -
css实现网页右下角点赞小卡片效果（实例代码）
效果实现HTML先准备一个干净的html页面，写好节点：<!DOCTYPEhtml><htmllang="en"><head><metachars...
2021-07-16 longtao100 CSS 904 ℃ 0 评论 -
CSS 选择所有子元素添加样式的方法
方法：以实际项目中less为例：.lk-toolbar{.el-input{width:169px;margin-right:10px;}...
2021-07-16 longtao100 CSS 785 ℃ 0 评论 -
CSS子元素跟父元素的高度一致的实现方法
绝对定位方法：（1）将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent{/*关键代码*/position:relative;/*其他样式*/widt...
2021-07-16 longtao100 CSS 1417 ℃ 0 评论 -
css子元素相对父元素进行定位的实现
解决方案在父元素中加入position:relative;子元素中加入position:absolute;right:20px;代码html结构<divid="div1"><divi...
2021-07-16 longtao100 CSS 759 ℃ 0 评论 -
纯CSS让子元素突破父元素的宽度限制
在写样式中，我们可以经常看到这样的情况 代码如下<divstyle="width:300px;border:4pxsolid#000;margin:20px;padding:2px;"&g...
2021-07-16 longtao100 CSS 894 ℃ 0 评论 -
CSS实现子元素div水平垂直居中的示例
div基本布局<divclass="main"><divclass="center"></div></div>css样式1.配合定位与marg...
2021-07-16 longtao100 CSS 1061 ℃ 0 评论 -
flex是什么及flex布局语法教程详解
Flex布局Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为Flex布局。.box{...
2021-07-16 longtao100 CSS 1027 ℃ 0 评论 -
CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><met...
2021-07-16 longtao100 CSS 573 ℃ 0 评论 -
详解CSS 子元素相对于父元素固定定位解决方案
基本概念绝对定位(absolute)：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块...
2021-07-16 longtao100 CSS 568 ℃ 0 评论 -
纯css实现流向性和动态线条效果的代码
思路：一个外层盒子设置背景；一个内层盒子设置宽高背景，并设置animate让盒子移动demo:css部分：@keyframesmymove{from{left:0px;}to{left:70px;...
2021-07-16 longtao100 CSS 516 ℃ 0 评论 -
CSS 中的六个重要选择器(三秒就可以记住)
CSS的选择器有哪些？？？1.通配符（*）也可称作全局选择器或者通用选择器，顾名思义，就是定义所有的元素的样式。常用于默认的一些样式，例如给所有的元素设置内边距为2px *{padding：2px;}，增加页...
2021-07-16 longtao100 CSS 500 ℃ 0 评论 -
CSS 实现内容高度不够的时候底部(footer)自动贴底
在UI切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。方案1：...
2021-07-16 longtao100 CSS 537 ℃ 0 评论 -
详解浮动元素引起的问题和解决办法
一、问题多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。若浮动元素前面还有同级元素没有浮动则会影响页面结构。二、解决办法1.clear...
2021-07-16 longtao100 CSS 477 ℃ 0 评论 -
CSS常用样式之绘制双箭头的示例代码
一、多次调用单箭头实现了单箭头–就很容易实现双箭头了，上文已经介绍2种实现单箭头的原理：边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。1、边框旋转单箭头实现.arrow-right{hei...
2021-07-16 longtao100 CSS 568 ℃ 0 评论 -
CSS中flex和inline-flex的区别详解
inline-flex和inline-block一样，对内部元素来说是个display:flex的容器，对外部元素来说是个inline的块。两者的区别描述：flex：将对象作为弹性伸缩盒显示inline-...
2021-07-16 longtao100 CSS 618 ℃ 0 评论 -
详解CSS布局中浮动问题的四种解决方案
一、起因：子盒子设置浮动之后效果：由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱二、解决方案：父盒子...
2021-07-16 longtao100 CSS 605 ℃ 0 评论 -
CSS解决inline-block的错位问题
废话不多说帖代码html部分<divclass="positionleft">我是position方式的左边，占30%</div><divclass="positio...
2021-07-16 longtao100 CSS 549 ℃ 0 评论 -
利用纯css做一个下拉菜单功能的示例代码
导语：这几天看面试题目的时候，经常能够看到用css去实现一个下拉菜单，但是我发现很多人却没能够做出来，最后只能勉强用js做出来。实话实说，我很震惊，这个功能实现起来很简单，甚至可以说是入门题目，怎么这么多人不会呢？所以今天来个面试干货，带...
2021-07-16 longtao100 CSS 530 ℃ 0 评论 -
浅谈CSS 伪元素&伪类的妙用
在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展，伪元素/伪类也开始被大量应用：在性能愈加被看中的当下，处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王”！下面笔者总结的一些关于CSS的“骚操作”，希望能对你有所帮...
2021-07-16 longtao100 CSS 563 ℃ 0 评论 -
CSS子元素选择父元素的实现
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？<ul><li><ahref="#"class="active"...
2021-07-16 longtao100 CSS 545 ℃ 0 评论 -
css实现元素垂直居中显示的7种方式
【一】知道居中元素的宽高absolute+负margin代码实现.wrapBox5{width:300px;height:300px;border:1pxsolidred...
2021-07-16 longtao100 CSS 591 ℃ 0 评论 -
css下div下同行多元素右对齐
方法一：float:right此外，浮动还会使得布局更紧凑（没空隙）<divstyle="background-color:red;width:100%;height:60px;/*text-align:...
2021-07-16 longtao100 CSS 525 ℃ 0 评论 -
css解决浮动导致父元素高度坍塌的几种方法
一、文档流与浮动1、’什么是文档流？在html中，文档流也可以叫做标准流或普通流。元素的显示方式是自上而下，从左到右，其中，块级元素默认占据一行，行内或行内块级元素只占据内容部分或自身的所占据的部分，并不会像块级元素一样霸道的占据一...
2021-07-16 longtao100 CSS 587 ℃ 0 评论 -
浅谈css当中:focus-within的好玩之处
相信有些人看到过这个B站输入密码就遮眼睛的这个图这里我们用:focus-within玩一把布局是这样的外面有一个ctn可以忽略，就是一个居中固定位置而已xPassword在没点击之前里面的“suo”这个图是隐藏的x...
2021-07-16 longtao100 CSS 538 ℃ 0 评论 -
HTML+CSS+JS实现堆叠轮播效果的示例代码
效果：轮播图在向一个方向移动的同时，要对其每一个图片的大小，位置，透明度以及层级进行改变原理：轮播图向左移动时将第一个子元素剪切到末尾，轮播图向右移动时，将末尾子元素剪切到最前面，以此实现无缝轮播效果，再因为li剪切后，下一个li会补...
2021-07-16 longtao100 CSS 553 ℃ 0 评论
鲁公网安备 37010202002546号