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-栅格中屏8 lay-栅格中屏偏移2 lay-栅格小屏6 lay-栅格小屏偏移3 lay-栅格超小屏9">
                        <数据框 属性名称="" 数据类型="文本输入" 数据值="" 默认提示="请输入搜索信息" 类名="lay-输入框" />
                        <按钮 类名="lay-按钮 lay-按钮-百搭">搜索</按钮>
                    </区块>
                    <区块 类名="lay-栅格大屏4 lay-栅格中屏2 lay-栅格小屏3 lay-栅格超小屏3">
                        <按钮 类名="lay-按钮 lay-按钮-暖色">圈子详情</按钮>
                    </区块>
                </区块>
            </区块>
            <区块 类名="lay-容器">
                <行内元素 类名="lay-图标 lay-图标男">用户数:2</行内元素>
                <行内元素 类名="lay-图标 lay-图标微信">内容数:1</行内元素>
            </区块>
        </区块>

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

            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) {
                高度: 40px;
                文本-对齐: 居中;
            }

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

            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) > 数据框 {
                宽度: 260px;
                高度: 40px;
                显示模式: 内联块元素;
                垂直-对齐: 中部对齐;
            }
            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) > 按钮 {
                宽度: 60px;
                高度: 40px;
                垂直-对齐: 中部对齐;
            }

            .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(2) > 按钮 {
                高度: 30px;
                行高: 30px;
                定位: 绝对定位;
                右侧: 0px;
                顶部: 5px;
            }

            @媒体查询 (max-width: 545px) {
                .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) > 数据框 {
                    宽度: 150px;
                    高度: 40px;
                    显示模式: 内联块元素;
                    垂直-对齐: 中部对齐;
                }
            }
            @媒体查询 (max-width: 380px) {
                .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(1) > 数据框 {
                    宽度: 110px;
                    高度: 40px;
                    显示模式: 内联块元素;
                    垂直-对齐: 中部对齐;
                    字体-大小: 12px;
                }

                .背景主题 > 区块:子元素(2) > 区块:子元素(1) > 区块:子元素(2) > 按钮 {
                    高度: 30px;
                    行高: 30px;
                    定位: 绝对定位;
                    右侧: 0px;
                    顶部: 5px;
                    宽度: 90px;
                    左侧: 0px;
                }
            }
        </样式>

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