Css学习
学习是一种习惯的养成
北冥有大鹏
当你把努力当成一种习惯,你会发现你所谓的迷茫不过是清醒的看着自己沉沦,不是看到希望才去坚持,而是坚持才看到希望
展开
-
Css3——3D两面翻转盒子案例
思路:html结构:box父盒子里面包含前后两个子盒子box是翻转的盒子 qian是前面的盒子,hou是后面的盒子css样式:box指定大小,添加3d呈现hou盒子要沿着Y轴旋转180度最后鼠标经过box沿着y轴旋转180度HTML:<div class="box"> <div class="qian">我是正面</div> <div class="hou">我是反面</div> </原创 2022-05-03 13:25:33 · 516 阅读 · 0 评论 -
Css3——3D转换
3D转换三维坐标系三维坐标系其实就是指的立体空间,立体空间是由3个轴共同组成的。x轴:水平向右 注意:x右边是正值,左边是负值y轴:垂直个向下 注意:y下面是正值,上面是负值z轴:垂直屏幕 注意:往外是正值,往里是负值3D移动 translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向translform:translateX (100px):仅仅是在x轴上移动translform:translateY (100px):仅仅是在y轴上移动tra原创 2022-05-03 12:50:06 · 329 阅读 · 0 评论 -
Css3——动画
一、动画是什么?动画是Css3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。二、动画的基本使用制作动画分为两步:1.先定义动画2.再使用(调用)动画注:1.0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。2.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。3.动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多原创 2022-05-02 20:53:16 · 121 阅读 · 0 评论 -
CSS3新增选择器
1.css3新增属性选择器属性选择器可以根据元素特定属性来选择元素。这样可以不用借助类或者id选择器注:类选择器,属性选择器,伪类选择器权重是10例:1.元素[属性]必须是input 但是同时具有value这个属性 选择这个元素HTML <input type="text" value="请输入用户名">Cssinput[value] { color: pink;}元素[属性=“值”]只选择type = text 文本框的input 选原创 2022-05-01 17:28:41 · 537 阅读 · 0 评论 -
HTML5+CSS3 Pink老师课后作业——购物模块
Html5+css3 Pink老师——购物模块思路先有一个div大盒子里面包含图片,标题,div小盒子,div小盒子,a标签链接代码:HTML:<body> <div class="shopping"> <img src="../img/pgsj.png" alt=""> <h5>Apple苹果iPhone 6 Plus(A1699)32G金色 移动联通电信4G手机</h5> &原创 2022-04-23 12:03:27 · 248 阅读 · 0 评论 -
CSS属性书写顺序
css属性书写顺序建议遵循以下顺序:1.布局定位属性:display/position/float/clear/visibility/overlflow(建议display第一个写)2.自身属性:width/height/margin/padding/border/background3.文本属性:color/font/text-decofation/text-align/vertical-align/white-space/break-word4.其他属性(css3):content/curso原创 2022-04-23 11:37:13 · 498 阅读 · 0 评论 -
常用的一些css样式
*{marign:0;padding:0;}margin:0;padding:0;的作用去除内外边距,Reset(重置)浏览器默认样式,网页中元素都有默认的margin 或padding值的,加上这句就可以删除浏览器这些默认值,方面后面的设置。line-height:;line-height:10px设置行高font-weight:;font-weight:400;设置文字的粗细normal: 默认值,不加粗 bold: 定义粗体,加粗 100-900:400等同于normal原创 2022-04-22 21:42:58 · 189 阅读 · 0 评论 -
css3——过渡
css3新特性过渡过渡动画:是从一个状态 渐渐的过渡到另外一个状态可以让我们的页面变的更美观,更动感十足注:现在经常与:hover一起搭配使用transition:要过渡的属性 花费的时间 运动曲线 何时开始1.要过渡的属性:想要变化的css属性,宽度,高度,背景颜色,内外边距都可以。如果想要所有的属性都变化,写一个all 就可以2.花费时间:单位是秒 (必须写单位)比如0.5s ,.5s等3.运动的曲线:默认是ease(可以省略不写)4.何时开始:单位是秒(必须写单位)可以设置延迟触发的原创 2022-04-22 17:02:08 · 63 阅读 · 0 评论 -
Emmet语法的使用
一、Emmet语法是什么?Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成了该语法。1.快速生成HTML结构语法1.生成标签,直接输入标签名,按下tab即可例如:输入div 后面直接tab2.如果想生成多个相同标签,加上就可以的例如:div33.如果有父子级关系的标签,可以用>例如:ul>li4.如果是兄弟关系的标签,用+就可以的例如:div+P5.如果有生成带有类名,或者id名字的,直接写例如:原创 2022-04-22 16:37:07 · 1597 阅读 · 0 评论 -
清除浮动的几种方法
一、为什么要清楚浮动?在开发中,父盒子很多情况下不方便给高度,但是子盒子浮动又不占有位置,最后父盒子高度为0时,就会影响下面标准流的盒子如果盒子本身有高度,则不需要清除浮动清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流清除浮动的本质:清除浮动的本质就是清除浮动元素造成的影响清除浮动的策略是:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子清除浮动的方法1.额外标签法2.父级添加overflow属性3.父级添加after伪元素4.原创 2022-04-22 16:20:36 · 328 阅读 · 0 评论 -
Css-遮罩层
遮罩层原理利用一个全屏、半透明的div遮住页面上其它元素<style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img {原创 2022-04-22 12:44:02 · 6437 阅读 · 0 评论 -
Css用户界面样式
什么是界面样式?界面样式就是更改一些用户操作样式,以便提高更好的用户体验1.更改用户的鼠标样式2.表单轮廓3.防止表单域拖拽鼠标样式li{cursor:属性值}属性值default 小白鼠标样式pointer 小手鼠标样式move 移动鼠标样式text 文本鼠标样式not-allowed 禁止鼠标样式轮廓线outline给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边框防止拖拽文本域resize实际开发中,我们文本域右下原创 2022-04-22 12:01:57 · 118 阅读 · 0 评论 -
字体图标iconfont的学习与使用
字体图标展示的是图标,本质是属于字体字体图标的优点轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少服务器的请求灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等兼容性:几乎支持所有的浏览器注:字体图标不能替代精灵技术,只是对工作中的图标部分技术的提升和优化结构复杂的还是需要使用精灵技术icomoon字体图标的使用方法1.字体图标的下载推荐下载:icomoon字库 http://icomoon.io阿里iconfont字库 ht原创 2022-04-22 11:31:38 · 1722 阅读 · 0 评论 -
Css中三角的写法
css三角形div{width:0;height:0;border-top:10px solid pink;border-right:10px solid red;border-bottom:10px solid blue;botder-left:10px solid green;}如果只要一个三角就只需要给一个三角颜色,其他颜色为透明即可div{width:0;height:0;/这个是为了兼容性写的/line-height:0;font-size:0;/三角的大小就原创 2022-04-16 12:21:56 · 559 阅读 · 3 评论 -
学习css精灵图(雪碧图)
精灵图为什么需要精灵图?减少服务器接受和发送请求的次数,提高页面的加载速度一个网页中有很多小的背景图像作修饰,当网页中的图像过多的时候,服务器就会频繁地接受和发送请求图片,造成服务器压力过大,降低页面的加载速度精灵图的使用1.精灵技术主要是针对小背景图片使用。就是把多个小背景图片整合到一张大图片中。2.这个大图片也称为sprites 精灵图或雪碧图3.移动背景图片位置,此时可以使用background-position4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同5.原创 2022-04-15 22:15:39 · 111 阅读 · 0 评论 -
元素的显示与隐藏
元素的显示与隐藏本质:让一个元素在页面中隐藏或者显示出来。1.display 显示隐藏display属性:display:none;隐藏对象display:block;显示对象 除了转换为块级元素,同时还有显示元素的意思display: 隐藏后,不在占用原来的位置2.visibility 显示隐藏visibility属性:visibility:visible;元素可视visibility:hidden;元素隐藏visibility隐藏元素后,继续占有原来的位置3.overflow 溢原创 2022-04-15 20:53:24 · 73 阅读 · 0 评论 -
css中定位的学习
为什么需要定位?因为有很多效果标准流和浮动是很难实现的,所以需要定位来实现1.浮动可以让块级盒子一行没有缝隙排列显示,经常用于横向排盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。定位组成:定位就是将盒子定在某一个位置,所以定位也是在摆放盒子位置。定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置边偏移就是定位盒子移动的最终位置。有top,bottom,left和right四个属性。相对定位原创 2022-04-13 22:23:44 · 124 阅读 · 0 评论 -
列表标签设计网页时的使用
Html 列表标签1.dl,dt,dd使用范围:带摘要的新闻列表,带缩略图和其他描述的产品列表等。dl:定义列表dt:定义标题dd:定义描述案例:HTML代码css代码2.ul,li创建无序列表html部分原创 2022-04-12 23:00:42 · 160 阅读 · 0 评论