首页 > TAG信息列表 > 30px

CSS Glassmorphism 按钮悬停效果

CSS Glassmorphism 按钮悬停效果 CSS Glassmorphism 按钮悬停效果免费下载 在 HTML 和 CSS 中 HTML: <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con

css实现精致的角标

css实现精致的角标 参考:视觉还原小技巧!CSS 实现角标效果 纯色角标 -> 有白色到透明渐变的角标 -> 更精致有微弱高光的角标 .ribbon1 { margin: 0 60px; font-size: 34px; line-height: 70px; color: #fff; text-align: center; width: 200px; height: 70px; /*

css固定定位

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ height: 1000px; } div:nth-of-type(1){ width: 3

解决datagrid 设置fit=true 在iframe中显示不全问题

   在实际开发中管理端经常用到  easyUI layout 加 iframe 方式管理多页面,如下图:   解决办法 : 在所有要在Iframe中显示的页面  body标签中 添加style 设置  style="margin-bottom:30px;padding-bottom:30px;"  效果如下图:  

解决flex布局横向显示不全

<style> .showTotal{ width: 100%; //must set overflow: auto; } .outter{ width: 98%; min-width: 60vw; height: auto; overflow: auto; display: flex;

【快应用】text组件里的文字很多,旁边的div样式会被拉伸如何解决

​ 【现象描述】 当text组件的内容较多多行显示的时候,相邻的div样式会显示异常,会从正常的圆形变为椭圆。 代码如下: <template> <div class="container"> <div style="align-items: center;"> <div class="typscolor" style="background-color: bl

制作简单的音乐排行榜

运行代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>音乐排行榜</title> <link rel="stylesheet" type="text/css" href="style05.css"> <style> /*清除浏览器默认样式*/ *{mar

纯css画一颗心

 <div class="love"></div> .love { position: relative; top: 30px; left: 50%; width: 30px; height: 30px; background-color: pink; } .love:before { content: ""; position: absolute; top: -14px; left: 0; w

vue-固定头部-内容可滚动

 <div class="show-box">             <div class="show-top">                 <span>头部</span>             </div>             <div class="show-content">             XXXXXX             </div&

CSS – border-radius (Rounded Corners)

前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理.   参考: Youtube – Advanced CSS Border-Radius Tutorial   正文 以长方形作为例子比较容易理解. normal use border-top-left-radius: 40px 30px; 设定 top-left (左上角)变圆角. horizontal 4

伪类实现书签样式

   <!--css--> .border {   background: #099;   width: 60px;   height: 30px;   position: absolute;   right: 0; } .border::after {   position: absolute;   content: "";   top: 30px;   right: 0;   border-bottom: 10px

vue基础知识梳理(二)

vue基础知识梳理(二) 1. vue中v-bind:class动态添加class 总结:动态添加class,需要给:class=“对象”,对象中value为true,则key作为class名添加;value为false,则添加失败 方案一:直接在html结构中给class一个对象 //html <div class="btn" :class="{wordColor:false,wordSize:true}" >

CSS3其他特性(了解)

01-CSS3图片模糊处理filter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

css3入门(5)边框,圆角及阴影

边框(三要素) 宽度 border-width 单位是px 线型 border-style solid实线 dashed虚线 dotted点状线 颜色 border-color 就是普通的颜色 transparent(透明色) 书写小属性的好处是可以层叠通用属性,用于调个别样式 四个方向的边框 border-top border-right border-bottom border-le

使用css实现文本两端对齐

原图效果: 效果图: 实现代如下: HTML代码: <ul> <li>大道至简</li> <li>菩提</li> <li>只可意会</li> <li>不可言</li> </ul> CSS样式: ul{ float: left; } ul li{ width:80px; height:30px; list-st

css实现简单导航栏

1知识点    2.效果图 3.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { width:100px; height: 30px;

js 文字搬运工

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} li{list-style:none;} .left{float:left;padding:3

jq+vue 使用clipboard实现复制内容到剪切板

<extend name="Base/common_new"/> <block name="style"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </block> <block nam

BFC(块级格式化上下文)

BFC(Block formatting context):块级格式化上下文。BFC是一个独立的布局环境。 可以利用BFC解决两个相邻元素的上下margin重叠问题。 BFC的特性:属于同一个BFC的两个相邻容器的上下margin会重叠 <div> <div class="a"></div> <div class="b"></div> </div> a设置margin-

用css3做一个三角形

用css3做一个三角形 <style> .up { width: 0; height: 0; border-width: 0 30px 30px; border-style: solid; border-color: transparent transparent cyan; margin-top: 10px; } .down { width: 0; height: 0; border-width: 30px 30px 0;

a标签的简单应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=

css中雪碧图(sprite)的使用及制作方法

雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位。   1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一张图:    2.雪碧图的使用 首先确定要使用的图标的位置和大小(可以通过ps测量), 如下

程序员高频英语汇总1Programmer high frequency English summary(一看就懂) 不断更新版

       CSS  CSS 内边距    CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。 div { padding-top: 50px; 上内边距是 50px padding-right: 30px; 右内边距是 30px padding-bottom: 50px; 下内边距 50px padding-left: 80px; 左内边距80px }http

用css设计实现太极八卦图的效果

<div></div> <style> div{ position:relative; width:150px; height:300px; background-color:#fff; border-left:150px solid #000; border-radius:50%; } div::before{ content:''; position:absolute; top:0; left:-75px; w

js+html+css贪吃蛇

目录 思路结果代码HTML部分CSS部分JavaScript部分 说明 思路 蛇拥有的行为: 能移动、吃食物、变长(加尾巴) 1、蛇身: 编写蛇头、蛇身 通过计时间隔向某方向移动 检测有没有吃到食物,吃到则加尾巴 判断碰撞(蛇吃食物) 2、食物: 编写食物 随机出现 通过计时间隔某时间段出现