<!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. LD1-K(求差值最小的生成树)

    题目链接 /* *题目大意: *一个简单图,n个点,m条边; *要求一颗生成树,使得其最大边与最小边的差值是所有生成树中最小的,输出最小的那个差值; *算法分析: *枚举最小边,用kruskal求生成 ...

  2. BZOJ1528: [POI2005]sam-Toy Cars

    1528: [POI2005]sam-Toy Cars Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 282  Solved: 129[Submit][S ...

  3. 设计模式（二）： BUILDER生成器模式 -- 创建型模式

    1.定义 将一个复杂对象的构造与它的表示分离,使同样的构建过程可以创建不同的表示,这样的设计模式被称为建造者模式. 2.适用场景 1. 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式 ...

  4. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

  5. 尚学堂 JAVA DAY11 概念总结

    1.冒泡排序算法 <升序排列> 思路1: 数组长度为n,那么要对数组进行n-1次遍历; step 1---从数组的第一个数开始,两两比较,如果第一个数 > 第二个数,将二者进行交换: ...

  6. iOS内存管理（一）

    最近有时间,正好把iOS相关的基础知识好好的梳理了一下,记录一下内存相关方面的知识. 在理解内存管理之前我觉得先对堆区和栈区有一定的了解是非常有必要的. 栈区:就是由编译器自动管理内存分配,释放过程的 ...

  7. Hibernate 关于load和get方法区别

    load和个体方法都可以充分利用内部缓存和二级缓存中的现有数据. ******************************************************************* ...

  8. Spine（2D骨骼动画）

    点击进入Spine官网 Spine 是一款针对游戏的 2D 骨骼动画编辑工具. Spine 旨在提供更高效和简洁 的工作流程,以创建游戏所需的动画. 功能: 1.摄影表 Dopesheet 在动画制作 ...

  9. [RxJS] Creation operators: fromEventPattern, fromEvent

    Besides converting arrays and promises to Observables, we can also convert other structures to Obser ...

  10. http to https automatic--weblogic/jboss/tomcat--reference

    weblogic reference from:http://middlewaremagic.com/weblogic/?p=2019 Many times we want to secure our ...