简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1225作业+flex之组件的开发思路及导航实例+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17288
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之组件的开发思路及导航实例+10期线上班
江川林
Original
532 people have browsed it

flex之组件的开发思路及导航实例

通过本次学习加深了对flex容器属性的学习与运用
实践是检验真理的唯一标准，实战也不例外

本次页面组件开发思路及实现过程
1、先自己理出页面的大体框架，由几个大板块组成
2、将各个大板块里面的内容填充好
3、根据页面的排版，写CSS，将页面进行排列

以下是导航代码

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

以下是CSS代码

  1. /*初始化*/
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5.     font-size: 13px;
  6.     /*outline: 1px dashed red;*/
  7. }
  9. a {
  10.     text-decoration: none;
  11.     font-size: 13px;
  12. }
  14. li {
  15.     list-style: none;
  16. }
  18. .public-header {
  19.     height: 40px;
  20.     background-color: black;
  21.     display: flex;
  22.     justify-content: space-between;
  23. }
  25. a {
  26.     color: white;
  27. }
  29. .public-header > .public-header-nav {
  30.     margin-left: 20px;
  31.     display: flex;
  32. }
  33. .public-header > .public-header-nav a {
  34.  padding:10px ;
  35. }
  36. .public-header > .public-header-nav a:hover {
  37.     color: black;
  38.     background-color: white;
  39. }
  41. .public-header > .public-header-number {
  42.     display: flex;
  43.     margin-right: 20px;
  44. }
  46. .public-header > .public-header-number a {
  47.     padding: 10px;
  48. }
  49. .public-header > .public-header-number a:hover {
  50.     color: black;
  51.     background-color: white;
  52. }
  53. .public-header > .public-header-number i {
  54.     padding-right: 5px;
  55. }
  57. .public-lead {
  58.     display: flex;
  59.     justify-content: center;
  60. }
  61. .public-lead  span {
  62.     font-size: 30px;
  63.     font-weight: bolder;
  64.     border-bottom: 3px solid red;
  65.     padding-top: 30px;
  66. }

以下是手写flex项目6大属性
1
2

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！