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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > flex项目属性及页面组件开发思路（12.25前端开发学习作业）

博主信息

博文 26

粉丝 0

访问量 42484

专题推荐

更多>

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

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

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

3.默认的导航代码

首先是效果图

下面是代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="public-header.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <title>导航</title>
    <style type="text/css">
/*头部导航*/
    .public-header {
    height: 44px;
    background-color: black;
    padding: 0 20px;
    display: flex;
    flex-flow: row nowrap;
}
    .public-header a {
    line-height: 44px;
    color: #ccc;
    padding: 0 10px;
    text-decoration: none;
}
    .public-header a:hover {
    background-color: #fff;
    color: black;
}
    .public-header > span {
    margin-left: auto;
}
    .public-header > span i {
    font-size: 16px;
    color: #cccccc;
    padding-right: 10px;
}
/*大标题*/
    .public-headline {
    padding: 30px;
    text-align: center;
}
    .public-headline span {
    font-size: 30px;
    font-weight: bolder;
    padding-bottom: 7px;
    border-bottom: 3px solid red;
    </style>
</head>
<body>
<div class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
        <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
        <a href="">免费注册</a>
    </span>
</div>
<!--大标题-->
<div class="public-headline">
    <span>二手交易</span>
</div>
</body>
</html>