实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>phpcnUI用户手册</title>
<style>
/*清空页面边距*/
body{
margin: 0;
padding: 0;
}
/*设置头部样式*/
header{
height: 57px;
background-color: #d4d4d4;
color: #555;
font-size: 28px;
}
/*给橙色字体加入特殊样式*/
header strong{
color: #ff7f50;
text-shadow: 2px 2px 2px black;
margin-left: 40px;
padding: 10px;
}
main{
display: flex;
}
/*给a标签设置样式以及聚焦样式*/
a{
text-decoration-line: none;
color: #333;
font-size: 14px;
}
a:hover{
font-weight: bold;
color: lightseagreen;
}
.left{
background-color: #eeeeee;
height: 905px;
width: 149px;
padding: 30px;
}
dl{
margin-left: 20px;
padding: 30px;
display: flex;
flex-flow: column nowrap;
}
dd{
margin: 0;
}
dt{
margin-left: -20px;
font-weight: bold;
}
.right{
padding:30px ;
}
ul li{
list-style: none;
}
.right div{
padding: 30px;
}
.right h2{
color: dodgerblue;
}
.right h2,.right h4{
font-weight: initial;
}
ul{
padding: 0;
}
</style>
</head>
<body>
<header><strong>phpcn UI</strong>用户参考手册</header>
<main>
<div class="left">
<dl>
<dt>前端基础</dt>
<a href=""><dd>框架安排</dd></a>
<a href=""><dd>页面结构</dd></a>
<a href=""><dd>常用标签</dd></a>
<a href=""><dd>CSS选择器</dd></a>
<a href=""><dd>CSS样式控制器</dd></a>
<a href=""><dd>CSS盒模型</dd></a>
<a href=""><dd>CSS浮动与定位</dd></a>
<a href=""><dd>CSS常用布局方式</dd></a>
<dt>框架组件</dt>
<a href=""><dd>栅格布局</dd></a>
<a href=""><dd>常用样式</dd></a>
<a href=""><dd>文本与背景色</dd></a>
<a href=""><dd>表格</dd></a>
<a href=""><dd>分页条</dd></a>
</dl>
</div>
<div class="right">
<div>
<h2>phpcn UI 框架特点:</h2>
<h4>遵循HTML5/CSS3/ES5/6编程规范, 具有如下特点:</h4>
<ul>
<li><strong>免费开源:</strong>您不需要付任何费用, 就可以用在你的项目或商业应用中</li>
<li><strong>简洁高效:</strong>秉承大道至简原则, 一切为开发者服务, 在不失功能前提下进行最大程序的简化</li>
<li><strong>易学好用:</strong>开箱即用, 学习门槛极低, 优雅易记的命名规范, 方便您的二次开发与扩展</li>
</ul>
</div>
</div>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
![6PKBY)GV]66({FBO2FP[7S2.png](https://img.php.cn/upload/image/591/510/644/1573464488505468.png "1573464488505468.png")
手写总结：
文字总结：
这次作业提交时发现a标签里面不可以套自定义列表，本想不用ul做出效果。但是效果做出来，下次一定会记住这样会不符合w3c准则。感谢老师过去两周的教导，还有我真的是个男同学。
