博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4351
积分:0
P豆:52

flex项目属性及页面组件开发思路(12.25前端开发学习作业)

2019年12月29日 19:42:20阅读数:188博客 / 小辰/ 前端学习

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;
  22. }
  23. .public-header a:hover {
  24. background-color: #fff;
  25. color: black;
  26. }
  27. .public-header > span {
  28. margin-left: auto;
  29. }
  30. .public-header > span i {
  31. font-size: 16px;
  32. color: #cccccc;
  33. padding-right: 10px;
  34. }
  35. /*大标题*/
  36. .public-headline {
  37. padding: 30px;
  38. text-align: center;
  39. }
  40. .public-headline span {
  41. font-size: 30px;
  42. font-weight: bolder;
  43. padding-bottom: 7px;
  44. border-bottom: 3px solid red;
  45. </style>
  46. </head>
  47. <body>
  48. <div class="public-header">
  49. <a href="">网站首页</a>
  50. <a href="">专题</a>
  51. <a href="">网站导航</a>
  52. <a href="">二手商品</a>
  53. <a href="">讨论区</a>
  54. <span>
  55. <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  56. <a href="">免费注册</a>
  57. </span>
  58. </div>
  59. <!--大标题-->
  60. <div class="public-headline">
  61. <span>二手交易</span>
  62. </div>
  63. </body>
  64. </html>

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

批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:还这么客气: 多谢观看, 看你们作业是我的工作一部分.... 写得还行, 理解的也到位, 重点在于应用

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论