![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开始
文章平均质量分 64
哇~咔咔
这个作者很懒,什么都没留下…
展开
-
3D转换案例
3D转换案例1、两面翻转的盒子2、3D导航栏 1、两面翻转的盒子 样例: <style> body { perspective: 500px; } .box { position: relative; width: 300px; height: 300px; margin: 100px auto; tr原创 2021-12-16 10:24:28 · 117 阅读 · 0 评论 -
学成在线案例
学成在线案例 样例: 1、CSS属性书写顺序 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式) 自身属性:width / height / margin / padding / border / background 文本属性:color / font / text-decoration / text-align / vertical-align / w原创 2021-12-06 13:53:26 · 551 阅读 · 0 评论 -
土豆案例。。
土豆案例 核心原理: 原先半透明的黑色遮罩看不见, 鼠标经过 大盒子,就显示出来。 遮罩的盒子不占有位置, 就需要用绝对定位 和 display 配合使用 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name原创 2021-12-02 16:07:27 · 681 阅读 · 0 评论 -
淘宝轮播图
淘宝轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-12-02 14:25:12 · 111 阅读 · 0 评论 -
网络布局+案例
网络布局+案例小米经典案例常见的网络布局浮动布局注意点案例 小米经典案例 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-11-22 14:13:27 · 345 阅读 · 0 评论 -
快报模块综合案例
新知识点: 去掉 li 前面的 项目符号(小圆点) 语法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2021-11-19 15:03:01 · 98 阅读 · 0 评论 -
产品模块综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>产品原创 2021-11-19 13:54:30 · 412 阅读 · 0 评论 -
新浪导航案例-padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新浪原创 2021-11-17 13:16:28 · 173 阅读 · 0 评论 -
王者荣耀+五彩导航
王者荣耀小图 如下图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-11-16 18:37:10 · 243 阅读 · 0 评论 -
简洁版小米侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简洁原创 2021-11-16 13:13:58 · 215 阅读 · 0 评论 -
综合案例-新闻页面
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&转载 2021-11-14 14:03:38 · 303 阅读 · 0 评论 -
html综合案例
一个关于栾云平的表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-11-11 11:33:48 · 137 阅读 · 0 评论