收藏
批改状态：合格
老师批语：同样的效果, 实现方式有多种, 很难说哪一种就是最好的, 还是要看需求吧
一、小框架作业
一共分为3部分：1、首页；2、welcome页面；3、内容页
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">
<style>
body {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4 {
font-size: 26px;
font-weight: normal;
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul,
li,
a {
text-decoration: none;
color: black;
}
/* 首页 */
.header {
position: block;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 65px;
background-color: lightgray;
}
.header h1 {
margin: 0;
padding: 0 0 0 25px;
height: 65px;
}
.header h1 span {
line-height: 65px;
}
.header h1 span:first-of-type {
color: coral;
font-size: 28px;
text-shadow: 2px 2px 1px #333;
font-weight: bold;
}
.header h1 span:last-of-type {
color: #444444;
font-size: 28px;
padding-left: 10px;
}
.main {
display: flex;
}
.main .nav {
flex: 0.2;
background-color: white;
}
.main .nav .nav-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.main .nav .nav-list a {
text-decoration: none;
color: black;
}
.main .nav .nav-list .nav-list-title {
margin: 25px 0 0;
padding: 0 0 10px 45px;
font-size: 1.2rem;
font-weight: bold;
color: black;
}
.main .nav .nav-list .nav-list-list {
list-style-type: none;
margin: 0;
padding: 0 0 0 65px;
font-size: 0.9rem;
}
.content {
flex: 0.8;
}
/* welcome页面 */
.t_title1 {
color: #0880d7;
}
.t_title3 {
font-size: 18px;
/* margin: 10px 0; */
color: gray;
padding: 10px 0;
}
.t_title_ul .t_title_li {
font-size: 14px;
padding: 5px 0;
}
/* 2_页面结构 */
.php-p-30 {
padding: 30px;
}
.php-p-20 {
padding: 20px;
}
.php-p-20 h3 {
font-size: 18px;
}
.php-pl-20 {
padding-left: 20px;
}
.php-ml-20 {
margin-left: 20px;
}
.php-mb-10 {
margin-bottom: 10px;
}
.php-mt-10 {
margin-bottom: 10px;
}
.php-mt-30 {
margin-top: 30px;
}
.php-li-disc {
list-style-type: none;
}
.php-lh-normal {
line-height: 1.5rem;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
<div class="header">
<h1><span>phpcn UI</span><span>用户参考手册</span></h1>
</div>
<div class="main">
<div class="nav">
<ul class="nav-list">
<li class="nav-list-title">前端基础</li>
<ul class="nav-list-list">
<li><a href="welcome.html" target="content">框架安装</a></li>
<li><a href="2_页面结构.html" target="content">页面结构</a></li>
<li><a href="welcome.html" target="content">常用标签</a></li>
</ul>
<li class="nav-list-title">框架组件</li>
<ul class="nav-list-list">
<li><a href="welcome.html" target="content">栅格布局</a></li>
<li><a href="welcome.html" target="content">常用样式</a></li>
<li><a href="welcome.html" target="content">文本与背景色</a></li>
</ul>
</ul>
</div>
<div class="content" id="content">
<iframe src="welcome.html" frameborder="0" name="content" width="100%" height="900"></iframe>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、welcome页面
<!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>
<style>
body {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4 {
font-size: 26px;
font-weight: normal;
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul,
li,
a {
text-decoration: none;
color: black;
}
/* 首页 */
.header {
position: block;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 65px;
background-color: lightgray;
}
.header h1 {
margin: 0;
padding: 0 0 0 25px;
height: 65px;
}
.header h1 span {
line-height: 65px;
}
.header h1 span:first-of-type {
color: coral;
font-size: 28px;
text-shadow: 2px 2px 1px #333;
font-weight: bold;
}
.header h1 span:last-of-type {
color: #444444;
font-size: 28px;
padding-left: 10px;
}
.main {
display: flex;
}
.main .nav {
flex: 0.2;
background-color: white;
}
.main .nav .nav-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.main .nav .nav-list a {
text-decoration: none;
color: black;
}
.main .nav .nav-list .nav-list-title {
margin: 25px 0 0;
padding: 0 0 10px 45px;
font-size: 1.2rem;
font-weight: bold;
color: black;
}
.main .nav .nav-list .nav-list-list {
list-style-type: none;
margin: 0;
padding: 0 0 0 65px;
font-size: 0.9rem;
}
.content {
flex: 0.8;
}
/* welcome页面 */
.t_title1 {
color: #0880d7;
}
.t_title3 {
font-size: 18px;
/* margin: 10px 0; */
color: gray;
padding: 10px 0;
}
.t_title_ul .t_title_li {
font-size: 14px;
padding: 5px 0;
}
/* 2_页面结构 */
.php-p-30 {
padding: 30px;
}
.php-p-20 {
padding: 20px;
}
.php-p-20 h3 {
font-size: 18px;
}
.php-pl-20 {
padding-left: 20px;
}
.php-ml-20 {
margin-left: 20px;
}
.php-mb-10 {
margin-bottom: 10px;
}
.php-mt-10 {
margin-bottom: 10px;
}
.php-mt-30 {
margin-top: 30px;
}
.php-li-disc {
list-style-type: none;
}
.php-lh-normal {
line-height: 1.5rem;
}
</style>
</head>
<body style="padding:50px;">
<h1 class="t_title1">phpcn UI 框架特点:</h1>
<h3 class="t_title3">遵循HTML5/CSS3/ES5/6编程规范, 具有如下特点:</h3>
<ul class="t_title_ul">
<li class="t_title_li"><strong>免费开源</strong>: 您不需要付任何费用, 就可以用在你的项目或商业应用中</li>
<li class="t_title_li"><strong>简洁高效</strong>: 秉承大道至简原则, 一切为开发者服务, 在不失功能前提下进行最大程序的简化</li>
<li class="t_title_li"><strong>易学好用</strong>: 开箱即用, 学习门槛极低, 优雅易记的命名规范, 方便您的二次开发与扩展</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、内容页
<!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="css/style.css"> <link rel="stylesheet" href="css/monokai-sublime.css"> <link rel="stylesheet" href="css/tomorrow.css"> <link rel="stylesheet" href="css/github.css"> <title>2_页面结构</title> </head> <body class="php-p-30"> <h1>HTML文档结构</h1> <div class="php-p-20"> <h3>目录:</h3> <ul> <li class="php-pl-20"><a href="#chapter1">1. 什么是HTML文档</a></li> <li class="php-pl-20"><a href="#chapter2">2. 为什么要学习编写HTML文档</a></li> <li class="php-pl-20"><a href="#chapter3">3. HTML文档结构</a></li> <li class="php-pl-20"><a href="#chapter4">4. HTML标签的基本语法</a></li> </ul> </div> <h2 class="php-mb-10 php-mt-30" id="chapter1">1.什么是HTML文档</h2> <ul class="php-mt-10 php-lh-normal"> <li class="php-pl-20 phpcn-li-disc"><strong>HTML</strong>:超文本标记编写的结构化文档</li> <li class="php-pl-20 phpcn-li-disc"><strong>超文本标记</strong>: 是用来描述其它数据的元数据标签</li> <li class="php-pl-20 phpcn-li-disc"><strong>结构化文档</strong>: 文档是由不同层级的元素组成的树形结构</li> </ul> <hr color="lightgrey"> <h2 class="php-mb-10 php-mt-30" id="chapter2">2.为什么要学习编写HTML文档</h2> <ul class="php-mt-10 php-lh-normal"> <li class="php-pl-20 php-li-disc">互联网最终呈现给用户的最终界面都是由HTML文档构成</li> <li class="php-pl-20 php-li-disc">HTML文档由纯文本组成, 独立于任何编程语言</li> <li class="php-pl-20 php-li-disc">掌握HTML文档编写是学习Web开发第一步</li> </ul> <hr color="lightgrey"> <h2 class="php-mb-10 php-mt-30" id="chapter3">3.HTML文档结构</h2> <p class="php-mt-20">目前主流的是HTML5文档结构</p> <pre> <code class="html"> <!--文档类型--> <!DOCTYPE html> <!--html文档开始, lang设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示--> <!--lang属性非必须,如果页页就是提醒翻译,可以删除它,或者改成: zh-cn, 让它与你的系统语言一致--> <html lang="en"> <!--head是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取--> <head> <!-- meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等--> <!-- charset是你在编写和存储这个html文档时, 使用的编码集--> <meta charset="UTF-8"> <!-- title是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息--> <title>html文档的结构</title> </head> <!--以下内容会显示在当前浏览器的窗口中, 也是用户最感兴趣的部分--> <body> <h1>PHP中文网的小伙伴们,大家好~~</h1> </body> </html> </code> </pre> <hr color="lightgrey"> <h2 class="php-mb-10 php-mt-30" id="chapter4">4.HTML标签的基本语法</h2> <ul class="php-mt-10 php-lh-normal"> <li class="phpcn-ml-20 phpcn-li-disc">根据包装/描述元素的类型, HTML提供了二种标签类型: 双标签与单标签</li> <li class="phpcn-ml-20 phpcn-li-disc">双标签: 元素内容通常来自HTML文档本身,如各种文本, 表单,表格,列表等</li> <li class="phpcn-ml-20 phpcn-li-disc">单标签: 元素内容通常自外部,如图像,样式表,表单控件等, 控制排版标签也是单标签</li> <li class="phpcn-ml-20 phpcn-li-disc">不过也有例外, 例如JS脚本引入, 影视与音频插入等外部资源, 也使用了双标签</li> </ul> <pre> <code class="html"> <!-- 1. 双标签 --> <!-- 语法: <起始标签 属性="值">内容</起始标签> --> <h2 class="red">前端真好玩</h2> <form>...</form> <ul><li>...</li></ul> <table>...</table> <!-- 2. 单标签 --> <!-- 语法: <标签 属性="值"> --> <img src="..." alt="..."> <input type="text" value=""> <link red="..." href="..."> <br> <hr> <!-- 例外: 双标签引入外部资源 --> <script src="..."></script> <video src="...">...</video> <audio src="...">...</audio> </code> </pre> </body> <!--引入代码高亮插件--> <script src="js/highlight.pack.js"></script> <!--初始化插件--> <script> hljs.initHighlightingOnLoad(); </script> </html>
点击 "运行实例" 按钮查看在线实例
小结：
1、可用flex布局，分左右两边；清单，内容页；
2、iframe，跳转指定内容页id值；
3、html代码需要转义才能在网上显示出来（可在网上找在线转换）；
4、可加入插件高亮显示转义代码；须加入相关js&css
内容页：
css：monokai-sublime.css、tomorrow.css、github.css；
JS：<!--引入代码高亮插件-->
<script src="js/highlight.pack.js"></script>
<!--初始化插件-->
<script>
hljs.initHighlightingOnLoad();
</script>
5、css样式封装；可将常用样式封装起来，直接调用
ex. php-ml-30{ margin-left: 30px; } 左边距30px;
<div class="php-ml-30">box</div>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
