前端基础
文章平均质量分 69
blink555
这个作者很懒,什么都没留下…
展开
-
JS基础2.0
day1js简介js:javascriptjs 是一种直译型的脚本语言 script 脚本js 组成部分 ECMAScript + BOM(browser object model) + DOM(document object model)js 历史 为了解决表单验证问题js 前端页面效果 + 后端进行交互!!!!!2+2+2js创建内部js <script> // 内部js </script>外原创 2021-07-29 09:48:05 · 977 阅读 · 0 评论 -
JS的继承
继承文章目录继承方式一 构造继承call方式二 原型链继承方法三 组合继承组合继承优化方法四 拷贝继承方法五 寄生组合继承总结方式一 构造继承call <script> function Animal(type) { this.hello = 'word'; this.type = type; this.walk = function () { console.原创 2021-06-07 15:31:01 · 115 阅读 · 0 评论 -
二级导航
竖向导航 <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .nav { width: 1000px;原创 2021-04-09 20:36:40 · 172 阅读 · 0 评论 -
元素居中
方式一元素position:absolute/fixed(脱离文档流) 【绝对定位使,是相对浏览器进行居中】left,right,top,bottom四个方向值为0margin:auto <style> * { margin: 0; padding: 0; } .box { width: 500px; height: 500px;原创 2021-04-09 20:21:05 · 94 阅读 · 0 评论 -
【导航栏练习】tab选项卡
思路top div高度 height:40px;border-bottom:1px; 【总的高度为40px+1px= 41px】li浮动,a变为block元素,display:block;,a未浮动时,高度35px+1px的border-top,然后利用margin-top:4px,位于top下边框线上a浮动时,高度变为40px,还有1px border-top,总共高度为41px,此时会给其设置背景颜色,会超出.top,覆盖其border-bottom. <style> .原创 2021-04-09 13:46:10 · 127 阅读 · 0 评论 -
【导航栏练习】凸起导航栏效果
实现效果注意:hover导航栏时,是凸起效果思路由于导航颜色是渐变的,所以现阶段使用背景颜色实现高度说明:原创 2021-04-09 00:15:34 · 602 阅读 · 0 评论 -
导航栏竖线 -利用background[display:block应用]
实现效果思路:其中导航栏的竖线不是用边框实现的,因为这个竖线属于渐变,所以可以利用背景颜色,首先确定好顶部的跨度 hegiht:50px,确定安全区,保证导航栏内容在安全区中。logo左浮动,ul不要设置宽度,右浮动(此时ul的宽度为内容撑开)li也不要设置宽度,每个li需要左浮动排列li中的a设置设display:block,然后行高为top导航栏高度,用line-height撑开a的高度,line-height:50px;宽度使用padding撑开(如果不设置display:bloc.原创 2021-04-08 23:40:49 · 347 阅读 · 0 评论 -
列表排列效果-利用overflow:hidden隐藏间距实现
未实现效果:每个li宽度为270px ,实现每行4个li,之间间距为30px因为box宽度为1170px ,ul的宽度为父元素100%,故ul宽度为1170pxli:2704+304(margin-right) = 1200pxul实际需要的宽度为1200px,因为ul容不下li后,自动换行。 <style> * { margin: 0; padding: 0; } li {原创 2021-04-07 13:00:32 · 207 阅读 · 0 评论 -
3D转换
文章目录3D转换初识3D转换位移-translate3d透视-perspective旋转-rotate3drotateXrotateYrotateZrotate3dtransform-style3d呈现两面盒子反转案例3D导航栏旋转盒子浏览器私有前缀3D转换初识3D转换近大远小物体后面遮挡不可见三维坐标系x轴:水平向右 【x右边是正值,左边是负值】y轴:垂直向下 【y下面是正值,上面是负值】z轴:垂直屏幕【往外面是正值,往里面是负值】3D位移:translate3D(x原创 2021-02-14 08:44:59 · 675 阅读 · 0 评论 -
移动端
文章目录移动端移动端基础移动端常见浏览器手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口layout viewport布局视口visual viewport视觉视口ideal viewport理想视口总结meta视口标签标准viewport设置二倍图物理像素比多倍图背景缩放 background-size背景图片二倍图多背图切图移动端开发选择移动端技术解决方案css初始化css3 盒子模型特殊样式移动端常见布局技术选型流式布局京东首页准备顶部导航栏二倍精灵图图片格式焦点图品牌日导航栏模块新闻模块flex布局原创 2021-02-14 08:43:42 · 276 阅读 · 0 评论 -
JavaScript基础
文章目录JavaScript简介jsHelloWorldjs编写位置JS基本语法字面量和变量标识符数据类型String转义字符typeofNumbermax/min_valueNaN精确度BooleanNull和UndefinedNullUndefined强制类型转换强制转换-String强制转换-Number其他进制数字强制转换-Boolean运算符算数运算符一元运算符自增和自减逻辑运算符非布尔值逻辑运算赋值运算符关系运算符Unicode编码相等运算符相等运算符不相等全等不全等三元运算符运算符优先级语句代原创 2021-02-14 08:41:10 · 228 阅读 · 0 评论 -
动画+3D转换笔记
动画动画(animation)通过设置多个节点来精确控制一个或一组动画,用来实现复杂的动画效果相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果制作动画步骤定义动画调用动画keyframes定义动画@keyframes 动画名称{ 0%{ 样式 } 100%{ 样式 }}0%是动画的开始,100%是动画结尾。这样的规则就是动画序列在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为原创 2021-01-02 11:39:25 · 337 阅读 · 0 评论 -
css3——2D转换
移动-translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。transform: translate(x, y);transform: translateX(n);transform: translateY(n); <style> /* 移动盒子位置:定位、盒子的外边距、 2d转换移动*/ div { width: 200px; height: 200px;原创 2020-12-24 08:57:11 · 147 阅读 · 0 评论 -
HTML5+CSS3基础
HTML网页什么是网页 网站是网页集合 网页是网站的一"页",通常是HTML格式的文件,它要通过浏览器来阅读网页是构成网站的基本元素,它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.html或.html后缀结尾的文件,因此也称为HTML文件网页是由网页元素组成,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的什么是HTMLHTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言原创 2020-09-27 22:44:14 · 4788 阅读 · 0 评论