FOF响应式顶部导航

admin

<!文档类型 网页类型>
<网页 语言代码="中文">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
        <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
        <网页标题>Document</网页标题>
    </网页头部>
    <网页主体>
        <区块 类名="lay-流体容器 顶部导航">
            <区块 类名="lay-容器">
                <区块 类名="lay-栅格行">
                    <区块 类名="lay-栅格大屏2 lay-栅格中屏2 lay-栅格小屏2 lay-栅格超小屏4">
                        <图片框 类名="logo" 图像地址="@文件_logo.png" 错替文本="" />
                    </区块>

                    <区块 类名="lay-栅格大屏6 lay-栅格大屏偏移4 lay-栅格中屏7 lay-栅格中屏偏移3 lay-栅格小屏5 lay-栅格小屏偏移5 顶部导航内容专区">
                        <超链接 链接地址="" 类名="lay-超小屏隐藏 lay-小屏显示内联元素">圈子首页</超链接>
                        <数据框 属性名称="" 数据类型="文本输入" 数据值="" 类名="lay-输入框 lay-小屏隐藏 lay-超小屏隐藏 lay-中屏显示内联元素" />
                        <按钮 类名="lay-按钮 lay-按钮-原始 lay-小屏隐藏 lay-超小屏隐藏 lay-中屏显示内联元素">搜索</按钮>
                        <区块 类名="头像专区">
                            <图片框 图像地址="@文件_head.png" 错替文本="" />
                            <超链接 链接地址="">我是头像</超链接>
                            <区块></区块>
                            <无序列表>
                                <列表项>个人中心</列表项>
                                <列表项>我的开源</列表项>
                                <列表项>退出登录</列表项>
                            </无序列表>
                        </区块>
                    </区块>
                </区块>
            </区块>
        </区块>

        <样式>
            .顶部导航 {
                高度: 55px;
                背景-颜色: #f9f9fa;
                盒子-阴影: 0px 0px 5px #e8e8e8;
                行高: 55px;
            }
            .logo {
                高度: 35px;
            }
            .顶部导航内容专区 超链接 {
                文本颜色: 颜色值-黑色;
                显示模式: 内联块元素;
                行高: 55px;
                高度: 55px;
                右边距: 25px;
            }
            .顶部导航内容专区 超链接:鼠标移入 {
                文本颜色: 颜色值-红色;
            }
            .顶部导航内容专区 数据框 {
                显示模式: 内联块元素;
                宽度: 200px;
                垂直-对齐: 中部对齐;
            }
            .顶部导航内容专区 按钮 {
                垂直-对齐: 中部对齐;
                右边距: 15px;
            }
            .头像专区 {
                浮动: 右侧;
                显示模式: 内联块元素;
                高度: 55px;
                行高: 55px;
            }
            .头像专区 图片框 {
                宽度: 45px;
                高度: 45px;
            }
            .头像专区 区块 {
                边框-顶部: 8px 实线 #ff516b;
                边框-底部: 8px 实线 透明;
                边框-左侧: 8px 实线 透明;
                边框-右侧: 8px 实线 透明;
                显示模式: 内联块元素;
                定位: 相对定位;
                顶部: 6px;
            }
            .头像专区:鼠标移入 > 区块 {
                边框-顶部: 8px 实线 透明;
                边框-底部: 8px 实线 #ff516b;
                边框-左侧: 8px 实线 透明;
                边框-右侧: 8px 实线 透明;
                顶部: 0px;
            }
            .头像专区:鼠标移入 > 超链接 {
                文本颜色: #ff516b;
            }
            .头像专区 无序列表 {
                外边距: 0px;
                内边距: 0px;
                列表-样式-类型: 无效;
                背景-颜色: 颜色值-白色;
                宽度: 130px;
                盒子-阴影: 0px 0px 5px #ededed;
                显示模式: 无效;
                定位: 绝对定位;
            }

            .头像专区 无序列表 列表项 {
                宽度: 130px;
                高度: 35px;
                行高: 35px;
                文本-对齐: 居中;
            }

            .头像专区 无序列表 列表项:鼠标移入 {
                背景-颜色: #f2f2f2;
            }

            .头像专区:鼠标移入 > 无序列表 {
                显示模式: 块级元素;
            }
        </样式>

        <!--这里编写网页代码-->
    </网页主体>
</网页>