CSS3
凌冰_
分享知识带给我的快乐!帮助他人就是帮助自己。
希望更多人能关注,来分享我的成果!
希望大家快快乐乐的学习,开开心心的畅游知识的海洋。
展开
-
CSS 实现鼠标悬停上弹出二级菜单动画显示(二)
效果:HMTL页面:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 去掉小黑点 */ ul{ list-style: none; } /* 隐藏 */ ul>li ul{ display: none.原创 2020-09-08 17:52:13 · 1493 阅读 · 0 评论 -
CSS 实现鼠标悬停上弹出二级菜单(一)
效果:HTML页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; display: flex; ..原创 2020-09-08 17:44:38 · 6569 阅读 · 0 评论 -
HTML5 页面缩放出现混乱
使用鼠标放大缩小页面时,就会出现页面混乱:解决:(1)使用百分比,可以兼容大部分浏览器,必须加一个相对定位!(2)使用响应式布局,可以使用框架哦! <link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>效果:...原创 2020-09-08 16:58:43 · 3748 阅读 · 0 评论 -
HTML5+CSS3 使用变形特效->模仿课工场
效果:页面<body> <div id="box"> <!--one--> <div class="teach"> <!--图片--> <div class="pic"> <img src="image/r3_jxyf_03.jpg" /> </div> <!--文字--> <div class="txt">原创 2020-09-04 17:03:59 · 152 阅读 · 0 评论 -
Flex 使用场景(一)
一、左右固定布局<style type="text/css"> .box{ display: flex; width: 500px; height: 300px; } .left{ width: 100px; background:lavender; } .right{ flex: 1; background: antiquewhite; } </style>原创 2020-07-22 11:30:46 · 838 阅读 · 0 评论 -
Flex 使用场景(二)
Flex 就是 容器 和 轴。容器包括外层的父容器和内层的子容器,轴包括 主轴 和 交叉轴,可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性(不含 display: flex),其中父容器、子容器各 6 个。不过常用的属性只有 4 个,父容器、子容器各 2 个设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用属性说明:父容器: -- justify-content 属性用于定义...原创 2020-07-22 10:46:41 · 296 阅读 · 0 评论 -
CSS3 伪元素:before 和 :after 选择器
<body> <p>Merry Christmas</p> <p>way to go</p> </body>:after 选择器在被选元素的内容后面插入内容。 p:after{ content: "-Yeay,OK!"; background: coral; font:bold 14px/25px; display: inline-block; }:befor..原创 2020-07-21 17:02:56 · 271 阅读 · 0 评论 -
CSS3 中的 box-sizing的使用
语法box-sizing:content-box | border-box默认值:content-box取值content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即width = border + padding + content widthheigth = border + padding + content heigth此属性表现为标准模式下的盒模.原创 2020-07-21 09:46:09 · 210 阅读 · 0 评论 -
CSS3 display:inline-block,block,inline的用法
display属性值,inline , block, inline-blockinline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 不能更改元素的height,width的值,大小由内容撑开. 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行. block(块级元素): 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素..原创 2020-07-20 17:21:44 · 240 阅读 · 0 评论 -
CSS 盒子模型的实际尺寸
代码: <style type="text/css"> div{ width: 50px; height: 50px; background: yellowgreen; } /*边框*/ .box02{ border: 50px solid black; } /*内边距*/ .box03{ border: 50px solid black; padding: 100px; } <..原创 2020-07-20 10:56:45 · 528 阅读 · 0 评论 -
CSS3 移动端rem
rem的值并不是固定的rem是相对根节点html发生变化的(和父节点无关) 实际开发中一般默认的把html根节点设置为10px(62.5%)或者是100px,方便后续计算;<head> <meta charset="UTF-8"> <title>视口标签</title> <meta name="viewport" co...原创 2019-04-03 15:46:13 · 388 阅读 · 0 评论 -
CSS3 移动端em
em是描述相对于当前对象内文本的字体尺寸,它是相对长度单位。一般浏览器字体大小默认为16px(em是继承父元素的字体) <meta charset="UTF-8"> <title>相对单位em</title> <meta name="viewport" content="width=device-width,...原创 2019-04-03 12:07:42 · 480 阅读 · 0 评论 -
CSS3 移动端em与rem区别
rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕。rem是根据html根节点来计算的,而em是继承父元素的字体。<head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,...原创 2019-04-03 11:39:46 · 499 阅读 · 0 评论 -
CSS3 背景图像的位置
一、background-origin 指定背景图像的位置区域二、background-clip指定绘图区的背景index.html div:nth-of-type(1){ width:100px; height:90px; padding:50px; border:30px dashed #000; /* 虚线 */ background原创 2017-04-07 15:11:48 · 485 阅读 · 0 评论 -
CSS3 背景
一、background-image属性设置一个元素的背景图像。 元素的背景是元素的总大小,包括填充和边界(但不包括边距)。 默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向二、background-size属性指定背景图片大小。index.html div{原创 2017-04-07 15:57:08 · 207 阅读 · 0 评论 -
CSS3 background-clip指定背景绘制区域
background-clip属性指定背景绘制区域index.htmldiv { width:20%; height:100px; margin:15px; background:#CF0; border:10px dotted #000; /* 点线 */ float:left;}div:nth-of-type(1){ padding:35px; /*内原创 2017-04-07 16:33:20 · 968 阅读 · 0 评论 -
CSS3 动画@keyframes
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。animation(动画) 属性index.htmldiv{ width:100px; height:100px; margin:30px; float: left; text-align:center; color:wh原创 2017-04-07 17:09:40 · 576 阅读 · 0 评论 -
CSS3 display属性的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex1 .container {2 display: flex;3 flex-direction: column;4 align-items: center;5 background-color: #b3d4db;6 }编译之后的效果很明显,界面的布局也很合理,看起来很清晰。那么...转载 2018-11-16 09:13:29 · 279 阅读 · 0 评论 -
CSS3 REM使用详解
在页面中设置字体,我们知道有常见的两种,px 和 em.px在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定义Web页面的字体。em一般都是body的f...转载 2018-11-16 08:50:02 · 236 阅读 · 0 评论 -
CSS3 高级选择器
高级选择器: 1>层次选择器 2>结构伪类选择器 3>属性选择器详细介绍这几个选择器: 层次选择器 页面:<body> <!--格式化代码:ctrl+shift+F--> <h2>兄弟</h2> <p>1</p> <!--原创 2019-01-11 17:01:54 · 998 阅读 · 0 评论 -
CSS3 box-shadow阴影效果详解
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果,每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0,将模糊值blur也设置为0,此时增加扩张半径,就会使元素的投影变为实线边框。这样就可以模拟多边框效果了,首先看下box-shadow语法和参数。http://www.runo...原创 2019-02-18 11:27:16 · 1447 阅读 · 0 评论 -
CSS3 制作网页动画
文档:http://www.runoob.com/cssref/css3-pr-transform.html一、CSS3变形: 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化; 语法:transform:[transform-function] *; 变形函数 trans...原创 2019-02-25 11:46:36 · 425 阅读 · 0 评论 -
CSS3 rem与px的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。我们知道,浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:| px | rem |------------------------| 12 | 12/16 = .75 || 14 | ...转载 2019-04-03 11:23:52 · 519 阅读 · 0 评论 -
CSS3 创建圆角边框及矩形添加阴影
一、nth-of-type(n) 第N个子元素二、border-radius 圆角三、box-shadow 阴影index.html页面 /* 圆角 */ div{ width:200px; height:100px; background:#F93; border:2px solid gray; /*原创 2017-04-07 11:29:30 · 3045 阅读 · 0 评论