前端练手
关注
分享
扫一扫
文章平均质量分 58
练习
DanmoSAMA
从零开始的前端工程师之路——
展开
-
媒体查询初尝试
小米项目的媒体查询：注意事项宽度在衔接处，不要写一样的值，要交叉1px，比如：@media only screen and (max-width:1440px) and (min-width:1298px){}@media only screen and (max-width:1299px){}否则在宽度交接处，继续缩放窗口时会闪一下（什么也看不到）几种情况都要写在媒体查询中，不要初始情况写在外边，另外的情况写在媒体查询中，不然会出问题。大宽度 大宽度原创 2021-02-17 10:50:16 · 197 阅读 · 0 评论 -
新手 node.js 留言本
项目的github url: DanmoSAMA/Review-System项目要点该项目的要点大致如下：项目的准备工作：注意要在项目文件夹内下载模板引擎，npm install art-template开放/public 目录中的静态资源post页中 表单属性的使用index页中 模板引擎的语法url.parse方法接受和存储数据，重定向开放/public 目录在html文件中，所有的url都以/public开头，不要使用相对路径./发现的一个现象，在post.html中，如果原创 2021-03-08 20:46:02 · 155 阅读 · 1 评论 -
京东logo之gif图
HTML： <div class="logo"> <a href="javascript:;"> </a> </div>CSS：.logo a{ display: block; width: 190px; height: 120px; background-image: url(../img/header/spr原创 2021-02-25 22:08:51 · 1164 阅读 · 0 评论 -
小米官网过渡式轮播图
Version 1第一次自己尝试轮播图，思路大概是这样的：点击按钮切换图片&导航点→点击导航点切换图片→自动播放图片并切换导航点→添加过渡效果其中，切换图片用的是修改src的方式，导致我在添加过渡时绕了弯路，最后的效果差强人意，这只是过渡轮播图的第一版。后来又尝试了把图片横着排，改变left的第二版，意识到官网的过渡效果应该同时包括淡入和淡出，即上一张图片淡出的时候下一张图片淡入，我前两次的尝试都是把每张图片分开的，不论是修改src还是修改left，两张图片没有交集，自然做不出好的过渡效原创 2021-02-16 19:57:27 · 837 阅读 · 0 评论 -
Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候，发现了该问题，现总结如下：outlineoutline和border类似，只不过outline不占用空间，而border占用空间 #box1{ width: 300px; height: 300px; margin: 0px auto; background-color: #bfa; outline: 10px solid green; border: 5px solid red; } #box2{ width: 300px; height: 30原创 2021-02-12 16:31:50 · 1036 阅读 · 0 评论 -
HTML/CSS项目练习——小米首页
项目搭建搭建创建index.html放css的文件夹，加入reset.css复制fs文件夹，图片文件夹改index.html的title引入reset.css和图标字体新建index.css（专门给主页写样式，名称要对应，方便查找）引入index.css新建base.css，存放公共样式（在每一个页面中都引入）引入base.css公共样式写clearfix统一网页的字体，写在body中顶部导航结构公共样式给body加上min-width，限定最小宽度设置类w，表原创 2020-12-09 19:14:46 · 1066 阅读 · 4 评论 -
JS练习11——二级菜单
不需要在意css文件内是什么内容，toggleClass函数和move函数见JS笔记下注意点：这段代码中动画是用js实现的，可以换成transition试试先获取begin，执行toggleClass，再获取end，然后将高度再重置为begin，这部操作虽然显得冗余，却是为了设置动画效果f(openDiv != parentDiv && !hasClass(openDiv , “collapsed”))语句的作用是，防止展开某个菜单又将这个菜单合上时，无法再展开该菜单执行完函数原创 2021-01-04 23:10:41 · 233 阅读 · 0 评论 -
JS练习10——轮播图
注意点：（有点难，多做几次，结合CSS过渡效果味道更好哦）要把图片全放在一行内，通过js（或者弹性盒子），使得加入新的图片或者减少图片时，图片不会到下一行中。在增加或减少超链接（导航点）时，超链接能够始终居中。由于for循环会先执行完毕，i的值会变成4，所以把索引值当作属性num存起来。需要同时考虑图片的切换和导航点的切换。利用封装好的move函数（定时器），使得图片每隔一段时间就向左移动，移动到最后一张时，下一张放第一张图片，通过CSS将最后一张切换成第一张。一次只能执行一个动画，存在自动切换原创 2021-01-04 21:09:52 · 264 阅读 · 0 评论 -
JS练习9——点击按钮div自动移动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-co原创 2021-01-02 11:29:10 · 2838 阅读 · 0 评论 -
JS练习8——自动切换图片（计时器）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取img标签 var img1 = document.getElementById("img1");原创 2021-01-02 09:40:39 · 588 阅读 · 0 评论 -
JS练习7——用方向键操控div
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } &原创 2021-01-01 21:51:05 · 232 阅读 · 0 评论 -
JS练习6——拖拽
拖拽的流程当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove当鼠标松开时，被拖拽元素固定在当前位置 onmouseup拖拽点和一开始拖拽的点保持一致关键点是这几行代码： event = window.event; //div的偏移量 鼠标.clentX - 元素.offsetLeft //div的偏移量 鼠标.clentY - 元素.offsetTop var ol = event.clientX - obj.of原创 2020-12-27 14:47:33 · 206 阅读 · 1 评论 -
JS练习5——盒子跟随鼠标的移动而移动
补充：听说clientX和clientY只要把绝对定位改为fixed即可听说现在chrome已经解决了兼容性问题，下次试试不兼容IE8的前提下还是用pageX和pageY吧<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 1原创 2020-12-26 11:32:00 · 1195 阅读 · 0 评论 -
JS练习4——验证用户读完协议
有些时候，我们希望用户在读完协议后才能勾选下方的“我已读完协议”，可以这样做：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #info{ width: 300px; height: 500px; background-color:.原创 2020-12-26 09:39:55 · 408 阅读 · 0 评论 -
JS练习3——增加与删除员工
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="s原创 2020-12-23 12:10:10 · 406 阅读 · 2 评论 -
JS练习2——DOM全选
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title><script typ.原创 2020-12-21 20:28:28 · 267 阅读 · 1 评论 -
JS练习1——点击按钮切换图片
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; padding:原创 2020-12-20 17:07:39 · 1248 阅读 · 2 评论