实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写总结:
文字总结:
这次作业提交时发现a标签里面不可以套自定义列表,本想不用ul做出效果。但是效果做出来,下次一定会记住这样会不符合w3c准则。感谢老师过去两周的教导,还有我真的是个男同学。