
一、前端web
记录html+css+h5+c3
心动の弟弟
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS3d转换
参考参考参考参考主要知识点3D位移: translate3d(x,y,z)2.3D旋转: rotate3d(x,y,z)透视: perspective3D呈现 transfrom-style元素旋转方向的判断【左手法则】3d呈现 transform-style控制子元素是否开启三维立体环境。。transform-style: flat 子元素不开启3d立体空间 默认的transform-style: preserve-3d; 子元素开启立体空间代码写给父级,但是影响的是子原创 2022-03-03 06:58:43 · 162 阅读 · 0 评论 -
css3动画
参考Animation 入门详解css效果案例原创 2022-03-02 15:21:43 · 131 阅读 · 0 评论 -
转换详解记录
参考参考参考总结汇总: 1. 在这里插入代码片原创 2022-03-02 14:30:08 · 59 阅读 · 0 评论 -
结构伪类选择器细节
ul li:nth-child(2)的执行流程 1. 浏览器先找到ul 2. 对ul里面的所有子元素进行排序(从1开始)【ul的子元素可能会有其他标签,无论ul的第一个子元素标签是啥,序号都是1 】 3. 找到ul子元素中序号是2的元素 进行匹配是否为li 如果是则匹配成功 如果不是 则匹配失败div li :nth-of-type(2)的执行流程 1. 浏览器找到div里面的所有li元素 2. 对找到的li元素从1标号 3. 匹配li元素标号为2的...原创 2022-03-02 11:28:04 · 126 阅读 · 0 评论 -
html5和css3的新特性
HTML5和CSS3知识点总结HTML5与CSS3知识点总结移动端WEB开发HTML5和CSS3重点知识汇总在这里插入代码片原创 2022-03-01 21:18:57 · 155 阅读 · 0 评论 -
行内块元素巧妙运用
行内块元素的巧妙运用相邻的行内块元素之间会有空白缝隙行内块元素可以通过给padding设置大小 实现撑大盒子行内块元素的大小默认是内容大小原创 2022-03-01 17:11:56 · 149 阅读 · 0 评论 -
CSS用户界面样式
参考什么是界面样式所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。更改用户的鼠标样式 <ul> <li style="cursor:default">默认的小白鼠标样式</li> <li style="cursor:pointer">鼠标小手</li> // 鼠标经过时变成小手 <li>鼠标移动</li> <li>原创 2022-03-01 15:46:46 · 126 阅读 · 0 评论 -
CSS权重优先级
参考参考原创 2022-03-01 09:52:06 · 76 阅读 · 0 评论 -
CSS实现三角
css三角形参考原创 2022-03-01 09:36:17 · 65 阅读 · 0 评论 -
清除浮动清除浮动清除浮动清除浮动
清除浮动的最常用的四种方法原创 2022-03-01 09:07:33 · 67 阅读 · 0 评论 -
元素的显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来。display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏详细可参考原创 2022-02-28 19:29:31 · 80 阅读 · 0 评论 -
CSS定位
定位的优点某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.当我们滚动窗口的时候,盒子是固定屏幕某个位置的。定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。【定位 = 定位模式 + 边偏移 。】定位模式用于指定一个元素在文档中的定位方式。position:absolute/relative/static(默认的静态定位)/fixed(固定定位)边偏移则决定了该元素的最终位置边偏移就是定位的盒子移动到最终位置。有 top、bo原创 2022-02-28 19:15:30 · 115 阅读 · 0 评论 -
CSS书写顺序规范
详细参考转载 2022-02-28 18:48:59 · 76 阅读 · 0 评论 -
浮动浮动浮动浮动
传统网页布局的三种方式普通流(标准流)浮动定位为什么需要浮动?行内块元素可以实现一行显示,但是他们之间会有大的空白缝隙,很难控制有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.浮动最典型的应用:可以让多个块级元素一行内排列显示。网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动浮动语法:选择器 { float: 属性值; }浮动特性浮动元素会脱离标准流(脱标)浮动的元素会一行内显示并且元原创 2022-02-28 17:51:30 · 114 阅读 · 0 评论 -
圆角边框、盒子阴影
圆角边框border-radius:左上 右上 右下 左下 【顺时针的左上右右左】 属性用于设置元素的外边框圆角。注意用空格隔开 px为单位border-radius:length;-参数值可以为数值或百分比的形式-如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%-该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角 -分开写:border-top-left-radius、border-top-right-radius、border原创 2022-02-28 15:16:03 · 273 阅读 · 0 评论 -
盒子模型记录
边框边框有三部分组成:宽度(px)、样式、颜色border : border-width || border-style || border-color (没有书写顺序要求)border-style:none(默认无边框) solid实线 dashed虚线 dotted点线-当border属性的色值不明确指定时,如border: 1px solid,边框颜色与当前元素的字体颜色color相同边框会影响盒子实际大小两种方案解决:1. 测量盒子大小的时候,不量边框.2. 如果测量的时候包含了边原创 2022-02-28 15:02:26 · 92 阅读 · 0 评论 -
CSS背景
CSS背景背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 - 设置背景颜色:background-color - 一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色 - 设置背景图片:background-image : none(默认无) | url (url) - 注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。 - 设置背景平铺:backgroun原创 2022-02-28 12:52:59 · 140 阅读 · 0 评论 -
通用兄弟选择器
通用兄弟选择器特征:用~div~h2{color:blue}<h2> </h2><div> </div><h2> </h2><h2> </h2><h2> </h2>解释:选中div后面的所有兄弟h2标签 也就是说最后三个h2字体颜色是蓝色参考...原创 2022-02-28 12:17:19 · 776 阅读 · 0 评论 -
选择器的补充-兄弟相邻选择器
兄弟相邻选择器定义:相邻兄弟选择器(Adjacent sibling selector) 可选择紧接在另一元素后的元素,且二者有相同父元素。只会选择第一个相邻的匹配元素eg: div+p{ color:blue;}<div> </div><p> <p/><p> <p/>解释:div和p属于同一水平的兄弟关系,div和p有相同的父级元素,但是此时是对紧贴着div的第一个p标签【只会选择第一个相邻的匹配元素】进行样原创 2022-02-28 12:07:38 · 234 阅读 · 0 评论 -
元素的显示模式
块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。块级元素的特点: ① 比较霸道,自己独占一行。 ② 高度,宽度、外边距以及内边距都可以控制。③ 宽度默认是容器(父级宽度)的100%。 ④ 是一个容器及盒子,里面可以放行内或者块级元素。注意: 文字类的元素内不能使用块级元素 <p> 标签主要用原创 2022-02-27 21:22:42 · 102 阅读 · 0 评论 -
伪类选择器
链接伪类选择器a:link 未访问链接时a:visited 访问后a:hover 鼠标放上去时a:active 点击后注意书写顺序时必须按照以上的顺序进行设置( 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。)口诀:LHVA...原创 2022-02-27 21:12:39 · 216 阅读 · 0 评论 -
CSS复合选择器
复合选择器定义:两个以上基础选择器组合而成分类:后代选择器,子选择器,并集选择器,伪类选择器记忆口诀:后子并伪后代选择器语法:元素1 元素2 { 样式声明 }- 上述语法表示选择元素 1 里面的所有元素 2注意: 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可 元素1 和 元素2 可以是任意基础选择器子选择器(选亲儿子元素.)语法:元素1 > 元素2 { 样式声明 }上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。注意: 元素1原创 2022-02-27 21:05:54 · 84 阅读 · 0 评论 -
CSS文本和CSS基础选择器
CSS选择器CSS可分为基础选择器和复合选择器两大类基础选择器: - 标签选择器:将某种标签全部选出来进行样式设置 - 类选择器:给标签添加class类名 通过.类名对部分标签进行样式设置 - 一个标签可以设置多个类名 不同类名之间用空格隔开 class=“类名1 类名2” - id选择器:给标签元素添加id属性 设置样式通过#id名 - 通配符选择器:* 表示选取页面的所有元素CSS字体 - 设置字体系列:font-family - 设置字体大小:font-si原创 2022-02-27 20:51:57 · 363 阅读 · 0 评论 -
input标签属性详解大全
补充label标签 标签为 input 元素定义标注(标签)。 标签用于绑定一个表单元素, 当点击 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.语法: <label for="sex">男</label><input type="radio" name="sex" id="sex" />核心: <label> 标签的 for 属性应当与相关元素的 id 属性相同。input详解...原创 2022-02-27 00:26:24 · 1307 阅读 · 0 评论 -
table表格知识记录
表格table知识点转载 2022-02-26 23:49:25 · 575 阅读 · 0 评论 -
页面logo的做法
以pink老师的品优购为例1.和2. 如图所示:由1.2.操作之后的结果如图所示:现在有图片了 但是按照步骤则a标签的文字不可避免的出现 如何使得文字不显示呢?答案一:将a标签的字体大小设置为0px就看不见字体了 如图:答案二:a标签被转为块级元素之后可以设置宽高 ,a标签的文字就在盒子里面了;对a设置文字的首行缩进;利用text-indent文字首行缩进 ;(text-indent:正值 则文字靠右边走 ;负值 则文字靠左边走 ;)当...原创 2022-02-20 02:11:12 · 196 阅读 · 0 评论 -
引入css文字图标步骤
1.先进入网站:阿里巴巴图标库进行图标的挑选链接:IcoMoon App - Icon Font, SVG, PDF & PNG GeneratorUsing IcoMoon you can easily search and download vector icons or generate fonts (icon fonts). This tool can also be used for icon set management. It can generate icon fonts,原创 2022-02-20 01:09:56 · 585 阅读 · 0 评论