Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019年12月25日作业
Blogger Information
Blog 5
fans 0
comment 2
visits 3066
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019年12月25日作业
Herry.
Original
616 people have browsed it

课堂笔记



导航顶部Html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  6.     <link rel="stylesheet" href="public-header.css">
  7.     <title>全栈头部导航</title>
  8. </head>
  9. <body>
  10. <div class="public-header">
  11.     <a href="">网站首页</a>
  12.     <a href="">专题</a>
  13.     <a href="">二手商品</a>
  14.     <a href="">讨论区</a>
  15.     <span>
  16.         <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  17.         <a href="">快速注册</a>
  18.     </span>
  20. </div>
  21. </body>
  22. </html>​
初始化组件CSS代码
  1. /*初始化组件*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     /*outline: 1px dashed red;!*参考线*!*/
  6. }
  8. bdoy {
  9.     font-size: 15px;
  10.     color: #666666;
  11.     background-color: #efefef;
  12. }
  14. a {
  15.     text-decoration: none;/*去掉下划线*/
  16.     color: #404040;
  17.     font-size: 15px;
  18. }
  20. li {
  21.     list-style: none;/*去掉标签前面的小黑点*/
  22. }​
头部导航CSS代码
  1. /*导入元素的公共初始化样式表*/
  2. /*@import "../../public/public_reset.css";二者可互用*/
  3. @import url(../public_reset.css);
  5. /*全栈头部导航*/
  6. .public-header {
  7.     height: 44px;
  8.     background-color: black;
  9.     padding: 0 20px;/*文字不靠边*/
  10.     /*转为弹性布局*/
  11.     display: flex;
  12.     flex-flow: row nowrap;/*水平不换行*/
  13. }
  15. .public-header a {
  16.     line-height: 44px;
  17.     color: #cccccc;
  18.     padding: 0 10px;
  19. }
  21. .public-header > a:hover {
  22.     background-color: #fff;
  23.     color: black;
  24. }
  26. .public-header > span {
  27.     margin-left: auto;/*尽可能将左侧剩余都给右侧*/
  28. }
  30. /*字体图标*/
  31. .public-header > span i {
  32.     font-size: 16px;
  33.     color: #cccccc;
  34.     padding-right: 15px;
  35. }​
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这些属性手写可能并不能完全记住 , 还要在项目中不断的去用它, 学了就要用呀, 尽可能用新技术, 人不能总活在记忆中...
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
Herry. 2019-12-30 10:31:07
因为学起来有些吃力 我现在尽可能的多看几遍教程 多熟悉一下代码的含义 然后在实战中进行运用
1 floor
Author's latest blog post