Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.25作业
Blogger Information
Blog 18
fans 0
comment 0
visits 10868
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
12.25作业
- 迷舍人
Original
601 people have browsed it

总结页面组件开发的思路与实现过程

就是把一个网站分为头部，中间，底部三个模块 先把每一个页面都写好然后在把他拼装成一个成品

顶部效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全站头部导航</title>
  6.     <link rel="stylesheet" href="../../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="public_header.css">
  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>
  19.     </div>
  20. </body>
  21. </html>

```css

{
margin: 0;
padding: 0;
/参考线/
/outline: red dashed 1px;*/
}

body{
font-size: 13px;
background-color: #EBEBEB;
color: #222222;

}

a{
font-size: 13px;
/去除下划线/
text-decoration: none;
color: #404040;
}
li{
list-style: none;
}

  1. ```css
  2. /*引入公共样式文件*/
  3. @import "../public_teset.css";
  5. .public-header{
  6.     height: 44px;
  7.     background-color: black;
  8.     padding: 0 20px;
  9.     display: flex;
  10. }
  11. .public-header a{
  12.     font-size: 13px;
  13.     color: #f5f2f0;
  14.     /*垂直居中*/
  15.     line-height: 44px;
  16.     padding: 0 10px;
  17. }
  19. .public-header > a:hover{
  20.     background-color: #e9e9e9;
  21.     color: black;
  22. }
  24. .public-header > span{
  25.     margin-left: auto;
  26. }
  28. .public-header > span i{
  29.     margin-right: 10px;
  30. }

手写作业




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
0 comments
Author's latest blog post