前端框架手册小试牛刀_2019/9/10作业
程序员文章站
2022-03-11 14:19:55
...
图片演示
部分代码
首页代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>零度前端css框架</title> </head> <body> <header> <div class="nav ld-m-p-0 ">零度前端css框架用户参考手册</div> </header> <div class="content "> <ul class="ld-m-p-0 ld-h-500 ld-bg-eee"> <li class="ld-mt-10"> <a href="jj.html" target="content">框架简介</a> </li> <li class="ld-mt-10"> <a href="ys.html" target="content">常用样式</a> </li> <li class="ld-mt-10 "><a href="wb.html" target="content">文本与背景色</a> </li> <li class="ld-mt-10"><a href="bg.html" target="content">表格处理</a></li> <li class="ld-mt-10 "><a href="sg.html" target="content">栅格布局</a> </li> </ul> <iframe src="jj.html" frameborder="0" name="content"></iframe> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
加载公共css样式代码(时间安排问题就写了几个在这里了)
实例
@import "static/changyong.css"; @import "static/wenben.css"; @import "static/biaoge.css"; @import "static/shange.css"; .nav { width: 100%; height: .6rem; font-size: 0.3rem; background-color: lightgray; } .content ul li { list-style-type: none; font-size: 0.2rem; } .content ul li a { text-decoration: none; color: #000; } .content { display: flex; } .content ul { width: 16%; } .content iframe { width: 9rem; flex: 1; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
代码高亮
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <link rel="stylesheet" href="style.css"> --> <!-- 设置代码高亮插件的显示模式--> <link rel="stylesheet" href="../static/js/highlight/styles/default.css"> <link rel="stylesheet" href="../static/js/highlight/styles/monokai-sublime.css"> <link rel="stylesheet" href="../static/js/highlight/styles/tomorrow.css"> <link rel="stylesheet" href="../static/js/highlight/styles/github.css"> <title>常用样式</title> </head> <body> 常用样式 <pre> <code class="html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>常用样式</title> </head> <body> 常用样式 </body> </html> </code> </pre> <!--引入代码高亮插件--> <script src="../static/js/highlight/highlight.pack.js"></script> <!--初始化插件--> <script> hljs.initHighlightingOnLoad(); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
把代码封装好可以快捷调用
-
天天上班没假放时间只能写这么一丁点了。。代码虽简单但不熟练记得有这么回事英语有点蛋疼,时间都花在观摩视频上了