CSS实例—以一个简单网页为例

CSS实例

 

一、整体布局

二、总览

三、详述

3.1 header

3.1.1 title

内容：gsonya-CSS

3.1.2 search

（1）input

type：search；

动画效果：-webkit-transition:width 0.4s ease-in-out；

聚焦：background-color:#FF7272

（2）button：

type：submit

hover：background-color:#FF7272

3.2 navigation

（1）创建网格视图，将内容分为十二列，每块内容占三列

（2）激活当前导航条：首页为激活项

（3）首页链接重新打开当前页面；实例链接本页面的css实例内容；源码地址链接到GitHub；其它尚未链接内容。

3.3 annotation、slideshow

建立网格视图

3.3.1 注释（占网格图两列）

（1）鼠标点上去显示提示框

（2）鼠标样式：cursor：help

（3）鼠标移入时设置提示框图层：z-index：1

（4）提示框出现的动画：transition：opacity 2s

3.3.2 轮播图（占网格图十列）

设置内容与HTML实例设置相同，详情：https://blog.csdn.net/gsonya/article/details/107312310

3.4 sample

建立网格视图，占12列

3.5 具体实例

每一行都划分为12列，每个内容（图片+链接）占3列

点击下面链接内容可查看实例展示，例如点击第一个align链接，如下图：

3.6 footer

创建网格视图，共12列，每块内容占3列。

“工具”和“关于我”下面均为链接，点击可到达相应链接。

3.7 整体

整体采用响应式网页设计

当页面可见区域高度大于或等于宽度时，页面背景颜色为lightblue，否则为#FFB3B3；且当页面宽度大于等于768px时，每块内容按照网格划分，否则单独占一行。区别如下图：

（1）一般情况

（2）网页高度大于宽度且宽度小于768px

四、补充

详细代码及内容请查看https://github.com/gsonya/web/tree/master/css