CSS样式
文章平均质量分 70
DangR-Jisoo
Web Sport Cook Music History
展开
-
详解HTML5语义化标签
HTML5语义化标签<header>头部标签<nav>导航标签<article>内容标签<section>块级标签<aside>侧边栏标签<footer>尾部标签注意:语义化标签主要针对于搜索引擎新标签在页面中可以使用多次IE9中,需要把这些元素转换为块级元素移动端使用这些标签较多header, nav, article, secti原创 2020-11-25 11:58:11 · 301 阅读 · 0 评论 -
CSS3设置动画效果
CSS3设置动画效果制作动画分为两步:先定义动画用keyframes定义动画@keyframes 动画名称{ 0%{ width:100px; } 100%{ width:200px; } }0%是动画的开始,100%是动画的完成,当然也可以设置多个动画过程,比如原创 2020-11-25 11:53:08 · 126 阅读 · 0 评论 -
CSS3盒子模型
CSS3盒子模型在之前学习的CSS中,给盒子设置的内边距与边框最终会影响盒子的大小div { width: 200px; height: 200px; background-color: aqua; border: 20px solid red; padding: 50px; } <div></div>在上述代码中,我们给div盒子设置的是宽和高各200原创 2020-11-25 11:37:22 · 156 阅读 · 0 评论 -
CSS3——3D转换
CSS3——3D转换首先来看什么是3D:3D效果是元素分别在X轴,Y轴,Z轴呈现,转变3D呈现transform-style用来控制子元素是否开启三维立体环境transform-style:flat; 不开启,默认transform-style:preserve-3d; 开启代码写给父级,但影响子盒子3D透视(perspective)如果想要在网页中产生3D效果需要透视透视写在被观察元素的父盒子之上单位是px,数值越小,3D效果越明显3D位移transform:tran原创 2020-11-25 11:10:51 · 177 阅读 · 0 评论 -
CSS3——2D转换
CSS3——2D转换2D转换transform可以实现元素的位移(translate),旋转(rotate),缩放(scale)等效果位移transform:translate(x,y)一起写transform:translateX(n)分开写transform:translateY(n)分开写若参数的单位是百分比,则是以盒子和高度和宽度来作为参考点的,也可以以px为单位优点:不会影响到其他元素缺点:对行内标签没有效果img { width: 200px;原创 2020-11-24 23:27:41 · 194 阅读 · 0 评论 -
用CSS属性设置三角效果
用CSS属性设置三角效果先看效果图代码如下:.box1 { position: absolute; top: -16px; right: 20px; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: pink; }原创 2020-11-24 20:10:24 · 138 阅读 · 0 评论 -
利用绝对定位使盒子居中
利用绝对定位使盒子居中若想设置水平居中:1.元素先设置绝对定位,把left设置成50%2.然后把margin-left设置成盒子宽度的一半.Mbox { position: relative; left: 50%; margin-left: -100px; width: 200px; height: 200px; background-color: pink原创 2020-11-24 20:04:42 · 373 阅读 · 0 评论 -
外边距+内边距+边框详解
外边距+内边距+边框详解外边距(margin)margin可以设置盒子和盒子之间的距离若想要盒子水平居中,则必须满足两个条件:(1).盒子必须设置宽度(2).让左右外边距为auto(margin: 10px auto)若想要让行内元素或行内块元素水平居中,则只需要给其父元素添加text-align:center;即可有关外边距最经典的问题就是嵌套块元素垂直外边距的塌陷.father { width: 400px; height: 400原创 2020-11-24 19:56:07 · 1251 阅读 · 0 评论 -
浮动的7大特性
浮动的特性浮动的元素会脱离标准流<style> * { margin: 0; padding: 0; } .box1 { width: 500px; margin: 100px auto; border: 10px solid red; } .box2 { /* fl原创 2020-11-24 19:35:20 · 346 阅读 · 0 评论 -
定位的特殊属性
定位的特殊属性行内元素添加绝对定位或固定定位,可直接设置宽高,不用设置display:inline-block转换成行内块元素之后再设置宽高块级元素添加绝对定位或固定定位,若没有给宽高,则默认宽高是元素内容的大小在不设置块级元素的宽高,也不设置定位时,元素的宽度默认和父元素一样宽,高度就是元素撑开盒子的高度,但是设置定位之后,在不设置宽度高度的情况下,元素的宽度和高度就是撑开元素的高度和宽度脱标的盒子(浮动,绝对定位,固定定位)不会触发外边距的塌陷只有定位的元素才有z-index属性...原创 2020-11-24 18:19:07 · 159 阅读 · 0 评论 -
定位全解(绝对,相对,固定,粘性定位)
定位全解(绝对,相对,固定,粘性定位)一. 绝对定位(position: absolute)绝对定位是元素在移动的时候,相对于其父亲来说的(拼爹型),若无父元素,按其祖先元素,如其父元素或祖先元素无定位,则以浏览器为主元素设置绝对定位后,不再占有原来的位置,其他的元素会涌上来,而且设置绝对定位会压住下面的标准流<style> * { margin: 0; padding: 0; }原创 2020-11-24 18:08:52 · 1559 阅读 · 0 评论 -
表格常用属性
表格常用属性table{ border-collapse: collapse; width: 500px; height: 200px; text-align: center;}table td { border: 1px solid red;}属性含义border-collapse: collapse合并相邻的边框width设置宽度height设置高度text-align设置表格的内容对齐方原创 2020-11-24 17:41:48 · 373 阅读 · 0 评论 -
取消<input>与<textarea>默认属性outline和resize
取消与默认属性在我们点击文本框<input>时,文本框默认边框会加黑加粗,影响了视觉效果,我们可以使用outline:none属性来取消默认样式未设置outline:none属性之前的效果如下图所示:鼠标未聚焦之前:鼠标聚焦之后:很清楚的发现轮廓加粗加黑了,使文本框变得很不美观但是加了outline:none属性之后,文本框样式与没有聚焦一样input{ outline: none}2. 我们在页面写入一个文本域时,文本域的大小可以随意用鼠标拖动来设置大小,一般情原创 2020-11-24 17:08:03 · 1683 阅读 · 0 评论 -
表单相关属性(详解)
表单相关属性(详解)一. 表单组成元素:表单=表单标签+表单元素(表单域)+表单按钮表单标签<form action='http://127.0.0.1:8000/' method='post' name='form1'></form>功能:用于申明表单,定义采集数据的范围,也就是和里面包含的数据将被提交到服务器或者电子邮件里action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址method=get或post指明提交原创 2020-11-24 16:45:58 · 1652 阅读 · 1 评论 -
背景图片的设置(详解)
背景图片背景图片主要有以下几个属性:background-imagebackground-image: url('播放按钮.png');background-repeatbackground-repeat: no-repeat;background-positionbackground-position: center top;background-attachmentbackground-attachment: scroll;background-image原创 2020-11-22 12:44:45 · 1501 阅读 · 0 评论