search

博客列表 >flex项目简单介绍及网站顶部实现 - PHP培训十期线上班

flex项目简单介绍及网站顶部实现 - PHP培训十期线上班

Yin熊
Yin熊原创
2019年12月25日 23:36:31549浏览

一、 Flex项目属性

Flex项目的属性有6个，分别是flex-basis、flex-grow、flex-shrink、flex、ailgn-self、order，将其功能和可选值整理成以下图片（偷个懒，这里就不码了）：

二、 页面组件开发的思路与实现过程

组件开发大体的步骤就是将网站分成多个组件，然后先将一个个组件实现起来，最后将组件组装成网页。组件的实现过程主要是将用一个html和css文件写出一个页面，这些文件放在一个文件夹内，该文件加可以称为组件，如文件夹命名为header，则该组件可称为网站的header组件。不过需要注意的是文件的命名需统一规范。

三、默认导航

1、效果图

2、 html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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-huiyuan2"></i>登录</a>
  18.             <a href="#">免费注册</a>
  19.         </span>
  20.     </div>
  21. </body>
  22. </html>

3、css代码

  1. /*引入样式重置*/
  2. @import "../../common/reset.css";
  4. /*公共头部*/
  5. .public-header {
  6.     height: 44px;
  7.     line-height: 44px;
  8.     padding: 0 20px;
  9.     background-color: black;
  10.     display: flex;
  12. }
  13. .public-header a{
  14.     color: white;
  15.     padding: 0 10px;
  16. }
  17. .public-header > a:hover{
  18.     color: black;
  19.     background-color: white;
  20. }
  21. .public-header > span {
  22.     margin-left: auto;
  23. }
  24. .public-header > span i{
  25.     margin-right: 5px;
  26. }
上一条：html页面布局-flex应用在项目上的属性—PHP培训第十期下一条：flex盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多