Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1225组件flex作业
Blogger Information
Blog 30
fans 0
comment 1
visits 22023
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
1225组件flex作业
Admin
Original
622 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" type="text/css" href="static/font/iconfont.css">
  7.     <link rel="stylesheet" type="text/css" href="demo.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>
  1. @import url('public/public_reset/public-reset.css');
  2. @import url('public/public_header/public-header.css');
  3. /*header部分*/
  4. .public-header{
  5.     background: black;
  6.     height: 40px;
  7.     padding:0 25px;
  8.     display: flex;
  9.     flex-flow: nowrap row;
  10. }
  11. .public-header a{
  12.     line-height: 40px;
  13.     color: white;
  14.     padding: 0 10px;
  15. }
  16. .public-header span{
  17.     margin-left: auto;
  18. }
  19. .public-header span i{
  20.     padding-right: 5px;
  21. }
  22. .public-header > a:hover{
  23.     background: white;
  24.     color: black;
  25. }
  26. /*reset*/
  27. *{
  28.     margin: 0;
  29.     padding: 0;
  30.     outline: 1px dashed red;
  31. }
  32. body{
  33.     font-size: 13px
  34.     color: #555555;
  35.     background: #efefef;
  36. }
  37. a{
  38.     font-size: 13px;
  39.     color: #404040;
  40.     text-decoration: none;
  41. }
  42. li{
  43.     list-style: none;
  44. }

组件化布局
个人认位组件化的好处最直接的就是一种布局思路，这种布局思路可以增强代码的重复率！你甚至可以在空闲的时候打造一手你自己的专属组件。在你学会了less后再配合这种布局思路，就可以更加灵活更加快捷的布局页面！

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：less, sass, 其实就是用编程的方式来生成css, 最终的结果是一样的, 定义一些变量... 你还是先把原生的掌握, 再去学less,sass,也就是几个小时的事
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