导航条和工作内容纪要
一、导航条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <style type="text/css"> /* * 清除默认样式 */ *{ margin:0; padding:0; } /* * 设置ul */ .nav{ /*去除项目符号*/ list-style: none; /*为ul设置一个背景颜色*/ background-color: #6495ED; /*设置一个宽度*/ /* * 在IE6中,如果为元素指定了一个宽度,则会默认开启hasLayout */ width: 1000px; /*设置元素居中*/ margin: 50px auto; /*解决高度塌陷*/ overflow: hidden; } /** * 设置li */ .nav li{ /*设置li向左浮动*/ float: left; width: 25%; } .nav a{ /*将a转换为块元素*/ display: block; /*为a指定一个宽度*/ width: 100%; /*设置文字居中*/ text-align: center; /*设置一个上下内边距*/ padding: 5px 0; /*去除下划线*/ text-decoration: none; /*设置字体颜色*/ color: white; /*设置加粗*/ font-weight: bold; } /* * 设置a的鼠标移入的效果 */ .nav a:hover{ background-color: #c00; } </style> </head> <body> <!-- 创建导航条的结构 --> <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">联系</a></li> <li><a href="#">关于</a></li> </ul> </body> </html>
二、工作内容纪要
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } /*统一页面中的字体*/ body{ font: 12px/1 宋体; } /*设置outer的大小*/ .outer{ width: 300px; /*height: 473px;*/ /*background-color: #bfa;*/ /*设置outer居中效果*/ margin: 50px auto; } /*设置title的边框*/ .title{ /*设置上边框*/ border-top:2px #019e8b solid ; /*设置盒子的高度*/ height: 36px; /*设置背景样式*/ background-color: #f5f5f5; /*设置title的行高*/ line-height: 36px; /*设置title的内边距*/ padding: 0px 22px 0px 16px; } /*设置title中的超链接*/ .title a{ float: right; /*设置字体颜色*/ color: red; } /*设置h3*/ .title h3{ font: 16px/36px "微软雅黑"; } /*设置内容*/ .content{ border: 1px solid #deddd9; /*设置内边距*/ padding: 0px 28px 0px 20px; } /*设置内容中的超链接*/ .content a{ color: black; /*去除超链接的下划线*/ text-decoration: none; /*设置字体大小*/ font-size: 12px; } /*为超链接添加一个hover伪类*/ .content a:hover{ color: red; /*为超链接添加下划线*/ text-decoration: underline; } /*设置内容中的标题*/ .content h3{ margin-top: 14px; margin-bottom: 16px; } /* * 设置右侧的a的样式 */ .content .right{ /*设置向右浮动*/ float: right; } /*设置ul的样式*/ .content ul{ /*去除项目符号*/ list-style: none; /*为ul设置一个下边框*/ border-bottom: 1px dashed #deddd9; } /*取消最后一个ul的边框*/ .content .no-border{ border: none; } /*设置内容中的红色字体*/ .content .red{ color: red; font-weight: bold; } /*设置内容中的li*/ .content li{ margin-bottom: 15px; } </style> </head> <body> <!--创建一个外层div,容纳整个内容--> <div class="outer"> <!-- 工作信息的头部 --> <div class="title"> <a href="#">19年工作计划</a> <h3>近期工作</h3> </div> <!-- 工作信息的主要内容 --> <div class="content"> <h3><a href="#">golang工作内容</a></h3> <ul> <li> <a class="right" href="#"><span class="red">努力开发ing</span></a> <a href="#">工作时间:<span class="red">2019-04-27</span></a> </li> <li> <a class="right" href="#"><span class="red">勤奋工作ing</span></a> <a href="#">工作时间:<span class="red">2019-04-07</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-03-15</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-02-25</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-12-26</span></a> </li> </ul> <h3><a href="#">Java工作内容</a></h3> <ul> <li> <a class="right" href="#"><span class="red">披星戴月编码ing</span></a> <a href="#">工作时间:<span class="red">2016-04-10</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-03-17</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-02-20</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-12-23</span></a> </li> </ul> <h3><a href="#">前端工作内容</a></h3> <ul class="no-border"> <li> <a class="right" href="#"><span class="red">加班加点学习ing</span></a> <a href="#">工作时间:<span class="red">2019-05-10</span></a> </li> <li> <a class="right" href="#"><span>工作纪要</span></a> <a href="#">工作时间:<span>2019-03-16</span></a> </li> </ul> </div> </div> </body> </html>