<!DOCTYPE html>

<html>

<head>

<style type="text/css">

body{

        margin: 0px;

    }

div

{

margin-left: 50px;

width:300px;

height:50px;

position:absolute;

border-radius:25px;

transition:width 2s;

-webkit-transition:width 2s; /* Safari and Chrome */

}

div:hover

{

width:500px;

}

div h1,h2,h3,h4,h5{

    float: right;

    margin-top: 10px;

}

.div_1{

        margin-top: 100px;

        background-color: rgb(255,0,0);

    }

.div_2{

        margin-top: 120px;

        background-color: rgb(0,255,0);

    }

.div_3{

        margin-top: 140px;

        background-color: rgb(0,0,255);

    }

.div_4{

        margin-top: 160px;

        background-color: rgb(50,155,55);

    }

.div_5{

        margin-top: 180px;

        background-color: rgb(50,50,155);

    }

</style>

    <title></title>

</head>

<body>

<div>

<div class="div_1"><h1>板块一</h1></div>

<div class="div_2"><h2>板块二</h2></div>

<div class="div_3"><h3>板块三</h3></div>

<div class="div_4"><h4>板块四</h4></div>

<div class="div_5"><h5>板块五</h5></div>

</div>

</body>

</html>

一个CSS小测试的更多相关文章

  1. 一个Tparams小测试

    var aParams: TParams; aPar: TParam; I:Integer; begin aParams := TParams.Create(nil); aPar := aParams ...

  2. 开发了一个安卓小软件“CSV联系人导入导出工具”，欢迎测试

    开发了一个安卓小软件"CSV联系人导入导出工具",欢迎测试.本软件可以帮你快速备份和恢复联系人,不用担心号码遗失,软件操作简单,使用方便. 下载地址: 百度网盘:https://p ...

  3. 基础的CSS描绘测试

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  5. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  6. css小随笔（二）与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

  7. css小随笔

    一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascadi ...

  8. 一个 react 小的 demo

    一.搭建开发环境: webpack构建工具. 新建一个文件夹(login),进入根目录, 1.输入命令:cnpm init,生成了一个package.json文件,这是一个标准的npm说明文件,里面蕴 ...

  9. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

随机推荐

  1. android.support.design.widget.AppBarLayout 在android5.0+底部显示空白条问题

    在最外层使用 RelativeLayout作为根节点,同时设置 android:fitsSystemWindows="true"问题解决． <?xml version=&qu ...

  2. 复位应答ATR的基本结构和数据元

    根据定义,复位应答是一系列字节的值,这些字节是由卡作为对复位命令的响应发送给接口设备的 ,在I/O电路上,每个字节在一个异步字符中传输.每个成功的复位操作,都会导致I/O上的一个初始字符TS,TS后面 ...

  3. 根据Hash分块存储文件

    迷你云默认存储方式是Hash存储模式,文件内容存储在本地硬盘,而非明文存储模式 一.下图大致说明了情况 <ignore_js_op> 二.工作原理 1.假设用户上传了A.doc文件,迷你云 ...

  4. mysqldump 一些参数体验

    mysqldump -uroot -p'xxx' -R --single-transaction --master-data=2 zjzc>$TODAY_DIR/zjzc/zjzc_${TODA ...

  5. POJ2485 Highways(最小生成树)

    题目链接. 分析: 比POJ2253要简单些. AC代码: #include <iostream> #include <cstdio> #include <cstring ...

  6. baiduMap 显示所有的marker（在视野里显示所有的)

    搞Android的,所以比较幸苦和累现在搞的app是关于百度地图的,因为要求要把所有覆盖物显示在一个视野...所以在网上找了很久,终于找打了方法 我引用的包是: 记录一下,其实不算很难.一个小点.翻了 ...

  7. 【2013长沙区域赛】部分题解 hdu4791—4801

    1001: 签到题,二分一下即可 代码: #include <set> #include <map> #include <cmath> #include <c ...

  8. Java高级特性之反射学习总结

    老规矩我们还是先提出几个问题,一门技术必然要能解决一定的问题,才有去学习掌握它的价值 一. 什么是反射? 二.反射能做什么? 一. 什么是反射? 用在Java身上指的是我们可以于运行时加载.探知.使用 ...

  9. 四种方法解析JSON数据

    (1)使用TouchJSon解析方法:(需导入包:#import "TouchJson/JSON/CJSONDeserializer.h") //使用TouchJson来解析北京的 ...

  10. Java中可变长参数的方法

    原文转自:http://www.cnblogs.com/lanxuezaipiao/p/3190673.html 在Java5 中提供了变长参数(varargs),也就是在方法定义中可以使用个数不确定 ...