首页 > TAG信息列表 > 50px
HTML |在 div 内居中对齐 div
HTML |在 div 内居中对齐 div 1]使用Transform和Translate将Div垂直和水平居中 首先，设置 位置 父元素的属性 相对的 . 接下来，设置子元素的 位置 财产 绝对 , 最佳 至 50% ， 和 剩下 至 50% . 最后，使用 变换：翻译（-50%，-50%） 真正使子元素居中： .parent_div { 字体大小：24px； 边HTML |在 div 内居中对齐 div
HTML |在 div 内居中对齐 div 1]使用Transform和Translate将Div垂直和水平居中 首先，设置 位置 父元素的属性 相对的 . 接下来，设置子元素的 位置 财产 绝对 , 最佳 至 50% ， 和 剩下 至 50% . 最后，使用 变换：翻译（-50%，-50%） 真正使子元素居中： .parent_div { 字体大小：24px； 边fixed
CSS .mobile{ position:fixed; bottom:20px; right:20px; width:50px; height:50px; background-size:cover; z-index:999; background:darkblue; border-radius:50%; padding:8px; opacity:0.6; } HTML <a class="mobile" href="tel:xxxxxxxxx[心情] 解放CSS 单行transform，分离scale, translate 和rotate 吧！
[心情] 解放CSS 单行transform，分离scale, translate 和rotate 吧！ 定期都有在关注Youtube Web Dev Simplified 的介绍前端新讯的影片，虽然很早就知道有一般拆解Transform 属性，变成scale, rotate … 的功能，但如今看到如此的支援度，还是令人雀跃不已。 资料传送门 影片： https://www.yo巧用 transition 实现短视频 APP 点赞动画
在各种短视频界面上，我们经常会看到类似这样的点赞动画： 非常的有意思，有意思的交互会让用户更愿意进行互动。 那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？那当然是必须的，本文，就将巧妙的借助 transition，仅仅使用 CSS 完成这么一个点赞动画。 实现不同表情的不断上升 如果使18 边框阴影动画
当鼠标穿过展示动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style type="text/css"> .shadow{ margin: 50px auto; position: relative; width: 200px; heighBorder-radius
探讨一下复杂圆角的书写 Border-radius：50px 0 0 0/50px 0 0 0 “/ ”之前的横轴 之后的纵轴 每一个横轴或者纵轴的数字 从前往后 代表 左上角 右上角 右下角 左下角 .box7{ width: 100px; height: 100px; background-color: pink;CSS画三角形，圆形，椭圆，圆角长方形
1、CSS画一个三角形：（div宽高为0，border存在且颜色不一） step1: 设置宽度，高度为 0 的一个div盒子； step2: 为了方便理解，将盒子的 4 个边框分别设置一样的宽度boder，不同的颜色； step3: transparent将其他三个 边框隐藏掉，就能看到效果了。 如果对三角形的样式有特殊要求： 可CSS画几何图
如何画直角梯形、等腰梯形？ 首先先试一下，下面这段代码 <div class="box"></div> .box{ width: 100px; height: 100px; border-top: 50px solid orange; border-left: 50px solid blue; border-right: 50px soli选择器分组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器分组</title> <style> /* 选择器分组 作用：可以同时为多个选择器设置相同的样式 语法：选择器1，选择每周学习总结一
一、css3的三角形画法（一）、原理通过对于边框的设置，来画出三角形。 width: 50px; height: 50px; border-bottom: 50px red solid; border-top: 50px green solid; border-left: 50px yellow solid; border-right: 50px blue solid; 当设置盒子的宽高为0时，就是由四个三角形维成的一网页设计_导航条
网页设计，很多时候会用到导航条，如何制作一个简单的导航条呢？ 步骤如下： 1.导航条html代码： <!-- 新导航条 --> <div class="tnav"> <div class="tnav_c"> <ul> <li><a href="#">CSS实现各种形状与画图工具Graphics2D画形状的关系
CSS实现各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效微信小程序——悬浮窗拖动
使用 movable-area movable-view 官方文档 代码 direction="all"属性必不可缺 wxml <movable-area class="all"> <movable-view direction="all" class="touchmove"> <!-- <image src='../images/icon_component_HL.p99-100 css填充案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="背景动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=Web前端学习第五天——————HTML、CSS篇.020元素的不同类型
网页效果 总结 .container .subject a{ text-decoration: none; background-color: #045899; color: white; font-size: 12px; width: 150px; height: 50px; line-height: 50px; display:block; margin: 0 auto 20px; }：a创意卡片设计（纯css）
效果展示： 这个案例比较简单： 就先分析一下这个结构吧： 值得一提的是，这个案例中的文字段落是使用lorem功能自动生成的，关于lorem功能的介绍参考这篇文章。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c内置函数中的自定义属性，如 `rgba()` 抛出错误
Error evaluating function `rgba`: color functions take numbers as parameters 示例代码： .box-1 { width: 50px; height: 50px; margin-bottom: 30px; background: rgba(@primaryColor, 1); border: 5px solid skyblue; } :roots { --co多倍图
@目录1. 物理像素&物理像素比2. 多倍图物理像素比所导致的问题解决方案3. 多倍图切图 cutterman4. 多倍精灵图的做法 1. 物理像素&物理像素比 物理像素指的是屏幕分辨率，物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750*133CSS基础 实战案例 模拟小米官方导航栏
效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 手机</a></li> <li><a href="#">电视</a></li>CSS——正方体360°旋转动画 效果
先看效果： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" contentcss3+html画五星红旗
半个，还差一点，但是我懒 用边框写的，绝对定位，然后写好一个，其他的写旋转缩放去网页调整到合适位置 <style> { margin: 0; padding: 0; } section { width: 600px; height: 400px; backgrouCSS外边距margin
CSS外边距margin CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 所有的CSS边距属性 属性描述margin简写属性。在一个声明中学习html的第二天（计算器）
做一个简单地计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算机</title> <style> input{width: 50px;height: 50px; font-size: 26px; color: green; background-color: yellow;} .w{width: