随笔分类 -  前端实例

JS实例-DOM-切换图片
摘要：切换图片 <style> *{ margin:0; padding:0; } #outer{ width:1500px; margin:50px auto; padding:20px; /*文本居中*/ text-align: center; } </style> <script> window.o 阅读全文
posted @ 2020-08-12 20:40 花未眠0619 阅读(464) 评论(0) 推荐(0)
JS实例—DOM的增删改
摘要：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* *{ margin:0; padding:0; }*/ #total{ width:400px; border:1 阅读全文
posted @ 2020-08-12 16:10 花未眠0619 阅读(425) 评论(0) 推荐(0)
JS实例-DOM查询
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>调查表</title> <style> *{ margin:0; padding:0; } #total{ width:300px; height:200px; 阅读全文
posted @ 2020-08-12 10:34 花未眠0619 阅读(287) 评论(0) 推荐(0)
JS实例-全选练习
摘要：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="" method="post"> <label for="checkedAllBox 阅读全文
posted @ 2020-08-12 10:33 花未眠0619 阅读(257) 评论(0) 推荐(0)
JS实例-01
摘要：输入成绩（0-100），不同的分数段奖励不同while(true){var a=prompt('请输入成绩');if (a>=0&&a<=100){ break;}}if (a==100){ alert('奖励一辆汽车')}else if (a>=80&&a<99){ alert('奖励一本笔记本' 阅读全文
posted @ 2020-07-29 15:07 花未眠0619 阅读(240) 评论(0) 推荐(0)
HTML实例-02-京东顶部导航条
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--设置网页标题--> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><!--设置标题上的图片--> <link rel="sh 阅读全文
posted @ 2020-07-24 16:24 花未眠0619 阅读(926) 评论(0) 推荐(0)
HTML实例-01-轮播图
摘要：body部分 <div class="outer"> <ul class="img-list"> <li><a href="#"><img src="img/1.jpg" alt=""></a></li> <li><a href="#"><img src="img/2.jpg" alt=""></a 阅读全文
posted @ 2020-07-17 15:57 花未眠0619 阅读(462) 评论(0) 推荐(0)