CSS3
文章平均质量分 53
个人学习css笔记含cs3
407指导员
世事漫随流水,算来一梦浮生。
展开
-
flex其他属性
子元素设置伸缩比例flex属性flex-basis一但设定每个子元素的width就会失效。既可以设置px,也可以设置% 或rem格式 <style> #div0 { display: flex; width: 400px; height: 500px; background-color: violet; } #div0 div {原创 2021-03-21 16:02:46 · 172 阅读 · 0 评论 -
Flex弹性布局
Flex弹性布局元素沿着哪个方向排列,哪个方向就是主轴。另外一个就是交叉轴,并不是x轴就是主轴,y轴就是交叉轴。四个顶点分别是主轴/交叉轴的开始和结束。还有一个主轴和交叉轴的交叉点中间就是每个item,mian size和cross size不要理解为宽高,分别是占主轴和交叉轴的空间,主轴和交叉不是固定的沿着主轴方向就是主轴空间,反之就是交叉轴空间flex-direction属性如果父级div宽度不够,子div设置了宽度,flex布局会自动的压缩每个子div,比如父级300px宽度,子d原创 2021-03-20 18:23:51 · 224 阅读 · 0 评论 -
媒体查询
媒体查询为不同的尺寸的屏幕设定不同的css样式,主要用于移动端@media常见参数width/height浏览器可视宽度和高度 <style> #div0 { width: 200px; height: 200px; } /* screen代表屏幕的意思 加device代表设备 不加代表浏览器 */ @media screen and (min-width:500px原创 2021-03-19 19:22:41 · 132 阅读 · 0 评论 -
模仿努比亚网站三(内容区域)
模仿努比亚网站三(内容区域)/*内容区域*/.content { height: 1883px; width: 100%;}.content > dl { width: 1200px; height: 100%; margin: 0 auto; overflow: hidden;}/*设置标题*/.content > dl > dt { text-align: center; margin-top: 40px原创 2020-12-06 20:31:10 · 222 阅读 · 0 评论 -
模仿努比亚网站二(广告区域)
/*广告区域*/.banner { height: 860px; width: 100%;}/*设置nav外侧盒子*/.banner .nav_out { width: 100%; height: 121px; position: absolute; /*增大z-index值,显示在最上边*/ z-index: 998; background-color: white;}/*广告区域顶部*/.banner .nav { .原创 2020-12-06 00:51:17 · 220 阅读 · 0 评论 -
模仿努比亚网站(顶部完成)
模仿努比亚网站(顶部)流程1.创建站点文件夹,子文件夹尽量不要用中文。2.重置所有的默认样式和设置一些全局样式,并且将设置样式的css文件和相应的页面关联起来。(全局样式通过观察页面字体颜色风格设置)3.整个页面切割成不同部分,再依次切分。/*顶部区域*/.top { height: 60px; width: 100%; background-color: black;}/*顶部核心区域*/.top .top_in { width: 1200px;原创 2020-12-05 17:03:14 · 443 阅读 · 1 评论 -
css多种书写格式
css多种书写格式行内样式代码直接写在标签内部<!--书写css第一种方式,行内样式--><div style="color: red">css第一种书写格式</div>内联样式在head标签之间加上一对style标签,在其中编写css代码<style> /*书写css代码的第二中方式,内联样式*/ div:nth-child(2) { color: skyblue; }</style>原创 2020-12-04 17:52:06 · 559 阅读 · 0 评论 -
多重背景图片(background属性缩写)
多重背景图片格式background: url("images/animal1.png") no-repeat,url("images/animal2.png") no-repeat;加入定位属性分开图片background: url("images/animal1.png") right top no-repeat ,url("images/animal2.png") left top no-repeat ;注意点:1.多张背景图片之间用逗号隔开即可。2。先添加的背景图片会盖住后添原创 2020-12-04 17:00:29 · 714 阅读 · 0 评论 -
CSS3 background-clip 属性
CSS3 background-clip 属性属性规定背景的绘制区域从何处开始。语法background-clip: border-box|padding-box|content-box;值描述border-box背景被裁剪到边框盒,默认取值。padding-box背景被裁剪到内边距框。content-box背景被裁剪到内容框。<!DOCTYPE html><html lang="en"><head> &l原创 2020-12-04 16:11:01 · 311 阅读 · 0 评论 -
CSS3 background-origin 属性
CSS3 background-origin 属性background-origin 属性规定 background-position 属性相对于什么位置来定位。语法background-origin: padding-box|border-box|content-box;值描述padding-box背景图像相对于内边距框来定位。border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。<!DOCTYPE h原创 2020-12-03 23:48:22 · 276 阅读 · 0 评论 -
3d音乐播放器(含背景音乐/audio/3d动画模块/opcitty/background-size)
3d播放器首先解决火狐不允许自动播放权限问题。谷歌据说不能直接自动播放,需要用户介入。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D播放器</title> <style> * { margin: 0; padding: 0;原创 2020-12-03 01:13:20 · 301 阅读 · 0 评论 -
3D模块练习轮播图
3D模块练习轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>长方体</title> <style> * { margin: 0; padding: 0; } /*增加进大远小的效果*/ bod原创 2020-12-02 20:58:57 · 138 阅读 · 0 评论 -
正方体二及个人总结
正方体二之前学了,元素旋转后,其坐标轴也会随着旋转。1这个面旋转效果图,方便理解。2这个面旋转效果图3这个面旋转效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方体终极方案</title> <style> * { margin: 0;原创 2020-12-02 16:36:20 · 181 阅读 · 0 评论 -
正方体一(3D转化模型)
正方体一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方体</title> <style> * { margin: 0; padding: 0; } /*六个面叠加起来,子绝父相*/ ul {原创 2020-12-02 01:17:47 · 725 阅读 · 0 评论 -
CSS3 transform-style 属性(3d转换模块)
3d转换模块CSS3 transform-style 属性默认情况下元素都是2D呈现的。通过该属性可以可以让元素呈现3Dtransform-style: flat|preserve-3d;flat默认取值为2Dpreserve-3d取值为3D注意点transform-style和perspective属性都是设置到父元素中其子元素获得3D效果和透视属性,而不是其本身。<!DOCTYPE html><html lang="en"><head>原创 2020-12-01 23:52:06 · 531 阅读 · 0 评论 -
无限滚动练习(纯css)
无限滚动练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限滚动练习</title> <style> * { margin: 0; padding: 0; } /*ul不够宽浮动只能并排放两张图片,所以直接增原创 2020-12-01 19:54:12 · 259 阅读 · 0 评论 -
云层动画练习
云层动画练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>云层动画练习</title> <style> * { margin: 0; padding: 0; } /*子绝父相,让三张背景图片重叠*/原创 2020-11-30 17:11:04 · 266 阅读 · 0 评论 -
动画模块其他属性下( animation-fill-mode 属性、连写格式)
动画模块其他属性下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>其他属性下</title> <style> * { margin: 0; padding: 0; } .box1 { wi原创 2020-11-29 22:20:59 · 522 阅读 · 0 评论 -
动画模块其他属性上
动画模块其他属性上animation-delay 属性设置动画延时和过度模块中的transition-delay一样。但是其允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画,给人以已经执行了两秒的动画的感觉。animation-timing-function 属性设置动画执行速率和过度模块中的transition-timing-function一样。详细的可以看过度模块其他属性里的图片animation-iteration-count 属性(动画模块独有)定义动画的播放次数。a原创 2020-11-29 21:05:42 · 114 阅读 · 0 评论 -
初识CSS3之动画模块
CSS3之动画模块与过度模块之间的区别不同点过度模块必须人为触发才会执行动画动画模块不需要人为触发就可以执行的动画相同点过度模块和动画模块都是用来给元素添加动画的过度和动画模块都是系统新增的属性过度和动画模块都需要满足三要素才会有动画效果动画模块三要素CSS3 animation-name 属性1.告诉系统需要执行哪个动画。animation-name: lnj;@keyframes 规则值描述animationname必需。定义动画的名称。keyf原创 2020-11-29 19:54:39 · 127 阅读 · 0 评论 -
综合练习二级菜单(纯css之前有js的)
综合练习二级菜单CSS3 opacity 属性设置元素透明度。取值从 0.0 (完全透明)到 1.0(完全不透明)。之前使用js模拟过二级菜单的动画效果很是麻烦,现在css3中自带的过度模块和翻转模块很大的方便了我们。纯css写二级菜单动画效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>翻转菜单</title>原创 2020-11-29 01:28:34 · 273 阅读 · 0 评论 -
盒子阴影和文字阴影( box-shadow / text-shadow )
盒子阴影和文字阴影box-shadow 属性属性向框添加一个或多个阴影。格式box-shadow: h-shadow v-shadow blur spread color inset;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。inset可选。将外部阴影 (outset)原创 2020-11-28 23:48:04 · 378 阅读 · 0 评论 -
照片墙(transform/transition/z-index)
照片墙<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>照片墙</title> <style> * { margin: 0; padding: 0; } ul { height: 400px原创 2020-11-28 21:46:23 · 1978 阅读 · 3 评论 -
练习(结合过度模块、形变中心点、透视属性)
2D模块旋转轴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转的轴向</title> <style> * { padding: 0; margin: 0; } ul { width:原创 2020-11-28 19:19:11 · 115 阅读 · 0 评论 -
2D转换模块-形变中心/transform-origin 属性
2D转换模块-形变中心<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>形变中心点</title> <style> * { margin: 0; padding: 0; } ul { wid原创 2020-11-24 23:59:21 · 193 阅读 · 0 评论 -
CSS3之2D转换模块
CSS3之2D转换模块通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。主要学习以下五个方法:translate()rotate()scale()skew()matrix()translate() 方法通过 translate()原创 2020-11-24 21:31:24 · 282 阅读 · 0 评论 -
过渡模块练习二之手风琴效果
过渡模块练习二之手风琴效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴效果</title> <style> * { margin: 0; padding: 0; } ul { wi原创 2020-11-24 19:56:40 · 84 阅读 · 0 评论 -
过度模块弹性练习一
过度模块弹性练习一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性效果</title> <style> * { margin: 0; padding: 0; } div { height原创 2020-11-24 19:10:06 · 73 阅读 · 0 评论 -
过度模块其他属性和连写方式
过度模块其他属性transition-delay 属性规定过渡效果何时开始。值以秒或毫秒计。transition-delay: time;Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。Safari 支持替代的 -webkit-transition-delay 属性。Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。transition-timing原创 2020-11-23 23:17:06 · 199 阅读 · 0 评论 -
CSS3三大模块之过度模块初步了解
CSS3三大模块之过度模块通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。过度三要素1.必须要有属性发生变化2.必须告诉浏览器哪个属性需要执行过度效果(ransition-property 属性)3.必须告诉系统过度效果持续时长。(transition-duration 属性)transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)原创 2020-11-19 22:58:54 · 202 阅读 · 0 评论 -
a标签伪类选择器练习(a标签导航栏)
a标签伪类选择器练习模拟导航栏,悬停修改背景/字体颜色,长按改变字体颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>a标签伪类选择器练习</title> <style> * { padding: 0; margin: 0;原创 2020-11-19 21:44:53 · 457 阅读 · 0 评论 -
a标签的伪类选择器
a标签的伪类选择器a标签存在的状态1.默认状态,未被点击过2.被访问过状态3.鼠标长按状态4.鼠标悬停的状态什么是a标签的伪类选择器a标签的伪类选择器是专门用来修改a标签不同状态的样式的格式修改从未被访问过状态下的样式a:link { color: salmon;}这个html中你只要点过,就会被记录,刷新也没用。左边两个被访问过,右边并没有。修改被访问过的样式。a:visited { color: green;}修改长按状态下的样式。a:act原创 2020-11-19 17:45:47 · 891 阅读 · 0 评论 -
定位流之 z-index 属性
z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认情况下所有的元素都有一个默认的z-index属性,值为0Z-index 仅能在定位元素上奏效(例如 position:absolute;)!元素可拥有负的 z-index 属性值。该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。任何的版本的 Internet Explorer (包括 IE8)都不支原创 2020-11-19 16:38:03 · 562 阅读 · 0 评论 -
新浪首页练习
新浪首页练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新浪首页练习</title> <style> * { margin: 0; padding: 0; } .nav { /*与浏原创 2020-11-17 00:57:05 · 987 阅读 · 0 评论 -
定位流之固定定位
定位流之固定定位和之前学习的背景关联方式很像背景关联方式background-attachment: fixed;可以使背景图片不随滚轮滚动而滚动。固定定位可以让某个盒子不随滚动条滚动而滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>固定定位</title> <style> * {原创 2020-11-17 00:21:06 · 169 阅读 · 0 评论 -
定位练习焦点图
定位练习焦点图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位练习焦点图</title> <style> * { margin: 0; padding: 0; } div { widt原创 2020-11-16 22:48:32 · 658 阅读 · 0 评论 -
定位练习之团购界面
定位练习之团购界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>团购页面练习 </title> <style> * { margin: 0; padding: 0; } div { w原创 2020-11-16 21:15:16 · 1466 阅读 · 0 评论 -
定位流之绝对定位
定位流之绝对定位什么是绝对定位相对于body/最近定位流祖先进行定位。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位流之绝对定位</title> <style> * { margin: 0; padding: 0; }原创 2020-11-16 20:00:25 · 539 阅读 · 0 评论 -
定位流之相对定位
定位流定位流分类1.相对定位2.绝对定位3.固定定位4.静态定位什么是相对定位相对定位就是相对于自己以前在标准流中的位置来移动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位流</title> <style> * { margin: 0;原创 2020-11-16 00:41:41 · 600 阅读 · 0 评论 -
网易注册页面模仿练习
网易注册页面模仿<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易注册页面的构建</title> <style> /*1清空默认边距*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,原创 2020-11-14 23:59:18 · 281 阅读 · 0 评论