# 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
<a href="" class="syLogo">
  <img src="http://jtgl.beijing.gov.cn/jgj/resource/cms/2020/03/2020032420075624357.png">
</a>
```



首先单独为一行，宽度设置为 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
<div class="newTopSearch">
  <input type="text" placeholder="请输入搜索关键字">
</div>
```



设置宽度的同时添加上下外边距，和上下元素空开距离

```css
body.useOldFixed .newTopSearch {
    margin: 20px auto;
    width: 60%;
    display: block;
    overflow: hidden;
}
```



#### c. 链接区块

HTML 代码

```html
<div class="newTopRight">
  <ul class="topFunction">
    <li style="width:60%;"><a>登录个人中心</a></li>
    <li style="width:39.9%;"><a>交管问答</a></li>
    <li style="width:37%;"><a>繁体</a>|<a>简体</a></li>
    <li style="width:30%;"><a>移动版</a></li>
    <li style="width:30%;"><a>无障碍</a></li>
  </ul>
</div>
```



居中需要修改浮动为 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
<div class="cont_04">
  <a class="active">政民互动</a>
  <a class="a_1">我要写信</a>
  <a class="a_1">在线访谈</a>
  <a class="a_1">常见问题</a>
</div>
```



首先将区块容器单独为一行，宽度为页面的 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
<div class="cont4_l">
    <ul>
        <li>
            <a>交管业务问答专场在线访谈</a>
            <span>2022-01-14</span>
        </li>
    </ul>
</div>
```



列表区块宽度设置为 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
<div class="cont4_r">
    <div class="pic_con">
        <div class="box12122"></div>
        <div class="boxjz"></div>
        <div class="boxxx"></div>
    </div>
</div>
```



图片区块宽度同样设置为 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
<div class="cont_03">  
  <div class="zwfw_tit">
    <a>政务服务</a>
    <span>为您提供优质服务</span>
  </div>
  <div class="zwfw_lj">
     <a class="a1">机动车服务</a>
     <a class="a1">驾驶人服务</a>
     <a class="a1">常用表格下载</a>
     <a class="a1">事故快处解读</a>
  </div>
</div>
```



和上面说过的一样，首先将区块容器单独为一行，宽度为页面的 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
<div class="zwfw_con">
  <a class="a5"><img src=""></a>
  <a class="a5"><img src=""></a>
  <a class="a5"><img src=""></a>
  <a class="a5"><img src=""></a>
  <a class="a5"><img src=""></a>
  <a class="a5"><img src=""></a>
  <a class="a5"><img src=""></a>
</div>
```



布局容器宽度同样设置为 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
<div class="foot_box3_con">
  <span>主办：北京市公安局公安交通管理局</span>
  <span>承办：北京市公安局公安交通管理局网站运行中心</span>
  <span>政府网站标识码：1100000174</span>
  <a>京公网安备 11010202001220号</a>
  <a>京ICP备08006306号</a>
</div>
```



同上，首先设置宽度和最大宽度；

文本方向居中，再设置好上下内边距

```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
<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```



原始样式

```css
.flex {
  display: flex;
}

.flex div {
  float: left;
}
```



这时候使用 clear 就无效

```css
.flex div {
  clear: left;
}
```



修改 display 为 block 就可以了

```css
.flex {
  display: block !important;
}
```