前端
关注
分享
扫一扫
文章平均质量分 57
良风抚旧
这个作者很懒，什么都没留下…
展开
-
css3之元素的显示与隐藏
元素的显示与隐藏让一个元素在页面中隐藏或者显示出来，类似网站广告，点关闭时消失，刷新页面后会重新出现。display显示隐藏visibility显示隐藏overflow溢出显示隐藏display属性display属性设置一个元素应该如何显示。display: none; //隐藏对象display: block; //除了转换为块级元素以外，还有显示元素 的含义display隐藏的元素不再占有原来的位置。visibility属性visibility属性指定一个元素应该原创 2022-01-27 18:45:20 · 737 阅读 · 0 评论 -
css3之定位布局
定位布局css3浮动布局见：https://blog.csdn.net/Arcofcosmos/article/details/122625489?spm=1001.2014.3001.5502浮动通常是多个块级元素一行无缝隙横向排列，常用于横向排列盒子。定位是盒子自由地在某个盒子内移动或者固定到屏幕某个位置，且可以压住其它盒子。定位 = 定位模式 + 边偏移定位模式是指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置。position: relative //相对定位模式to原创 2022-01-27 15:35:30 · 650 阅读 · 0 评论 -
CSS网页布局的三种方式
网页布局三种方式普通流布局（标准流）标签按照默认方式排列。块级元素独占一行，从上到下顺序排列。如div,hr,p,h1~h6,ul,ol,dl,form,table行内元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。如span,a,i,em等。浮动布局https://blog.csdn.net/Arcofcosmos/article/details/122625520定位布局...原创 2022-01-21 17:10:37 · 1187 阅读 · 0 评论 -
CSS浮动布局特性
浮动布局浮动可以改变元素标签的默认排列方式。例如浮动可以让块级元素一行内排列显示。float属性用于创建浮动框，使用left或者right属性将浮动框移到一边，left往左移，right往右移，移动的位置是该浮动框的左边缘或右边缘抵达一个盒子边缘或者抵达另一个浮动框的边缘。优先依附在另一个浮动框的边缘。如果移动的这一边没有浮动框，那就移动到盒子边缘，例如父类盒子的边缘。选择器 { float: 属性值;}属性值有：none //元素不浮动，默认值left //元素向左浮动right原创 2022-01-21 17:09:45 · 671 阅读 · 0 评论 -
CSS清除浮动，父元素盒子自适应调整高度
浮动的特性：https://editor.csdn.net/md?not_checkout=1&articleId=122625520清除浮动很多情况下，子盒子可能不断增加，父级盒子不方便给出固定高度，但是子盒子若浮动时就会不占有位置，导致父盒子的高度为0，影响下面的标准流盒子的布局。清除浮动的本质就是清除浮动元素造成的影响，若父级盒子本身有高度，则不需要清除浮动。清除浮动后，父级就会根据浮动的子盒子自动检测高度，当子元素增加后父级盒子也会随之拓展，父级有高度后就不会对下面的标准流盒子布局原创 2022-01-21 17:08:58 · 989 阅读 · 0 评论 -
CSS标签元素生成阴影
盒子阴影box-shadow: h-shadow v-shadow blur spread color inset;box-shadow: 10px 10px 10px 10px black; h-shadow //必需有。水平阴影的位置，可以为负值。v-shadow //必须有。垂直阴影的位置，可以为负值。blur //可选。模糊距离，即模糊程度。spread //可选。阴影的尺寸colo原创 2022-01-21 17:03:39 · 621 阅读 · 0 评论 -
CSS盒子圆角边框
盒子圆角边框border-radius: length;border-radius: 10px;border-radius: 50%; //设置半径为宽度的一半border-radius: 10px 20px 30px 40px; //顺时针设置四个角的圆半径border-radius: 10px 20px; //设置左上右下为10px，右上左下为20pxborder-top-left-radius: length; //单独设置左上角border-top-r原创 2022-01-21 17:02:25 · 1288 阅读 · 0 评论 -
CSS网页盒子
网页盒子的组成部分css中元素基本都可看做一个盒子，如div,p等标签都是盒子一个盒子由以下几部分组成：border边框content内容padding内边距 //即边框与内容之间的距离margin外边距 //边框与其它盒子边框之间的距离border边框属性border-width: 5px; //边框宽度border-style: dotted;原创 2022-01-20 18:21:05 · 1016 阅读 · 0 评论 -
CSS三大特性
CSS三大特性层叠性相同的选择器设置相同的样式属性，其中一个样式会覆盖另外一个。//同一div选择器，pink属性值离<body>最近，则red值被覆盖，font-size样式未冲突，则执行有效<style> div { color: red; font-size: 17px; } div { color: pink; }</style><body> <div></div></body>原创 2022-01-20 18:18:56 · 236 阅读 · 0 评论 -
CSS背景属性
CSS的背景背景颜色background-color: transparent | rgb(0,0,0) | bgra(255,255,255,0.5)transparent为默认值，即透明。bgra中最后一个值为alpha不透明度，在0~1之间，通常可以将0.5写为.5设置透明度时盒子中的其它属性如文字图片不受影响。背景图片background-image属性描述元素的背景图像。常用于logo或一些装饰小图片或者超大背景图。方便控制位置。background-image: none |原创 2022-01-19 17:24:43 · 276 阅读 · 0 评论 -
CSS文本属性
字体属性字体样式选择器 { font-family: Arial,"Microsoft Yahei","微软雅黑";}采用多个字体则优先使用第一个，当第一个字体不存在时依次选择后面的字体。中文字体名和空格相隔的字体名使用单引号或者双引号包括。字体大小font-size: 20px;标题标签的字体大小需要单独指定。尽量指定明确字体大小，不同浏览器默认字体大小不同。字体粗细font-weight: 400;属性有：normal : 正常字体，相当于number为400bol原创 2022-01-19 17:22:34 · 672 阅读 · 0 评论 -
CSS的元素显示模式（块级元素，行内元素，行内块元素显示特点）
CSS的元素显示模式css基础知识：https://blog.csdn.net/Arcofcosmos/article/details/122561105css复合选择器https://blog.csdn.net/Arcofcosmos/article/details/122581153?spm=1001.2014.3001.5502块元素常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<l原创 2022-01-19 16:03:42 · 999 阅读 · 0 评论 -
前端Emmet语法
Emmet语法Emmet语法能够利用缩写快速生成html以及css语法结构，大大提高写代码的效率。vscode中快速生成HTML语法1.生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<dⅳ></diⅳ>2.如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div3.如果有父子级关系的标签，可以用>比如ul>li就可以了4.如果有兄弟关系的标签，用+就可以了比如div+p5.如果生成带有类名或者id名字的，直接写标签原创 2022-01-19 15:03:34 · 428 阅读 · 0 评论 -
CSS复合选择器
CSS基础属性以及基础选择器见：https://blog.csdn.net/Arcofcosmos/article/details/122561105复合选择器建立在基础选择器的基础之上，对多个基本选择器进行不同方式组合形成的。后代选择器（包含选择器）选择父元素中的所有子元素，外层标签写在前，内层标签写在后，空格隔开。子元素可以被多次嵌套过，也可以是孙子后代。后代选择器可以被随意组合，父元素可以采用类选择器的形式。元素1 元素2 {}ol li {color: red;}ol a {colo原创 2022-01-19 14:58:18 · 405 阅读 · 0 评论 -
CSS基础选择器及基础知识
</html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.原创 2022-01-18 15:27:24 · 356 阅读 · 0 评论 -
HTML5常用标签
主题结构<!DOCTYPE html> //不属于html标签，为文档声明标签，在第一行，告诉浏览器html版本为html5<html lang="en"> //开头，语言为英语，"zh-CN"表示中文，但是可以都显示<head> //网页头部 <meta charset="UTF-8"> //表示字符集种类为UTF-8编码 <meta http-equiv="X-UA-Compatible" content="原创 2022-01-18 15:24:49 · 553 阅读 · 0 评论