html5
文章平均质量分 60
我以为自己很帅
新人报道,一步一步走,我们一起来学习web前端,坚持就会成功! 奥力给
展开
-
项目实战练习(比较散的知识点)
=项目实战(比较散的知识点)第一步 准备开发工具&素材&图纸审查布局类型 ( 上中下 | 上(左右)下 | 左右找版心(内容最宽处,内容宽度最通用处)寻找页面上的公共要素字号颜色**背景颜色 **(注意区分是背景颜色还是背景图片)文本颜色 #ccc装饰颜色行高间隙组件: 通用的样式,可以写准备好,后面需要的时候直接调用.搭建结构剪切后想取消可以按下 ESC所有的轮播 按钮一般都是定位起来的导航条有些是吸顶导航,就是导航原创 2021-07-11 20:10:07 · 54 阅读 · 0 评论 -
iframe-视口单位-文本模糊-固定定位(二十四)
iframe 内联框架(了解)可以将例外一个网页通过iframe框架引入到当前页面.<iframe width='200' height='200' src='http://www.baidu.com/'></iframe>属性值描述widthpx*%*定义 iframe 的宽度。heightpx*%*规定 iframe 的高度。frameborder1 || 0规定是否显示框架边框nameframe_name规定 i原创 2021-07-05 17:09:41 · 853 阅读 · 0 评论 -
FC格式化(二十三)
FC格式化上下文FC: Formatting Contexts,是w3c css2.1规范中的一个概念.相当于页面中的渲染区域,并且有一套渲染规则,决定其子元素将如何定位,以及和其他元素的关系和相互作用BFC: 块级格式化上下文.Block Formating Contexts 就是页面上的一个隔离的渲染区域,容器里面的子元素不会布局上影响到外面的元素.形成条件1.根元素;2.float属性不为none;3.position为absolute或者 fixed;4.display为inl原创 2021-07-05 14:24:18 · 82 阅读 · 0 评论 -
变量var函数(二十三)
变量使用:var() 函数var() 函数是用来读取变量,如下例:a { --foo:#f1f2f5; --bar: red; color: var(--foo); text-decoration-color: var(--bar);}var()函数也可作为其他变量的值使用.变量作用域| css变量遵从css优先级的原则, 变量值会被覆盖html { --color: blue; }div { --color: green; }* {原创 2021-07-05 12:22:10 · 1140 阅读 · 0 评论 -
3D变换(二十二)
3D变换(transform3D)##坐标轴[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJpnbFui-1625458830250)(D:/JAVA/WEB%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%EF%BC%88%E5%85%A8%E5%A5%97%EF%BC%89/%E4%BA%8C%E5%8D%81%E4%B8%83/%E8%AF%BE%E4%BB%B6%E7%AC%94%E8%AE%B0/as原创 2021-07-05 12:20:38 · 536 阅读 · 0 评论 -
css3弹性布局模式
CSS3弹性布局flex传统的布局方式依赖盒状模型,靠 display属性 position属性 float属性,对于特殊布局不方便,比如说垂直居中就比较难实现. w3c提出了一种新的方案 flex布局,比较简便 完整地实现各种页面布局.尤其是在移动端 小程序等方面.任意一个容器都可以指定为flex布局,行内元素也可以.设置Flex 布局以后,float clear 和vertical-align 属性将失效.基础概念采用flex布局的元素,称为flex容器,简称容器.[原创 2021-06-30 13:48:49 · 61 阅读 · 0 评论 -
css3关键帧已经动画效果(二十)
##css3 帧动画 animation @keyframesanimation比较类似于flash中的逐帧动画,就像播放电影.前面提到的transition只是制定了开始和结束的状态,整个过程还是需要函数来确定.逐帧动画是由关键帧组成,多个关键帧连续播放就组成了动画,由属性keyframes来完成.1. @keyframes 关键帧 .animationName: 动画名称,开发人员命名; .percentage: 百分比值,可以添加多个;.properties: 样原创 2021-06-30 13:36:54 · 66 阅读 · 0 评论 -
css文本处理补充.(十九)
css文本补充css2属性描述属性值color设置文本颜色rgb HEX rgbadirection设置文本方向。ltr(左->右) rtl(右->左)letter-spacing设置字符间距pxline-height设置行高pxtext-align对齐元素中的文本leftcenterrightjustify (两端对齐)text-decoration向文本添加修饰text-decoration: underline原创 2021-06-26 12:07:05 · 74 阅读 · 0 评论 -
css3变换-过渡-曲线-阴影(十九)
css3 transform 2D变换transform: translate(20px,30px) rotate(30deg) scale(3,4) skew(20deg,30deg);transform-origin: x-axis y-axis z-axis;平移translate:从当前位置移动.transform: translate(50px,100px);旋转rotate: 顺时针旋转元素,负值表示逆时针旋转.transform: rotate(30deg);缩原创 2021-06-26 12:06:27 · 65 阅读 · 0 评论 -
css3圆角边框-渐变-(十九)
css3新增样式border-radius: 1-4 length|% / 1-4 length|%;/* xy合并参数写法 */border-radius: 10px 20px 30px 40px;border-radius: top-left top-right bottom-right bottom-left/* 全参数写法 */border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;border-radius: top-left-x原创 2021-06-26 12:05:57 · 741 阅读 · 0 评论 -
HTML+CSS规范,每日必看(十八)
编程规范 HTML + CSS命名规范HTML + CSS 命名规范1. 命名需要是具备语义性的单词,不能用 数字 拼音 数字,符号开头 正确示范 : wrap description title content 错误示范 : aaaa a1 $we 4tdds2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 PS: 更推荐使用 - 这样更清晰. 正确示范 :原创 2021-06-26 12:04:54 · 114 阅读 · 0 评论 -
页面练习注意点总结(十七)
一.页面练习注意点.1.rest.css样式表一般一个大的前端团队都会自己创建一个2.开始做网页时,首先确定结构,再找版心.3.一个大盒子里面有两个小盒子,如何让两个小盒子之间的间隙为0可以这样设置: font-size: 0;4.文本尽量用文本标签包裹5.网页有且只有一个h1标签,可以给logo(图片) 添加h1 标签.6.用ul标签结构性会更强一点.7.盒子的高度一般都是靠内容撑起来.8.使用了浮动要清除浮动;9.一般使用padding 会更稳定些,相比margin.10.bann原创 2021-06-22 20:42:39 · 31 阅读 · 0 评论 -
初识定位(十六)
一.定位实现快速精准 脱离文档流束缚的情况下,将元素放在想要的位置.二.元素的定位属性主要包括两种定位模式和边偏移模式.1.定位模式选择器 { position: 属性值;}position 属性的常用值.值描述static自动定位(默认定位方式)relative相对定位,相对于其原文档流的位置进行定位absolute绝对定位,相对于其上一个已经定位的父元素进行定位fixed固定定位,相对于浏览器窗口进行定位2.边偏移边偏移属性描原创 2021-06-18 09:19:59 · 107 阅读 · 0 评论 -
float浮动以及浮动样式清除(十五)
一.浮动(float)css的定位机制: 普通流/浮动和定位元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制,移动到其父元素中指定位置的过程。选择器 { float: 属性值: }属性值: left/right/none浮动的特性:浮动的元素总是找离他最近的父级元素对齐,但不会超出内边距的范围.父盒子里面的子盒子,如果需要所有子元素一行对齐显示,就需要所有子元素都进行浮动.元素添加浮动后,会变成块元素,元素的大小取决于定义的大小或者默认的内容多少原创 2021-06-17 11:42:22 · 93 阅读 · 0 评论 -
表格(十四)
一 创建表格<table> <tr> <td>...</td> <td>...</td> ... </tr> ...<table>table整个表格,一个tr表示一行,一个td表示列.属性:(属性不加单位)表格属性属性值描述alignleft center right不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。bgc原创 2021-06-16 10:24:59 · 143 阅读 · 0 评论 -
精灵图(十二)
1.伪类选择器E::first-letter文本的第一个单词或字E::first-line 文本第一行;E::selection 选中全部文本.div::befor { content:"开始";} 在div元素的开始位置添加一个元素div::after { content:"结束"; } 在div元素的结束位置添加一个元素.E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪原创 2021-06-12 09:59:35 · 108 阅读 · 0 评论 -
结构类复合选择器(child/
1.非常用复合选择器element1 + element2 离element1最近的elment2标签.element1~element2跟在element1后面的同一个父级标签. 认标签,不认类名哦前面我们学到的是 css2.0 现在下面开始介绍 css32.结构(位置)伪类选择器(css3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) :原创 2021-06-12 09:37:38 · 124 阅读 · 0 评论 -
css权重与样式的优先级(十)
css的优先级与权重(重点)目的: 在定义css样式时,经常会出现多个规则应用在同一个元素上,这时会出现优先级问题.直接总结:css特殊性(specificity):用一个四位的数字串来表示,值从左到右,左做大,一级比一级大,数位之间没有进制关系.继承或者* 的贡献值0,0,0,0每个元素(标签)贡献值为0,0,0,1每个类,伪类贡献值为0,0,1,0每个ID贡献值为0,1,0,0每个行内样式贡献值1,0,0,0每个!important贡献值原创 2021-06-09 19:00:58 · 151 阅读 · 0 评论 -
复合选择器与特性(九)
1.a标签非多级导航直接用a标签, a里面不能再放块元素了, li里面还可以放多个块元素.2.实现块元素居中margin: 50px auto; 设置块元素的上外边距,左右边距自动.line-height: 50px; 当文本的高度等于父块元素的高度的时候,文本垂直居中text-align: center; 设置文本水平居中.3.background写法注意复合型写法的选择属性大于或等于3个的时候才用.单例写法一般再3个以下的时候选用3.a标签默认是有下原创 2021-06-08 15:00:17 · 58 阅读 · 0 评论 -
背景图片_伪类选择器
1.background背景图片background-image: url(地址); 背景图片平铺,默认是铺满整个父区域.注意地址的准确,和img有点点不一样.background-repeat: no-repeat; 背景图片不平铺,只显示一张,不管一张图够不够 铺满.background-repeat: repeat-x; 横向平铺background-repeat: repeat-y; 纵向平铺background-repeat: cover;原创 2021-06-06 12:48:36 · 380 阅读 · 0 评论 -
css外观属性文本修饰
1.文本颜色<body> <p style="color:#000;"> <h2 style="color:red;"> <h1 style="color:#rgb(204,0,1)"> <h3 style="color:#rgba(204,0,1,.5)"></body>文本颜色#000纯蓝色#FFF纯白色#F00纯红色#0F0纯绿色#00F纯蓝色十六进制表示/直接用英文表示/rgb表示,上面见示原创 2021-06-02 21:16:58 · 308 阅读 · 0 评论 -
HTML标签属性
HTML基础标签1. 注释标签<!-- --> html中注释标签,快捷键ctrl+//* */ css中注释标签2.div标签<div> </div>用来分割分区的标签,给页面划分不同的区域,呈现不同内容.3.span 标签<span> </span>对小的文本进行修饰,没有固定的格式表现.其实没有多大作用.!4.css层叠样式行内式:是通过标签的style属性来设置元素的样式,实际上原创 2021-06-01 16:37:52 · 164 阅读 · 0 评论 -
HTML基础标签二
基础标签二1.html的lang 属性是指网页内容面向语言,浏览器的翻译功能."en"表示英文."zh-cn"表示中文.2.base标签<base target="_blank">写在 标签里面,默认后面的超链接都新开网页跳转.如果需要某一个超链接不新开网页跳转,只需要单独设置.3.简单标签的功能标签功能bstrong加粗iem斜体uins下划线sdel删除线b i u s原创 2021-05-31 14:57:39 · 50 阅读 · 0 评论 -
HTML基础篇 标签及属性
标签属性1.h标签<h1> </h1 ><h2> </h2>h1主每个网页有且只有一个h1,相当于大标题,多了不规范,会影响 权重.h2主网页的分块标题 不要过多2-5个合适h3 主网页分块模块下面,可以多个h4主页下面的分页列表标题2.如何提高网站的权重SEO1.网页三要素2.网页代码是否符合w3c规范3.内容的原创性与质量,是否符合规则##3.分段标签<p> </p>分段标签,不推荐使原创 2021-05-29 22:04:37 · 125 阅读 · 0 评论 -
HTML基础篇
课堂笔记任务目标:学习第一次创建网页熟悉创建网页开头的基本步骤方法1.指定网页的类型<!doctype html>强调本网页类型为 html52.添加html 标签<html> </html>网页的外壳,所有网页的内容都要写在此标签里面,包括标题、内容、属性3.添加head 标签<head> </head>相当于网页的标题,在里面需要编辑标题的属性,简单来说是需要介绍:本网站是干啥用的。4.编辑he原创 2021-05-29 22:01:22 · 34 阅读 · 0 评论