雅君 level
获赞
2
粉丝
2
关注
5
看过 TA
8
山东大学
2020
前端工程师
IP属地：四川
暂未填写个人简介
私信
关注
发布(99) 评论 刷题 收藏
2022-04-05 15:51
已编辑
山东大学 前端工程师
【40】CSS3 （3）——新增常用属性①边框圆角
★文章内容学习来源：拉勾教育大前端就业集训营  边框圆角属性目录：   一、介绍    边框圆角 具体含义     属性名 border-­radius   作用 设置边框的圆角   属性值 有两类，下面具体会讲。但是具体的值都可以是像素值或者百分比（百分比参考的是盒子整体宽度、高度的百分比）     注意：百分比参考的是盒子整体宽度、高度的百分比，这里盒子整体宽度、高度指的是：padding+border+width（height），不包括margin。  二、属性及属性值写法 1.常规情况    属性值 说明     x-radius / y-radius / 分割两部分属性值，前面为水平...
0 点赞 评论 收藏
分享
2022-04-05 15:51
已编辑
山东大学 前端工程师
【41】CSS3 （3）——新增常用属性②
★文章内容学习来源：拉勾教育大前端就业集训营  文字阴影属性   一、介绍    文字阴影属性 详细含义     属性名 text-shadow       属性值 详细含义     h-shadow 必需。水平阴影的位置。允许负值。   v-shadow 必需。垂直阴影的位置。允许负值。   blur 可选。模糊的距离。   color 可选。阴影的颜色。     二、 语法  text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。  三、 多层阴影  text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 ...
0 点赞 评论 收藏
分享
2022-04-05 15:51
已编辑
山东大学 前端工程师
【42】CSS3 （3）——新增常用属性②
★文章内容学习来源：拉勾教育大前端就业集训营  边框阴影   一.介绍    边框阴影属性名 box-shadow       属性值 简介     h-shadow 必需的，水平阴影的位置。单位px，允许负值。   v-shadow 必需。垂直阴影的位置。单位px，允许负值。   blur 可选有无。模糊的距离。单位px，   spread 可选有无。阴影的尺寸，阴影扩展大小。 单位px。   color 可选有无。阴影的颜色。   inset 可选有无。写了inset会将外部阴影改为内部阴影。     二. 语法  box-shadow 属性向盒子添加阴影； 属性值有2-4 个长度值（必需...
0 点赞 评论 收藏
分享
2022-04-05 15:50
已编辑
山东大学 前端工程师
【43】CSS3 （4）——新增属性①过渡属性
★文章内容学习来源：拉勾教育大前端就业集训营   CSS3 出现之前，前端一般使用 Flas***或 JavaScript 制作动画； 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。 在不使用 Flas***或 JavaScript 的情况下，使用什么属性可以实现补间动画（过渡效果）？   补间动画就是知道两端的关键帧，通过计算机自己能计算出中间帧的动画    一、过渡属性介绍  属性名： transition 作用 ： 在不使用 Flas***或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即...
0 点赞 评论 收藏
分享
2022-04-05 15:50
已编辑
山东大学 前端工程师
【44】CSS3（4）——新增属性② 2D转换
★文章内容学习来源：拉勾教育大前端就业集训营  2D 转换   一、介绍  属性名 ：transform 作用：对元素进行移动、缩放、旋转、拉长或拉伸。 配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 属性值 ：多种转换方法的属性值，可以实现不同的转换效果。详细见以下。 |   二、属性值及举例 1.位移 translate()  transform 的属性值为 translate() 时，可以实现位移效果。 书写语法：     值 说明     translate(x,y) x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负   tran...
0 点赞 评论 收藏
分享
2022-04-05 15:49
已编辑
山东大学 前端工程师
【45】CSS3 （4）——新增属性③3D 转换
★文章内容学习来源：拉勾教育大前端就业集训营  3D 转换  transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成 的平面效果多了一条 z 轴，如下图： 本文目录如下：   一、透视属性 1.应用背景：  电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。 透视特点：近大远小。 注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。  2.透视属性 perspectiv...
0 点赞 评论 收藏
分享
2022-04-05 15:49
山东大学 前端工程师
【46】CSS3 （4）——新增属性④动画
★文章内容学习来源：拉勾教育大前端就业集训营  动画  css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flas***以及 JavaScript。 css3 动画制作分为两步：创建动画、绑定动画。 本文目录如下：   一、创建动画 1. @keyframes 规则介绍  @keyframes 规则用于创建动画； 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果； 可以改变任意多的样式任意多的次数； 需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。 0% 是动画的开始，...
0 点赞 评论 收藏
分享
2022-04-05 15:49
已编辑
山东大学 前端工程师
0 点赞 评论 收藏
分享
2022-04-05 15:48
山东大学 前端工程师
【48】HTML5 （2）——新增①标签语义化
★文章内容学习来源：拉勾教育大前端就业集训营  本篇目录：  标签语义化含义 HTML5新增语义化标签 注意事项   一、标签语义化含义  以前制作网页布局，我们基本用div 来做; div就是一个普通的块级标签， 对于搜索引擎来说，是没有语义的； div本身没有语义，设置了类名对于搜索引擎来说也没有什么用处； 而标签的语义化对于 seo(Search Engine Optimization)搜索引擎优化有用处。   二、 HTML5一些新增的语义化标签    标签 含义     <header> 用于网页的头部   <nav> 导航   <main> 用于...
0 点赞 评论 收藏
分享
2022-04-05 15:48
山东大学 前端工程师
【49】HTML5 （3）——新增②多媒体标签
★文章内容学习来源：拉勾教育大前端就业集训营  多媒体标签  多媒体标签包含两个，具体如下： 音频：<audio> 视频：<video> 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览 器插件。 本篇文章目录：   一、<audio> 音频标签  HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。     格式 MIME-type IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0     Ogg audio/ogg  √ √ √    MP...
0 点赞 评论 收藏
分享
2022-04-05 15:48
已编辑
山东大学 前端工程师
【50】HTML5(4)—— 新增③表单标签
★文章内容学习来源：拉勾教育大前端就业集训营  目录：   一、新增输入标签 1.<input>表单类型属性值   回顾 已学表单输入标签<input>的type属性属性值: 点击回顾【12】HTML基础（3）——HTML常用标签⑧表单相关标签 以下简要罗列：      属性名 属性值 描述     type text 单行文本输入框    password 密码输入框    radio 单选框    checkbox 复选框    button 普通按钮    reset 重置按钮    submit 提交按钮    image 图像形式的按钮    file 定义输...
0 点赞 评论 收藏
分享
2022-04-05 15:47
已编辑
山东大学 前端工程师
【51】静态网页开发(1)——基础
★文章内容学习来源：拉勾教育大前端就业集训营  本篇目录：  网页开发流程 网页开发基础 版心 页面布局流程 常见布局类型   一、网页开发流程  二、网页开发基础  任意打开一个PC端网页，查看，比如拉勾招聘。 会发现其中布局的一些规律，以下一一介绍。  三、版心  网页中主要内容所在区域，一般水平居中显示，从而让用户的视线更加集中； 常见版心数值： 960px、980px、1000px、1200px等。 制作方法：标准流中的margin方法：margin: o auto;  四 、页面布局流程  为了提高页面制作的效率，常用到以下流程：   1.确定版心； 2.分析页面中行模块，并且分析行...
0 点赞 评论 收藏
分享
2022-04-05 15:47
山东大学 前端工程师
【52】静态网页开发(2)——常见技巧与方法
★文章内容学习来源：拉勾教育大前端就业集训营  本篇目录：  文件结构搭建 <head>内配置   一、文件结构搭建  网站中会包含多个.html文件.css文件及图片等多媒体文件，我们需要使用不同的文件夹进行整理。搭建好即可，后期在编辑器中直接打开总文件。 文件中最基本的结构包括: 其中favicon.ico是网页标题中图标的固定命名；文件要求与index.html同级储存，使用时用link标签引用   二、<head>内的配置  默认<meta>标签; title; icon图标; CSS引入（清除默认样式/公共样式/独有样式）;     css引入文件...
0 点赞 评论 收藏
分享
2022-04-05 15:46
已编辑
山东大学 前端工程师
【53】静态网页开发(3)——首页index.html结构布局技巧
★文章内容学习来源：拉勾教育大前端就业集训营  本篇目录：  语义化标签的使用 以拉勾网页为例分析：         准备工作 确定版心、分析页面中行模块及其中列模块   1 <header>区域   2 .login-banner区域   3 .search区域   4 <main>区域   5 .hot-recruit区域   6 .hot-company区域   7 .more区域   8 <footer>区域   9 .back-top区域     一、语义化标签的使用  点击回顾【48】HTML5(2)——新增①标签语义化    二、以拉勾网页为例...
0 点赞 评论 收藏
分享
2022-04-05 15:46
山东大学 前端工程师
【54】移动WEB开发(1)——基础
★文章内容学习来源：拉勾教育大前端就业集训营   之前三篇讲解了静态网页pc端开发思路及技巧： 【51】静态网页开发(1)——基础 【52】静态网页开发(2)——常见技巧与方法 【53】静态网页开发(3)——首页index.html结构布局技巧    接下来讲解移动端开发思路，一样是不涉及Java Script的，仅仅用CSS和HTML实现页面效果。   本篇学习目标：了解移动端基础    本篇目录：  浏览器现状 手机屏幕现状 移动端调试方法 总结    一、浏览器现状 PC端常见浏览器： 浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见...
0 点赞 评论 收藏
分享

创作者周榜

更多
关注他的用户也关注了：
牛客网
牛客网在线编程
牛客网题解
牛客企业服务