![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
自学前端,学习记录
路漫漫`
这个作者很懒,什么都没留下…
展开
-
JavaScript web api(操作/获取元素、事件、属性、样式及案例)
API和WebAPIDOM (文档对象模型)定义DOM树获取元素根据ID获取<body> <div id="date">2020-9-6</div> <script> var res = document.getElementById('date') console.log(res); console.dir(res) </script></body原创 2020-09-08 17:04:25 · 742 阅读 · 0 评论 -
CSS3 3D 转换
3D转换当我们直接设置translate-z时并不会看见效果,要借助透视。透视translatZ旋转x轴正向旋转:y轴正向旋转:z轴的旋转就和转盘一样transform-style如果想父元素旋转时子元素也跟着旋转,就要用到这个。案例 两面翻转的盒子<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-09-05 17:05:03 · 314 阅读 · 0 评论 -
CSS3动画
动画动画和过渡有些相似,区别之一是但前者可以自己播放,后者需要将鼠标停在标签上。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @keyframes move {原创 2020-09-05 14:14:44 · 114 阅读 · 0 评论 -
CSS其它知识点(移动、旋转、缩放)
2D转换移动利用这个可以实现盒子的水平垂直居中,我们之前的做法是:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0原创 2020-09-04 20:36:03 · 306 阅读 · 0 评论 -
品优购项目前端实战
大致要做这么几个页面:学习目的:项目搭建favicon这个就是打开网页时标签所显示的图标,例如:上图左侧的图标就是faviconSEO优化首页制作下图是约定好的命名模块:先做这个玩意:<section class="shortcut"> <div class="w"> <div class="fl"> <ul>原创 2020-09-04 08:57:48 · 2795 阅读 · 5 评论 -
HTML5和CSS3新特性
语言标签演示代码:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> header { height: 200px; bac原创 2020-09-01 09:04:16 · 212 阅读 · 0 评论 -
自学前端Day6(定位、元素显示/隐藏)
如果浮动的父标签没有指定宽度,那么宽度会跟着浮动的子标签来变化。相对定位可以用auto进行居中,但绝对定位和固定定位不行。定位为什么需要定位呢?定位的组成静态定位相对定位绝对定位也就是说如果有父亲和爷爷,父亲没定位但爷爷有定位,那么这个子标签跟着爷爷走。蓝色是父,黄和棕是兄弟,当棕绝对定位后会飘起来(比浮动还高),然后本来属于它的位置也会空出来留给别人(黄):父/子元素分别用什么定位 —子绝父相一个例子:用浮动是不行的,因为如果把那几个小图标设置成浮动而底层原创 2020-07-25 20:48:26 · 145 阅读 · 0 评论 -
自学前端Day6(圆角边框、浮动、布局思路、几个练习)
只要没指定宽度padding就不会撑大盒子!!!先来个小练习复习一下:<style> * { margin: 0; padding: 0; } .box { width: 248px; height: 163px; border: 1px solid #ccc; margin: 100px auto; } .box h3 { height:原创 2020-07-19 14:45:22 · 281 阅读 · 0 评论 -
自学前端Day5(盒子、padding、margin、border)
盒子由四部分构成:边框内容内边距外边距边框(border)边框粗细边框样式边框颜色div { height: 100px; width: 100px; border-color: tomato; /* dashed 虚线 solid 实线 dotted 点线*/ border-style: dashed; border-width: 10px; }效果如下:简写:和之前提到过的背景一样,边框也可以简写:原创 2020-07-16 15:11:52 · 389 阅读 · 0 评论 -
自学前端Day4(选择器、显示模式、背景、三大特性)
目标:Emmet 语法快速生成HTML结构快速生成CSS样式只需输入缩写即可,如:w:widthti2em:text-indent: 2em;tdnone:text-decoration: none…复合选择器后代选择器如果想把下面ol中的li标签中的内容做更改,那么就要用后代选择器:<ul> <li>ul中的li</li> <li>ul中的li</li> <li>ul中的li原创 2020-07-12 23:12:06 · 114 阅读 · 0 评论 -
自学前端Day3--CSS(初识)
在head标签中写<style>选择器 {样式}给谁改 改成啥样</style>小例子,注意要加分号(’;’)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2020-07-11 14:22:40 · 152 阅读 · 0 评论