![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
i_linda
记录自己学习的过程,给自己一个满满的动力
展开
-
CSS3 2D转换模块 菜单翻转效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>99-翻转菜单-综合练习</title> <style> *{ margin: 0; ...原创 2019-08-25 16:05:41 · 143 阅读 · 0 评论 -
css3新加模块 a标签伪类选择器 过渡模块 渐变 弹性 手风
a标签伪类选择器a:link选择器:修改从未被访问过的a标签样式。a:hover选择器:修改鼠标悬停在a标签上的样式。a:active选择器:修改链接被长按时的样式。a:visited选择器:修改已经被访问过的a标签样式。注意:若以上四个同时出现,则需要严格按照link,visited,hover,active的顺序从上到下出现(love,hate)。若其中两个同一个样式,...原创 2019-08-26 12:13:00 · 501 阅读 · 0 评论 -
CSS3 新增 动画模块_过渡 动画 往返动画
过渡移动<div></div>div{width: 100px; height: 50px;background-color: red;transition-property: margin-left;transition-duration: 3s; }div:hover{ margin-left: 500px; } ...原创 2019-08-26 12:13:24 · 1932 阅读 · 0 评论 -
CSS3 新增 2D转换模块 旋转 平移 缩放 形变中心点 旋转轴向 盒子阴影和字体阴影
<ul> <li>正常的</li> <li>旋转的</li> <li>平移的</li> <li>缩放的</li> <li>综合的</li></ul>ul li{ list-style: none; w...原创 2019-08-26 12:13:15 · 473 阅读 · 0 评论 -
CSS3 云层效果
<body><ul> <li></li> <li></li> <li></li></ul></body><style> *{ margin: 0; padding: 0...原创 2019-08-31 22:10:16 · 681 阅读 · 0 评论 -
CSS3 无限滚动
<div> <ul> //后面多加两个重复的是为了让循环一遍之后跳回原位置的时候不明显,一个假象的无限循环 //加两个是因为ul宽度为600,li宽度为300 <li><img src="images/banner1.png" alt=""></li> <li...原创 2019-09-01 09:43:42 · 270 阅读 · 0 评论 -
CSS3 3D转换模块
<div class="father"> <div class="son"></div></div> <style> *{ margin: 0; padding: 0; } .father{ width...原创 2019-09-01 10:18:05 · 116 阅读 · 0 评论 -
CSS3 3D转换模块-正方体,长方体
正方体1— 这个实现过程中,先平移后旋转,坐标轴不变<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li&...原创 2019-09-01 10:48:39 · 501 阅读 · 0 评论 -
CSS3 播放器 图片循环 复杂动画
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>111-3D播放器上</title> <style> *{ margin: 0; ...原创 2019-09-02 10:53:56 · 1091 阅读 · 0 评论 -
CSS3 多重背景图片
<div></div> <style> *{ margin: 0; padding: 0; } div{ width: 600px; height: 190px; border: 1p...原创 2019-09-02 11:17:55 · 2184 阅读 · 0 评论 -
CSS 定位
定位相对定位相对定位就是相对于自己以前在标准流中的位置来移动格式:position: relative;比如:.box2{background-color: green;position: relative;top: 20px;left: 20px; } ...原创 2019-08-26 12:12:45 · 198 阅读 · 0 评论 -
CSS 清除浮动
盒子高度问题在标准流中内容的高度可以撑起盒子的高度在浮动流中浮动元素内容的高不可以撑起盒子的高/*并设置相应的css样式,并设置p样式全部左浮*/<div class=’box1’><p>我是文字1</p><p>我是文字1</p><p>我是文字1</p></div><di...原创 2019-08-26 12:12:32 · 119 阅读 · 0 评论 -
CSS3 2D转换模块 照片墙
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>97-2D转换模块-相片墙</title> <style> *{ margin: 0; ...原创 2019-08-25 16:16:56 · 486 阅读 · 2 评论 -
CSS3 2D转换模块 图片x轴旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>96-2D转换模块-练习</title> <style> *{ margin: 0; ...原创 2019-08-25 16:20:50 · 1475 阅读 · 0 评论 -
CSS格式
<style type="text/css"> 标签名称{ 属性名称: 属性对应的值; ... }</style>注意点:·style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)·style标签中的type属性其实可以不用写, ...原创 2019-08-25 16:25:14 · 1815 阅读 · 0 评论 -
CSS选择器
标签选择器根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式:标签名称{属性:值;}注意点:标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签。标签选择器无论标签藏得多深都能选中id选择器格式:#id名称{ 属性:值;}注意点:同一个界面中id的名称是不可以重复的;编写id选择器时一定要在id名称前面加上#;id的名称只能由...原创 2019-08-25 16:29:00 · 217 阅读 · 0 评论 -
CSS三大特性
继承性层叠性优先级继承性<style> div{ color: red; }</style><div> <ul> <li> <p>我是段落</p> </li> ...原创 2019-08-25 17:21:28 · 178 阅读 · 0 评论 -
CSS显示模式
Div和Span标签div作用: 一般用于配合css完成网页的基本布局span作用: 一般用于配合css修改网页中的一些局部信息<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>div和span有什么区别?1.div会单独的占领一行,而span不会单独占...原创 2019-08-25 18:46:28 · 189 阅读 · 0 评论 -
CSS 背景和精灵图
背景相关属性背景颜色:在CSS中可以通过background-color:属性设置标签的背景颜色。背景图片:在CSS可以通过background-image: url();设置背景图片.box1{ background-image: url(images/girl.jpg);}背景平铺:在CSS中可以通过background-repeat属性控制背景图片的平铺方式的。属性值:re...原创 2019-08-25 18:56:46 · 303 阅读 · 0 评论 -
CSS 盒模型
边框属性border: 边框的宽度 边框的样式 边框的颜色;连写按上右下左的方向连写(分别设置四条边)示例:<style> .box{ width: 100px; height: 100px; background-color: red; border-top:5p...原创 2019-08-25 19:12:41 · 89 阅读 · 0 评论 -
CSS 浮动流
浮动流是一种"半脱离标准流"的排版方式浮动流只有一种排版方式, 就是水平排版,而且只能水平方向移动。它只能设置某个元素左对齐或者右对齐。浮动元素的脱标脱标: 脱离标准流,当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标<style> .box1{ float: left; ...原创 2019-08-25 19:17:49 · 140 阅读 · 0 评论 -
CSS3之Flex布局及应用实例
一、Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ //display: flex; //display: inline-flex; //行内元素也可以使用Flex布局。/*Webkit内核的浏览器,必须加上-webkit前缀。*/ display: -w...转载 2019-09-03 14:42:38 · 791 阅读 · 0 评论