商品展示滚动条及算法
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none
阅读全文
posted @ 2024-12-06 10:08
12 2024 档案
拖动进度条的制作
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style:
阅读全文
posted @ 2024-12-05 17:00
制作类似京东商城产品详细图的放大镜
摘要：源码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 border:non
阅读全文
posted @ 2024-12-05 16:13
制作网页背景-星海特效
摘要：制作一个类似下图的网页背景 制作素材图片（在绿色块上右击鼠标可下载素材图片）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding:
阅读全文
posted @ 2024-12-04 15:01
时钟案例
摘要：制作一个运行的时钟，素材如下，可右击鼠标下载。 钟盘：时针：分针： 秒针： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; paddin
阅读全文
posted @ 2024-12-03 14:24
放假倒计时
摘要：练习放假倒计时，理解date及定时器的使用。效果如下图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #time{ font-size: 40px; color: red
阅读全文
posted @ 2024-12-03 11:12
九宫格布局
摘要：制作一个类似九宫格一样的网页布局，适合照片或电影展示等，效果如下图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; li
阅读全文
posted @ 2024-12-03 08:38
