<!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. net Random 随机数重复的问题

    在实际项目中不仅需要随机产生密码字符串,还要一次生成多个.我把生成随机字符串的方法放到for循环中,问题出现了. 生成的字符串,会重复. 经过多方查证,原因在代码. //使用与系统时间相关的种子 Ra ...

  2. Maven插件开发

    Maven为我们提供了丰富的插件资源,使得开发调试过程中非常方便,可以满足大多数场景下的需求.当然有时候,我们也需要根据需求定制自己的插件.下面是在开发Maven插件时的一点备忘录,具体的开发流程请G ...

  3. Android 首次进入应用时加载引导界面

    功能需求:首次进入应用时加载引导界面 思路: 1.首次进入,怎么判断?查看SharedPreferences中某个字段 2.基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activit ...

  4. winform调用WCF默认实例

    一:截图 二:调用代码 using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...

  5. jsoup web scraping

    jsoup简介 jsoup是一款HTML解析器,可用与解析URL地址.HTML文本内同等,操作类似于jQuery,可通过DOM查找数据,操作数据, 使用时需引入jsoup jar jsoup可以从包含 ...

  6. Linux下的getline函数

    最近在做国嵌的mp3项目,在mp3主控程序中用到了这个函数,挺好使的,在这里记录一下.注意是linux下的,不是C++中的. 函数原型 ssize_t getline(char **lineptr, ...

  7. SDL_PingGe 1.2

    加入了像素填充函数,必须要在一个指定颜色的边界范围内,边界必须没有缺口. 加入了鼠标类 /* typedef void (*FUNCTION)(void); HMODULE HDll; HDll = ...

  8. [Java Concurrent] 多线程合作 wait / notifyAll 的简单案例

    本案例描述的是,给一辆汽车打蜡.抛光的场景. Car 是一辆被打蜡抛光的汽车,扮演共享资源的角色. WaxOnCommand 负责给汽车打蜡,打蜡时需要独占整部车,一次打一部分蜡,等待抛光,然后再打一 ...

  9. linux下的type命令

    type命令用来显示指定命令的类型.一个命令的类型可以是如下几种: alias 别名 keyword 关键字,Shell保留字 function 函数,Shell函数 builtin 内建命令,She ...

  10. Unity3D基础学习 NGUI自带Tooltip制作提示文字

    简介 NGUI自带的的例子Character中含有一个Tooltip,可以鼠标悬浮到某对象时显示提示文字.非常方便. 创建UITooltip 首先你需要在场景NGUi相机下建立一个空物体我把它命名为T ...