前端练习项目
文章平均质量分 65
皮皮潇冲冲冲
徒手摘星,即使徒劳无功,也不至于一手淤泥
展开
-
【练习】Vue实现天气查询(通过接口)
功能示例输入想要查询的城市,回车后在下方显示最近几天的天气CSS代码index.cssbody{ font-family:'Microsoft YaHei'; }.wrap{ position: fixed; left:0; top:0; width:100%; height:100%; /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */ /* b原创 2021-02-08 20:29:02 · 769 阅读 · 0 评论 -
【练习】Vue实现记事本
功能要求输入框输入后,回车可添加输入的内容到事件栏鼠标移到某一栏上可以点击×进行该栏的删除左下角可以统计事件的条数右下角可以清空事件实现步骤生成列表结构(v-for 数组)获取用户输入(v-model 双向绑定)回车,新增数据(v-on .enter事件修饰符)页面布局不熟悉,可以通过审查元素的方式快速找到元素CSS代码html,body { margin: 0; padding: 0;}body { background: #fff ;}button原创 2021-02-08 20:24:48 · 325 阅读 · 0 评论 -
【练习】jQuery实现表格的增删查改
题目(1)当页面加载完成功后显示用户列表;(2)用户新增;(3)选中"序号"才能用户编辑或者删除;(4)可以根据用户工号和名称查询(不考虑模糊查询、使用完整的工号和名称)注意事项绑定单击勾选事件时,不能将全部的tr行进行绑定,这样会导致每新增一行重复绑定需要再文档加载完成后自动执行一个绑定事件,和每增加一行表格进行新的绑定实现代码html<!DOCTYPE html><html lang="en"><head> <me原创 2021-01-28 18:45:10 · 848 阅读 · 1 评论 -
【练习】js实现两种轮播图效果
js轮播图隐藏式轮播图滑动式轮播图结语隐藏式轮播图<html><head> <meta charset="utf-8"> <title>轮播特效</title> <script src="js/jquery.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} img{display: block;} #b原创 2020-07-26 16:38:38 · 162 阅读 · 0 评论 -
【练习】DIY青志协网站(html+css+js未分开)
南大科院青志协主页面毕业季页面部门介绍剩余页面省略效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/20200726162837521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMwMzg2Nw==,size_16,color_FFFFFF,t_70)主页面<html&g原创 2020-07-26 16:34:54 · 1375 阅读 · 0 评论 -
【练习】星巴克介绍页面
下面展示一些 内联代码片。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>星巴克</title> <style type="text/css"> *{ margin: 0; padding: 0; } .body_header{ height: 8px; background-color:原创 2020-05-24 22:26:35 · 914 阅读 · 0 评论 -
【练习】搜狗搜索界面
HTML代码 <!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>搜狗</title> <link rel="stylesheet" type="text/css" href="css/sogou.css"></head><body> <div class="sogou"> <d原创 2020-05-16 15:57:17 · 450 阅读 · 0 评论 -
【练习】苏宁易购注册界面的实现
html代码+css代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>苏宁易购</title> <style> body{ font-family: "microsoft yahei"; background-color: rgb(248,248,248); font-size: 12px; } div.big{原创 2020-05-10 19:21:14 · 2506 阅读 · 2 评论