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

CSS实例—以一个简单网页为例相关推荐

用HTML+CSS做成的一个简单网页（小兔鲜儿）
写在前面的话:在跟着黑马程序员视频学习的时候,做的一个由简单HTML+CSS知识组成的一个简单小网页分享给大家,可以供新手学习. 目录效果图如下: HTML相关代码如下: CSS相关代码如下: in ...
做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
Java怎么做一个简单网页呢？
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
JBoss 系列九十六：JBoss MSC - 简介及一个简单演示样例
什么是 JBoss MSC JBoss MSC 即 JBoss Modular Service Container,是第三代 JBoss 产品 JBoss 7和WildFfly的内核,JBoss MS ...
C++程序设计：原理与实践（进阶篇）15.6　实例：一个简单的文本编辑器
15.6 实例:一个简单的文本编辑器列表最重要的性质就是可以在不移动元素的情况下对其进行插入或删除操作.下面我们通过一个例子来说明这一点.考虑应该如何在文本编辑器中表示一个文本文件中的字符.所选用的 ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
不到50行代码，HTML+CSS+JS创建一个简单的色轮
简单,其实就是调库! 文档在这里 Get Started | iro.js 我也写了一个简单的样例在下面可以参考一下
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...

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