Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex项目属性及页面组件开发思路（12.25前端开发学习作业）
Blogger Information
Blog 26
fans 0
comment 2
visits 35052
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
flex项目属性及页面组件开发思路（12.25前端开发学习作业）
小辰
Original
707 people have browsed it

1.下面是flex六个属性的图片1.下面是flex六个属性的图片

2.下面是我对页面组件的理解2.下面是我对页面组件的理解

对于页面组件的感觉，我感觉就是HTML用link引用组件，一个是在直接在html中做样式，一个是在
css和js中对页面进行设计，不过通过组件开发，可以高效的进行页面设计，不用再做一些重复的操作，
大大提高效率。总的来说，组件开发很意义的。开发的组件，可以专门对某个部分，进行设计，对页面
的修改提供很大的便利。
实现过程：1.分析页面层次2.确定每个层次需要的组件3.按照页面格式，一步步设置样式4.实现样式5.进行调整优化。

3.默认的导航代码

首先是效果图

下面是代码

我把html和css代码写在一个文档方便查看，因为代码比较少，只是写一次，估计这个样式用不到了，以后做
完整网页的时候不会放一起的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public-header.css">
  6.     <link rel="stylesheet" href="font/iconfont.css">
  7.     <title>导航</title>
  8.     <style type="text/css">
  9. /*头部导航*/
  10.     .public-header {
  11.     height: 44px;
  12.     background-color: black;
  13.     padding: 0 20px;
  14.     display: flex;
  15.     flex-flow: row nowrap;
  16. }
  17.     .public-header a {
  18.     line-height: 44px;
  19.     color: #ccc;
  20.     padding: 0 10px;
  21.     text-decoration: none;
  23. }
  24.     .public-header a:hover {
  25.     background-color: #fff;
  26.     color: black;
  27. }
  28.     .public-header > span {
  29.     margin-left: auto;
  30. }
  31.     .public-header > span i {
  32.     font-size: 16px;
  33.     color: #cccccc;
  34.     padding-right: 10px;
  35. }
  36. /*大标题*/
  37.     .public-headline {
  38.     padding: 30px;
  39.     text-align: center;
  40. }
  41.     .public-headline span {
  42.     font-size: 30px;
  43.     font-weight: bolder;
  44.     padding-bottom: 7px;
  45.     border-bottom: 3px solid red;
  46.     </style>
  47. </head>
  48. <body>
  49. <div class="public-header">
  50.     <a href="">网站首页</a>
  51.     <a href="">专题</a>
  52.     <a href="">网站导航</a>
  53.     <a href="">二手商品</a>
  54.     <a href="">讨论区</a>
  55.     <span>
  56.         <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  57.         <a href="">免费注册</a>
  58.     </span>
  59. </div>
  60. <!--大标题-->
  61. <div class="public-headline">
  62.     <span>二手交易</span>
  63. </div>
  64. </body>
  65. </html>

以上就是我作业的全部内容，多谢观看

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