- 博客(20)
- 收藏
- 关注
RSS订阅原创 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
979
原创 JS的继承
继承文章目录继承方式一 构造继承call方式二 原型链继承方法三 组合继承组合继承优化方法四 拷贝继承方法五 寄生组合继承总结方式一 构造继承call <script> function Animal(type) { this.hello = 'word'; this.type = type; this.walk = function () { console.
2021-06-07 15:31:01
115
原创 二级导航
竖向导航 <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .nav { width: 1000px;
2021-04-09 20:36:40
172
原创 元素居中
方式一元素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
原创 【导航栏练习】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
128
原创 导航栏练习2【底部为背景边框的突出效果】
简单案例： <style> *{margin: 0; padding: 0;} .nav{ height: 50px; background: #f00; } .nav ul li{ float: left; list-style: none; } .nav ul li a{ color: #fff; text-decoration: none; padding: 0 20px; l
2021-04-09 09:11:51
84
原创 导航栏竖线 -利用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
350
原创 列表排列效果-利用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
原创 3D转换
文章目录3D转换初识3D转换位移-translate3d透视-perspective旋转-rotate3drotateXrotateYrotateZrotate3dtransform-style3d呈现两面盒子反转案例3D导航栏旋转盒子浏览器私有前缀3D转换初识3D转换近大远小物体后面遮挡不可见三维坐标系x轴:水平向右 【x右边是正值，左边是负值】y轴:垂直向下 【y下面是正值，上面是负值】z轴:垂直屏幕【往外面是正值，往里面是负值】3D位移:translate3D(x
2021-02-14 08:44:59
679
原创 移动端
文章目录移动端移动端基础移动端常见浏览器手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口layout viewport布局视口visual viewport视觉视口ideal viewport理想视口总结meta视口标签标准viewport设置二倍图物理像素比多倍图背景缩放 background-size背景图片二倍图多背图切图移动端开发选择移动端技术解决方案css初始化css3 盒子模型特殊样式移动端常见布局技术选型流式布局京东首页准备顶部导航栏二倍精灵图图片格式焦点图品牌日导航栏模块新闻模块flex布局
2021-02-14 08:43:42
276
原创 JavaScript基础
文章目录JavaScript简介jsHelloWorldjs编写位置JS基本语法字面量和变量标识符数据类型String转义字符typeofNumbermax/min_valueNaN精确度BooleanNull和UndefinedNullUndefined强制类型转换强制转换-String强制转换-Number其他进制数字强制转换-Boolean运算符算数运算符一元运算符自增和自减逻辑运算符非布尔值逻辑运算赋值运算符关系运算符Unicode编码相等运算符相等运算符不相等全等不全等三元运算符运算符优先级语句代
2021-02-14 08:41:10
229
原创 动画+3D转换笔记
动画动画（animation）通过设置多个节点来精确控制一个或一组动画，用来实现复杂的动画效果相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果制作动画步骤定义动画调用动画keyframes定义动画@keyframes 动画名称{ 0%{ 样式 } 100%{ 样式 }}0%是动画的开始，100%是动画结尾。这样的规则就是动画序列在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为
2021-01-02 11:39:25
337
原创 CSS3立体盒子
<style> body { /* 透视 */ perspective: 1000px; } section { width: 200px; height: 200px; position: relative; margin: 300px auto; margin-left: ..
2020-12-25 21:30:42
172
原创 两面盒子反转案例
两面盒子反转案例 <style> /* 旋转的是box */ body { perspective: 600px; } .box { position: relative; width: 300px; height: 300px; margin: 100px auto; transit
2020-12-25 14:18:01
959
原创 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
原创 css3艺术—(一)【圆形、椭圆、字母i】
圆形制作<head> <style> .circular { width: 300px; height: 300px; /*border-radius:50%*/ border-radius: 150px; background-color: pink; } </style></head>
2020-12-23 13:15:20
323
原创 java基础笔记（一）
#Java基础笔记java各版本含义JavaSE:标准版，定位在个人计算机上的应用JavaEE:企业版，定位在服务器端的应用JavaME:微型版，定位在消费性电子产品应用上java核心优势java核心优势:跨平台/可移植性如:java 的int永远都是32位，不像c++可能是16，可能是32位(根据编译器厂商规定而变化)跨平台/可移植安全性面向对象简单高性能分布式多线程健壮性java应用程序运行机制计算机高级语言类型主要有编译型和解释型。而java语言是两种类型的结
2020-12-23 09:07:50
377
原创 HTML5+CSS3基础
HTML网页什么是网页 网站是网页集合 网页是网站的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.html后缀结尾的文件，因此也称为HTML文件网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的什么是HTMLHTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言
2020-09-27 22:44:14
4790
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人