经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS

css圆形镂空(优惠券背景图)的实现_CSS教程_CSS

本文主要介绍了c 圆形镂空(常用做优惠券背景图),分享给大家,具体如下: .hollow-compose-three-circles { width: 300px; height: 100px; position: relative; background: r...[2021/3/1]

纯CSS实现页面中的列表收拉效果_CSS教程_CSS

你可能经常见到下面这样的效果: 没错,就是页面上常用的“展开收起”交互形式,通常的做法就是控制display属性值在none和其他值之间切换,但是虽说功能可以实现,效果却非常生硬,所以就会有这样的一个需求 —— 希望元素在展开收起时能够有明...[2021/3/1]

(办公)html5与css3的相关知识

1.html超文本标记语言,图片,链接,文字组成. 2.常用的浏览器:IE,火狐,谷歌浏览器.   浏览器内核:   IE      Trident   firefox Gecko   chrome&nbs...[2021/3/1]

前端优秀实践不完全指南

本文其实应该叫,Web 用户体验设计提升指南。 一个 Web 页面,一个 APP,想让别人用的爽,也就是所谓的良好的用户体验,我觉得他可能包括但不限于: 急速的打开速度 眼前一亮的 UI 设计 酷炫的动画效果 丰富的个性化设置 便捷的操作 贴心的细节 关注残障人士,良好的可访问性 ... ...[2021/3/1]

css盒子模型简析

盒子模型分为标准盒子模型和怪异的盒子模型 1.标准的盒模型 (content-box)   你设置的宽和高(width/height)是内容的部分宽高,所以盒子的实际宽度=内容的宽高+boder+padding         &nb...[2021/3/1]

UNI-APP封装全局登录检查函数

封装的函数主要用于检查用户是否登录 封装一个全局函数 在main.js文件下定义checkLogin全局函数,代码的注解都在代码块里面 参数说明: backpage, backtype 2个参数分别代表: backpage : 登录后返回的页面 backtype : 打开页面的类型[1 : re...[2021/3/1]

纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

现在实现的有基础用法、可清空、密码框,参考链接:https: element.eleme.cn/#/zh-CN/component/input        HTML代码:想要测试哪个组件,直接将对应组件解开注释即可,标红的js和c 记得修...[2021/3/1]

解决ElementUI自定义CSS样式不生效的问题_CSS教程_CSS

解决ElementUI自定义CSS样式不生效的问题_CSS教程_CSS

例如有一个输入框 <el-input ref="mySearch" cla ="mySearch" size="small" placeholder...[2021/3/1]

CSS复合选择器的具体使用方法_CSS教程_CSS

交集选择器 交集选择器由两个选择器直接连接构成,其中第一个选择器必须是元素选择器,第二个选择器必须是类选择器或者 ID 选择器,两个选择器之间必须连续写,不能有空格。 交集选择器选择的元素必须是由第一个选择器指定的元素类型,该元素必须包含第二个选择器对应的 ID 名或类名。交集选择器选择的元素...[2021/3/1]

CSS让子元素div的高度填满父容器的剩余空间的方法_CSS教程_CSS

1.使用浮动的方式 效果图: 代码如下:(注意,此时.content的高度是500px,即父元素的高度,但是浮动元素在 .content 上方,盖住了 .content,将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果) ...[2021/3/1]

详解CSS多种三列自适应布局实现_CSS教程_CSS

前言 为了按照常规WEB布局,这里全部采用拥有header和footer模式进行左中右布局编写。 第一种:基于float实现 实现思路 常规思路,使左右两个Aside分别浮动至左右两侧即可 代码实现 <!-- HTML部分 --> <div cla ...[2021/3/1]

纯 CSS 实现拖拽效果的代码_CSS教程_CSS

发挥你的想象,CSS也能实现拖拽效果。 一、拖拽效果示例 这是移动端很常见的一个效果,可以按住拖来拖去,比如下面的 起点中文网 [1] 触屏版: 这类效果用JS可以很容易实现,无非就是多了一些计算,多考虑了一些临界场景,然后代码量也多了一些。不过,经过我的一番脑洞,发现CSS也能几...[2021/3/1]

教你玩转CSS Position(定位)

教你玩转CSS Position(定位)

CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定posi...[2021/2/22]

教你玩转CSS Float(浮动)

什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左...[2021/2/22]

css整理之-----------基本知识

c 解析   c 从右边往左开始解析,过多的嵌套会影响性能,最好不要超过三层。c 尽可能的复用代码块,减少重复代码 c 优先级   c Specificity中文一般译为c 优先级、c 权重。相比权重,优先级更好理解。简单理解就是一个DOM元素有多个c 样式设置,优先级高的那...[2021/2/22]

教你玩转CSS 居中

教你玩转CSS 居中

1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度,并将两边的空外边距平均分配:   .center { margi...[2021/2/22]

教你玩转CSS 组合选择器

教你玩转CSS 组合选择器

CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 1.后代选择器 后代选择器用于选取某元素的后代元素。 以下实例选取所有 &l...[2021/2/22]

教你玩转CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。 语法: 伪类的语法: selector:pseudo-cla {property:value;}   CSS类也可以使用伪类: selector.cla :pseudo-cla {property:v...[2021/2/22]

教你玩转CSS 伪元素

一、CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.cla :pseudo-element {pro...[2021/2/22]

使用 mask 实现视频弹幕人物遮罩过滤

经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili、虎牙)中,当人物与弹幕出现在一起的时候,弹幕会“巧妙”的躲到人物的下面,看着非常的智能。 简单的一个截图例子: 其实,这里是运用了 CSS 中的 MASK 属性实现的。 mask 简单用法介绍 ...[2021/2/22]

教你玩转CSS 导航栏

CSS 导航栏 垂直   水平   一、导航栏 熟练使用导航栏,对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的 。在我们的例子中我们将建立一个标准...[2021/2/22]

元素水平垂直居中的四种方法

元素水平垂直居中的四种方法

目录方法一:使用flex布局方法二:使用transform将元素进行移动,必要时可将margin设为负值(需要知道元素的尺寸)方法三:通过改变父元素和子元素的position属性实现居中效果方法四:子元素设置display: inline-block,父元素设置text-align: c...[2021/2/22]

教你玩转CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 1.基本下拉菜单 当鼠标移动到指定元素上时,会出现下拉菜单。 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta char...[2021/2/22]

教你吃透CSS的盒子模型(Box Model)

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置...[2021/2/22]

博客园皮肤美化

博客园皮肤美化

目录如何与博主拥有同款博客园皮肤?一 、github下载源码二、在博客园的管理中做些改动1、设置2、文件上传三、效果展示 如何与博主拥有同款博客园皮肤? 一 、github下载源码 Cnblogs-Theme-SimpleMemory git clone https: github...[2021/2/22]

010_HTML5 - 清风(学习-踏实)

目录初识HTML什么是HTMLHTML发展史HTML5的优势W3C标准常见IDEIDEA开发HTMLIDEA创建HTML文件,并用浏览器打开配置浏览器HTML基础HTML基本结构HTML注释网页基本信息网页基本标签图像标签链接标签块元素和行内元素列表标签表格标签媒体元素:音频和视频页面结...[2021/2/22]

一文教你玩转CSS border(边框)_CSS教程_CSS

边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style的值 代码演示: <!DOCTYPE html> <html lang="en"> <head&g...[2021/2/22]

CSS实现TikTok文字抖动效果示例_CSS教程_CSS

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班...... CSS技术是前端必须掌握的一项技能,不仅要掌握,而且要精通。现在前端框架横行的趋势,程序员写样式的机会也越来越少,组件式开发,一个页面几...[2021/2/22]

纯CSS实现的三种通知栏滚动效果_CSS教程_CSS

前言 通知栏组件是一个比较常见的组件了,基本上每个站点都会有怎么个组件,主要就是通告站点的一些变化或者是告知一些中奖名单等作用。 最近在复习CSS3动画部分内容,想着平时通知栏组件大部分还是用JS来实现,正好拿这块组件来当复习,下面写了三个小例子在此分享,欢迎大家观看,如有疑问,欢迎留言评论哈...[2021/2/22]

一文教你玩转CSS 组合选择器_CSS教程_CSS

CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 1.后代选择器 后代选择器用于选取某...[2021/2/22]

设置div背景透明的方法示例_Div+CSS教程_CSS

设置div背景透明的方法示例_Div+CSS教程_CSS

div背景透明常见的有两种方法: 1. 通过opacity属性设置,取值0~1,0表示透明,1表示不透明,但是这种方法会把div上的内容也同时进行透明设置。 效果如下: 2.通过rgba格式的background-color设置,格式为:background-color:rgba(...[2021/2/22]

教你玩转CSS Display(显示) 与 Visibility(可见性)

隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”,或把visibility属性设置为”hidden”。但是请注意,这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素,但隐...[2021/2/19]

CSS 实现各种 Loading 效果附带解析过程_CSS教程_CSS

CSS 实现各种 Loading 效果附带解析过程_CSS教程_CSS

HTML <div cla ="spinner"></div> CSS .spinner { width: 40px; height: 40px; background-color: #333;...[2021/2/19]

教你玩转CSS 分组选择器和嵌套选择器

分组选择器 在样式表中有很多具有相同样式的元素。 h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码...[2021/2/19]

网页布局准则

网页布局准则

 一、网页布局思路     通过盒子模型,知道大部分html标签是一个盒子;     通过c 浮动,定位,可以让每个盒子排列成网页;     一个完整的网页是由标准流、浮动、定位一起完成布局的,每个都有自己专门的用法;    1、网页布局准则       多个...[2021/2/19]

教你玩转CSS padding(填充)

教你玩转CSS padding(填充)

padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。   可能的值 属性 描述 length 定义一个固定的填充(像素、pt、em、等) ...[2021/2/19]

教你玩转CSS margin(外边距)

margin margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。 margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。   可能的值 值 | 说明 –|— auto | 设置浏览器边距。 这样做的结果会依赖于浏...[2021/2/19]

教你玩转CSS 轮廓(outline)属性

CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。   定义和用法 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,...[2021/2/19]

教你玩转CSS border(边框)

边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式   border-style的值 代码演示: <!DOCTYPE html> <html lang="en"> <head> ...[2021/2/19]

如何玩转CSS列表样式?速看!

CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像   列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 - 列表项的标记有数字或字母...[2021/2/19]

教你玩转CSS表格(table)

1.表格边框 指定CSS表格边框,使用border属性。 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, th, td { border: 1px solid black; } 请注意,在上面的例子中的表格有双边框。这是因为表...[2021/2/19]

如何玩转CSS链接(link)的知识点?

如何玩转CSS链接(link)的知识点?

CSS 链接 不同的链接可以有不同的样式。   链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。 特别的链接,可以有不同的样式,这取决于他们是什么状态。 这四个链接状态是: a:link - 正常,未访问过的链接 a:visited - 用户已访...[2021/2/19]

教你玩转CSS Overflow

CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 <style> #overflowTest { background: #4CAF50; co...[2021/2/18]

如何玩转CSS的Id 和 Class选择器?

如何玩转CSS的Id 和 Class选择器?

id 和 cla 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “cla ”选择器。   1.id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id ...[2021/2/18]

一篇文章精通CSS文本的问题,值得一看。

CSS 文本格式 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...[2021/2/18]

教你玩转CSS的所有字体,路过的来瞧一瞧。

CSS 字体 CSS字体属性定义字体,加粗,大小,文字样式。 CSS字型 在CSS中,有两种类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(如 “Serif” 或 “Monospace”) 特定字体系列 - 一个特定的字体系列(如 “Times...[2021/2/18]

如何通过 display:olck/none 完成一个菜单栏_CSS教程_CSS

通过 display:bolck/none 完成一个菜单栏的效果 图1: 首先下面是已经完成的一个效果当我们把鼠标移入到 “菜单” 这块区域时就会弹出,图2的效果 图2: 相反如果我们把鼠标移出 “菜单” 区域时,下面的子菜单就会隐...[2021/2/18]

CSS快速入门

Blog:博客园 个人 参考:https: www.w3school.com.cn/c index.asp 概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件...[2021/2/18]

web开发tools

1、Web代码工具     网页开发工具:HBuilderX、VSCode、SublimeText、Dreamweaver、WebStorm...   HBuilderX —— 内置浏览器、app云打包 VScode —— 丰富的快捷键、代码整理方便 ...[2021/2/18]

幸福西饼:静态页面制作项目总结

在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多。 这个项目主要是复刻【幸福西饼】的主站和产品列表页,纯静态页面,没有任何JS的成分,借此机会熟悉下html和c 的用法。下面是一些技术要点记录。 页面...[2021/2/18]

85
2
记录数:2237 页数:1/4512345678910下一页尾页
加载更多
 友情链接: NPS