Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月25，关于FLEX项目属性的了解
Blogger Information
Blog 30
fans 0
comment 1
visits 24063
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，关于FLEX项目属性的了解
曾
Original
597 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.     <a href="">讨论区</a>
  16.     <span>
  17.             <a href=""><i class="iconfont icon-huiyuan"></i>登录</a>
  18.             <a href="">免费注册</a>
  19.     </span>
  20. </div>
  21. </body>
  22. </html>

头部组件CSS代码，@import属性表示导入另外一个外部CSS文件

  1. /*导入清楚默认样式*/
  2. @import "../public-reset.css";
  4. .public-header{
  5.     height: 44px;
  6.     background-color: black;
  7.     padding: 0 20px;
  8.     display: flex;
  9. }
  11. .public-header>a{
  12.     padding: 0 10px;
  13.     line-height: 44px;
  14.     color: #cccccc;
  15. }
  16. .public-header>a:hover{
  17.     background-color: #fff;
  18.     color: black;
  19. }
  20. .public-header>span{
  21.     margin-left: auto;
  22. }
  23. .public-header>span>a{
  24.     line-height: 44px;
  25.     color: #cccccc;
  26.     padding: 0 20px;
  27. }

效果图

大标题组件HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public-headline.css">
  6.     <title>公共大标题</title>
  7. </head>
  8. <body>
  9. <div class="public-headline">
  10.     <span>
  11.         二手交易
  12.     </span>
  13. </div>
  14. </body>
  15. </html>

CSS代码

  1. /*导入清楚默认样式*/
  2. @import "../public-reset.css";
  4. .public-headline{
  5.     text-align: center;
  6.     padding: 30px;
  7. }
  9. .public-headline>span{
  10.     font-size: 30px;
  11.     font-weight: bolder;
  12.     border-bottom: 3px solid red;
  13. }

效果图

组装后的HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="demo.css">
  6.     <link rel="stylesheet" href="static/font/iconfont.css">
  7.     <title>整体效果</title>
  8. </head>
  9. <body>
  10. <!--头部组件-->
  11. <div class="public-header">
  12.     <a href="">网站首页</a>
  13.     <a href="">专题</a>
  14.     <a href="">网站导航</a>
  15.     <a href="">二手商品</a>
  16.     <a href="">讨论区</a>
  17.     <span>
  18.             <a href=""><i class="iconfont icon-huiyuan"></i>登录</a>
  19.             <a href="">免费注册</a>
  20.     </span>
  21. </div>
  22. <!--公共大标题组件-->
  23. <div class="public-headline">
  24.     <span>
  25.         二手交易
  26.     </span>
  27. </div>
  28. </body>
  29. </html>

CSS代码

  1. /*导入清楚默认样式*/
  2. @import "public/public-reset.css";
  3. /*导入头部组件*/
  4. @import "public/public-header/public-header.css";
  5. /*导入公共大标题组件*/
  6. @import "public/public-headline/public-headline.css";

效果图

今天又手写了FLEX项目属性，好记性不如烂笔头

做个笔记标记一下，新手一定要注意，在做整体效果组装的时候一定不要直接复制文件，因为不如果不在同一个目录或者同一层，路径是不对的，不能引用到文件，不要为了图方便直接复制，要用手打。
在做实例的时候发现，新手有时候会忽略到排版的问题，要多加练习才能更好的掌握。

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