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" 错替文本="" />
                            <超链接 链接地址="">我是头像</超链接>
                            <区块></区块>
                            <无序列表>
                                <列表项>个人中心</列表项>
                                <列表项>我的开源</列表项>
                                <列表项>退出登录</列表项>
                            </无序列表>
                        </区块>
                    </区块>
                </区块>
            </区块>
        </区块>
        <区块 类名="lay-流体容器 背景主题">
            <区块>
                <标题1>响应式开技术圈</标题1>
                <段落>专讲前端开发中响应式网站的设计与开发知识</段落>
            </区块>
            <区块 类名="lay-容器">
                <区块 类名="lay-栅格行">
                    <区块 类名="lay-栅格大屏4 lay-栅格大屏偏移4 lay-红色背景">
                        <数据框 属性名称="" 数据类型="文本输入" 数据值="" 默认提示="请输入搜索信息" 类名="lay-输入框" />
                        <按钮 类名="lay-按钮 lay-按钮-百搭">搜索</按钮>
                    </区块>
                    <区块 类名="lay-栅格大屏4 lay-蓝色背景">2</区块>
                </区块>
            </区块>
        </区块>

        <样式>
            .背景主题 {
                背景-图像: 地址("@文件_bg.jpg");
                背景-大小: 宽高覆盖缩放;
                高度: 295px;
            }
            .背景主题::元素前 {
                内容: "";
                背景-颜色: 颜色通道(255, 255, 255, 0.2);
                宽度: 100%;
                高度: 100%;
                定位: 绝对定位;
                顶部: 0px;
                左侧: 0px;
            }
            .背景主题 > 区块:子元素(1) {
                文本-对齐: 居中;
                文本颜色: 颜色值-白色;
                定位: 相对定位;
                顶部: 70px;
            }
            .背景主题 > 区块:子元素(1) > 段落 {
                字体-大小: 18px;
            }
            .背景主题 > 区块:子元素(2) {
                定位: 相对定位;
                顶部: 110px;
                高度: 40px;
            }

            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) {
                定位: 相对定位;
                高度: 40px;
            }

            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(2) {
                定位: 相对定位;
                高度: 40px;
            }

            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) > 数据框 {
                宽度: 260px;
                高度: 40px;
                显示模式: 内联块元素;
                垂直-对齐: 中部对齐;
            }
            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) > 按钮 {
                宽度: 60px;
                高度: 40px;
                垂直-对齐: 中部对齐;
            }
        </样式>
        <!--这里编写网页代码-->
    </网页主体>
</网页>

//css

.顶部导航 {
    高度: 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;
}

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