# cnwza-template **Repository Path**: netjoin/cnwza-template ## Basic Information - **Project Name**: cnwza-template - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-02-22 - **Last Updated**: 2022-02-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 适老化单列网页样式模板参考 本示例原始页面网址 http://jtgl.beijing.gov.cn/ ## 一、网页头部换行 ### 1. 原始网页截图 ![header](asset/img/header.png) ### 2. 单列版设计 ![header-tpl](asset/img/header-tpl.png) ### 3. 处理规范说明 logo、搜索框和其他链接区块分别各占独立的一行; 宽度为页面宽度的 60%; 如果 logo 过窄,可以和搜索框放在同一行; 链接文字大小调整到 24px,行高为字高的 2 倍。 ### 4. CSS 代码示例 #### a. logo HTML 代码 ```html ``` 首先单独为一行,宽度设置为 100%,文本方向居中 ```css body.useOldFixed .syLogo { display: block; width: 100%; text-align: center; } ``` 然后设置图片宽度为 60% ```css body.useOldFixed .syLogo img { width: 60%; height: auto !important; } ``` #### b. 搜索框 HTML 代码 ```html
``` 设置宽度的同时添加上下外边距,和上下元素空开距离 ```css body.useOldFixed .newTopSearch { margin: 20px auto; width: 60%; display: block; overflow: hidden; } ``` #### c. 链接区块 HTML 代码 ```html
``` 居中需要修改浮动为 none 以覆盖原先的 left ```css body.useOldFixed .newTopRight { float: none; width: 60%; margin: 0 auto; } ``` 设置宽度为自动并加上优先级覆盖原来的宽度设定,使用左右内边距隔开链接文本 ```css body.useOldFixed .topFunction li { padding: 0 20px; width: auto !important; } ``` ## 二、文章列表和图片网格 ### 1. 原始网页截图 ![list](asset/img/list.png) ### 2. 单列版设计 ![list-tpl](asset/img/list-tpl.png) ### 3. 处理规范说明 文章列表和图片网格分别各占独立的一行; 文章标题列表文本大小同样为 24px,日期颜色略淡为深灰色; 栏目名称文本大小要略大于文章列表,可以设置为 28px,当前标签为粗体; 链接文本鼠标经过要变色,根据网页原始样式设置为深红色或者深蓝色; 图片网格宽度一样,间距一样。 ### 4. CSS 代码示例 #### a. 标签栏 HTML 代码 ```html
政民互动 我要写信 在线访谈 常见问题
``` 首先将区块容器单独为一行,宽度为页面的 80%,并设置最大宽度,因为宽屏显示器比例为 21:9,80% 太宽了; 如果有多层元素嵌套,只需要调整最里层和最外层元素的尺寸,将中间的宽高及内外边距全部清除 ```css body.useOldFixed .cont_04 { width: 80%; max-width: 1400px; } ``` 当前标签为粗体,颜色为深红色 ```css body.useOldFixed .active { color: #bd1a2d; font-size: 28px; font-weight: bold; } ``` 其他标签字体大小 ```css body.useOldFixed .a_1 { font-size: 28px; } ``` #### b. 文章列表 HTML 代码 ```html
``` 列表区块宽度设置为 100% ```css body.useOldFixed .cont4_l { width: 100%; } ``` 文章列表文本大小设置为全局统一的 24px,行高为字高的 2 倍,不换行,文本溢出隐藏并显示省略号 ```css body.useOldFixed .cont4_l li a { font-size: 24px; line-height: 200%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 日期文本大小同文章标题一样大,颜色为深灰色 ```css body.useOldFixed .cont4_l li span { font-size: 24px; color: #999; } ``` #### c. 图片网格 HTML 代码 ```html
``` 图片区块宽度同样设置为 100% ```css body.useOldFixed .cont4_r { width: 100%; } ``` 设置图片宽度和间距,靠左浮动 ```css body.useOldFixed .pic_con div { float: left; width: 30%; margin-right: 5%; } ``` 去除最后一张图片的右外边距 ```css body.useOldFixed .pic_con div:last-child { margin-right: 0; } ``` ## 三、网格布局 ### 1. 原始网页截图 ![grid](asset/img/grid.png) ### 2. 单列版设计 ![grid-tpl](asset/img/grid-tpl.png) ### 3. 处理规范说明 按方块数量进行评估行列数; 4 个以内为一行; 5、6 个为 3 列 2 行(3 x 2); 7、8 个为 4 列 2 行(4 x 2); 9 为 5 + 4 或者 3 x 3; 10 及以上按具体情况进行定义,原则每行不超过 5 个。 ### 4. CSS 代码示例 #### a. 标签和链接组 HTML 代码 ```html
政务服务 为您提供优质服务
机动车服务 驾驶人服务 常用表格下载 事故快处解读
``` 和上面说过的一样,首先将区块容器单独为一行,宽度为页面的 80%,并设置最大宽度 ```css body.useOldFixed .cont_03 { width: 80%; max-width: 1400px; } ``` 修改标签文本大小 ```css body.useOldFixed .zwfw_tit a, body.useOldFixed .zwfw_tit span { font-size: 28px; } ``` 修改右边链接组的文本大小 ```css body.useOldFixed .zwfw_lj .a1 { font-size: 24px; } ``` #### b. 网格布局 HTML 代码(这里省略图片地址) ```html
``` 布局容器宽度同样设置为 100% ```css body.useOldFixed .zwfw_con { width: 100%; } ``` 设置每个方块的宽度和外间距,靠左浮动; ```css body.useOldFixed .zwfw_con .a5 { float: left; width: 22%; margin-right: 4%; } ``` 注意,不同于上面图片网格,这里有换行,需要去除每排最后一个方块的右外边距 ```css body.useOldFixed .zwfw_con a:nth-child(4n) { margin-right: 0; } ``` 图片宽度设置为 100%,随页面宽度变化而自动改变; 图片高度设置为自动,保持宽高比 ```css body.useOldFixed .zwfw_con img { width: 100%; height: auto !important; } ``` ## 四、页脚文本大小 ### 1. 原始网页截图 ![footer](asset/img/footer.png) ### 2. 单列版设计 ![footer-tpl](asset/img/footer-tpl.png) ### 3. 处理规范说明 文本字体大小调整为全局标准大小 24px; 其次文本方向居中; 调整元素显示类型和浮动方向,保证正常换行; 最后调整页脚容器上下内间距(尽量不要用外间距,因为本元素无法控制其外间距的背景颜色等)。 ### 4. CSS 代码示例 #### a. 字体大小和换行 HTML 代码 ```html
主办:北京市公安局公安交通管理局 承办:北京市公安局公安交通管理局网站运行中心 政府网站标识码:1100000174 京公网安备 11010202001220号 京ICP备08006306号
``` 同上,首先设置宽度和最大宽度; 文本方向居中,再设置好上下内边距 ```css body.useOldFixed .foot_box3_con { width: 80%; max-width: 1400px; padding: 20px 0; text-align: center; } ``` 同上,设置好文本字体大小和行高; 显示类型为行内块元素,并去除浮动,以保持这些元素居中 ```css body.useOldFixed .foot_box3_con span, body.useOldFixed .foot_box3_con a { font-size: 24px; line-height: 200%; display: inline-block; float: none; } ``` ## 五、完整的 CSS 文件 [asset/css/jtgl.beijing.gov.cn/home.css](asset/css/jtgl.beijing.gov.cn/home.css) ## 六、其他情况说明 ### 1. 多列改多行 示例网址 http://www.sd.gov.cn/ #### a. 原始网页截图 ![col-3](asset/img/col-3.png) #### b. 单列版设计 ![row-3](asset/img/row-3.png) #### c. 处理规范说明 通过网页截图可以看出分政府信息公开和政民互动两个栏目; 先将政民互动清除浮动单独显示为一行,再将政策文件显示为一行; 然后设置三块区域的宽度和最大宽度; 再将政民互动的三个链接排列为一行,五个带图标的链接显示为二列就可以了。 ## 七、常见问题解决方案 ### 1. 使用 clear 不生效,不能换行 HTML 代码 ```html
1
2
3
``` 原始样式 ```css .flex { display: flex; } .flex div { float: left; } ``` 这时候使用 clear 就无效 ```css .flex div { clear: left; } ``` 修改 display 为 block 就可以了 ```css .flex { display: block !important; } ```