随笔分类 -  Frontend-Practice

Bootstrap练习：可折叠下拉菜单
摘要：代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial- 阅读全文
posted @ 2018-10-24 16:32 就俗人一个 阅读(1853) 评论(0) 推荐(0)
jQuery练习：表单模态框
摘要：代码：基于事件冒泡原理和事件委托 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: rgb(238, 238, 阅读全文
posted @ 2018-10-21 21:49 就俗人一个 阅读(674) 评论(0) 推荐(0)
JS练习：两级联动
摘要：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两级联动</title> <script> //准备数据 var provinces = [ ["深圳市", "东莞市", "惠州市", "广州市"], ["长沙市", " 阅读全文
posted @ 2018-10-18 17:17 就俗人一个 阅读(502) 评论(0) 推荐(0)
JS练习：商品的左右选择
摘要：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品的左右选择</title> <!-- 步骤分析 1. 确定事件: 点击事件 :onclick事件 2. 事件要触发函数 selectOne 3. selectOne要做 阅读全文
posted @ 2018-10-18 17:04 就俗人一个 阅读(587) 评论(0) 推荐(0)
JS练习：表格全选与全不选
摘要：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选与全不选</title> <script> function checkAll() { //获得当前第一个checkbox的状态 var check_1 = docum 阅读全文
posted @ 2018-10-18 16:28 就俗人一个 阅读(729) 评论(0) 推荐(0)
JS练习：替换式图片自动轮播
摘要：代码： 阅读全文
posted @ 2018-10-18 15:29 就俗人一个 阅读(268) 评论(0) 推荐(0)
JS练习：定时弹出广告
摘要：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function init() { setTimeout("showAD()", 3000); } function showAD() 阅读全文
posted @ 2018-10-18 14:10 就俗人一个 阅读(258) 评论(0) 推荐(0)
JS练习：显示和隐藏
摘要： 阅读全文
posted @ 2018-10-18 09:55 就俗人一个 阅读(209) 评论(0) 推荐(0)
JS练习：定时器--背景颜色交替变换
摘要：代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; background-color: 阅读全文
posted @ 2018-10-18 09:30 就俗人一个 阅读(2304) 评论(0) 推荐(1)
JS练习：切换图片
摘要：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function changeImg() { var img = document.getElementById("img1"); im 阅读全文
posted @ 2018-10-18 09:25 就俗人一个 阅读(229) 评论(0) 推荐(0)
CSS练习：仿小米官网
摘要：代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Zz...</title> <style> /*全局样式*/ * { margin: 0 auto; padding: 0; } a { text 阅读全文
posted @ 2018-10-14 16:48 就俗人一个 阅读(1192) 评论(0) 推荐(0)
表格的合并
摘要：html代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 表格的合并 colspan : 跨列 rowspan : 跨行 --> <table border="1p 阅读全文
posted @ 2018-10-12 14:12 就俗人一个 阅读(152) 评论(0) 推荐(0)