CSS on Dapeng Zhang

CSS实现图片旋转（原地转圈）

Mon, 14 Jul 2025 14:44:42 +0000

css能让图片转动起来，而且很简单，适用的场景包括音频是否在播放

如果视频播放的时候我们就让图片转圈，而且想转的快或者慢都可以加以控制。

代码示例如下

css code

@-webkit-keyframes rotation{
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}

.img-rotate{
 -webkit-transform: rotate(360deg);
 animation: rotation 1.4s linear infinite;
 -moz-animation: rotation 1.4s linear infinite;
 -webkit-animation: rotation 1.4s linear infinite;
 -o-animation: rotation 1.4s linear infinite;
}

html code

<div style='60px'>
 <img v-if='audioPlayStatus==true' class="img-rotate" src="https://xxxx.com/audio_start_play.png" style="width: 100%" />
</div>

CSS小技巧 - CSS实现光标

Fri, 11 Jul 2025 10:40:48 +0000

原理使用css的伪类’:before’和’:after'

如果想要光标在内容的后面

.class:before {
	content: ''
}

.class:after {
	content: '';
	border-right: 2px solid #ffd500;
	height: 50%;
	opacity: 1;
	animation: focus .7s forwards infinite;
}

@keyframes focus {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

如果想要光标在内容的前面

.class:before {
	content: ''
	border-right: 2px solid #ffd500;
	height: 50%;
	opacity: 1;
	animation: focus .7s forwards infinite;
}

.class:after {
	content: '';
}

@keyframes focus {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

CSS3 translate和transition如何使用

Thu, 10 Jul 2025 11:52:48 +0000

translate和transition一直让我觉得，很牛皮很强大，怎么也学不会，其实是自己比较抗拒去了解她，接口看了不到半个小时的文档，大概了解了下，下面是示例，可以下载下来自己运行下试试

<!DOCTYPE html>
<html>
<head>
 <title>translate和transition</title>
</head>
<body>
<style type="text/css">
 div {
 width: 100px;
 height: 75px;
 background-color: red;
 border: 1px solid black;
 }

 div#translate {
 transition: all 2s;
 -ms-transition: all 2s;
 -webkit-transition: all 2s;
 }

 div#translate:hover{
 transform: translate(50px, 100px);
 -ms-transform: translate(50px, 100px);
 -webkit-transform: translate(50px, 100px);
 }
</style>
<div>Hello, This is a Div element</div>
<div id='translate'>Hello, This is another Div element</div>
</body>
</html>

演示demo请点这里

translate(a, b)：用官方的话说叫做2D转移，其实就是平面上的x轴和y轴移动，搞那么多名词就是因为我们学识太低，不想让我们容易了解

a - 在横向（左右方向）也就是x轴移动a单位距离，比如是10px，那么就移动10px，正值向右移动，负值向左移动 b - 在纵向（上下方向）也就是y轴移动b单位距离，比如是50px，那么就移动10px，正值向下移动，负值向上移动

起点在左上角哈，但是如果元素位置开始就设置了非原点的话就另说了，就是在元素基础上做计算

原点(0,0)-------
|
|
|

transition 动画过渡

transition： property duration timing-function delay

property - css属性

duration - 动画执行时长如果为0 动画不执行

timing-function 动画执行方式默认ease

delay - 动画延迟执行时间默认0

这四个是属性，别以为我是写了其他的属性，具体的看(文档)[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]

这里不再介绍，看我示例就知道了，

CSS省略号总结

Thu, 10 Jul 2025 11:52:30 +0000

CSS省略号一直在用，而且用的比较多，这里做下总结，方便日后查用

CSS省略号可以说是前端开发必不可少的。其原理就是将溢出的字符进行覆盖，并通过css的省略号样式表进行填充。

另外的情况可能会用在多行之后添加省略号

参考这里，我这里摘录如下，国内可能有开发者打不开

单行CSS省略号

.ellipsis {
 width: 300px;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

多行CSS省略号

.block-ellipsis {
 width: 300px;
 display: block;
 display: -webkit-box;
 max-width: 100%;
 height: 43px;
 margin: 0 auto;
 font-size: 14px;
 line-height: 1;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
}

这里注意下height的值和webkit-line-clamp的值

CSS截切字符串

Mon, 30 Jun 2025 11:49:23 +0000

css截切字符串

width: 180px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
height: 25px;
white-space: nowrap;

前端技能 Google Fonts API @font-CSS

Fri, 20 Jun 2025 11:07:41 +0000

开篇之前，先来几个链接http://www.font-face.com/#google_announcement

对于前端，强大不是一般般般的。

先来看几个例子

<html>
 <head>
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 <style>
 body {
 font-family: 'Tangerine', serif;
 font-size: 48px;
 }
 </style>
 </head>
 <body>
 <div>Making the Web Beautiful!</div>
 </body>
</html>

来看一下效果图

加点css的修改

body {
 font-family: 'Tangerine', serif;
 font-size: 48px;
 text-shadow: 4px 4px 4px #aaa;
}

再来看看效果

是不是很赞啦。

这种操作，在我们的项目中，还是很必要的，尤其是前端，从美感上讲，我觉得可以跟苹果的ui媲美，没准苹果也是在用这个呢。

实现原理很简单额

1，第一步，引入css，是google字体的css

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2，第二步，在css中使用自己引入的字体，也可以在自己的html代码中调用的

CSS selector {
 font-family: 'Font Name', serif;
}
<div style="font-family: 'Font Name', serif;">Your text</div>

如果字体不好看的话，还有很多的字体的，请看这里http://www.google.com/fonts

对于具体的字体的话，可以去这样调用的

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

很好解释的

Tangerine:bold,bolditalic

Tangerine想要的字体的名字，bold,bolditalic想要得到的字体的样式，如果想要多个话，就是用|进行分割，迫不及待了，试验一下。

syntaxhighlighter 滚动条高亮代码高亮自定义主题博客主题

Fri, 20 Jun 2025 11:07:28 +0000

欢迎大家对我博客的支持，最近无意间发现自己的博客的代码高亮出现了问题，原因是自己在做搜索的时候，为了减少js的加载，将某个layout模块删掉了，导致最后出问题自己还不知道，今天改的时候，更是不知道该如何改了，因为忘记了之前自己是如何添加这段代码的啦。不过咱就是写代码的，重写会有更多的收获的。

我就贴出一下自己的css代码

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter {
 background-color: #34495E !important;
 border-radius: 5px;
}
.syntaxhighlighter .line.alt1 {
 background-color: #34495E !important;
}
.syntaxhighlighter .line.alt2 {
 background-color: #34495E !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
 background-color: #34495E !important;
}
.syntaxhighlighter .line.highlighted.number {
 color: white !important;
}
.syntaxhighlighter table{
 margin: 1px 0 !important;
}
.syntaxhighlighter table caption {
 color: #f8f8f8 !important;
}
.syntaxhighlighter .gutter {
 color: white !important;
}
.syntaxhighlighter .gutter .line {
 border-right: 3px solid #1ABC9C !important;
}
.syntaxhighlighter .gutter .line.highlighted {
 background-color: #41a83e !important;
 color: #0a2b1d !important;
}
.syntaxhighlighter.printing .line .content {
 border: none !important;
}
.syntaxhighlighter.collapsed {
 overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
 color: #96dd3b !important;
 background: black !important;
 border: 1px solid #41a83e !important;
}
.syntaxhighlighter.collapsed .toolbar a {
 color: #96dd3b !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
 color: white !important;
}
.syntaxhighlighter .toolbar {
 color: white !important;
 background: #41a83e !important;
 border: none !important;
}
.syntaxhighlighter .toolbar a {
 color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
 color: #ffe862 !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
 color: #f8f8f8 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
 color: #336442 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
 color: #9df39f !important;
 background-color: #34495E;
}
.syntaxhighlighter .keyword {
 color: #96dd3b !important;
}
.syntaxhighlighter .preprocessor {
 color: #91bb9e !important;
}
.syntaxhighlighter .variable {
 color: #ffaa3e !important;
}
.syntaxhighlighter .value {
 color: #f7e741 !important;
}
.syntaxhighlighter .functions {
 color: #ffaa3e !important;
}
.syntaxhighlighter .constants {
 color: #e0e8ff !important;
}
.syntaxhighlighter .script {
 font-weight: bold !important;
 color: #96dd3b !important;
 background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
 color: #eb939a !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
 color: #91bb9e !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
 color: #edef7d !important;
}

.syntaxhighlighter .comments {
 font-style: italic !important;
 background-color: #34495E;
}
.syntaxhighlighter .keyword {
 font-weight: bold !important;
}

code{
 background-color: #34495E;
 border:1px solid #34495E;
}

千万注意的是，不要光之引入此css代码，还有一个核心的代码也一定要引入进来，不然会出现更乱的情况

<link href="/syntaxhighlighter/styles/shCore.css" rel="stylesheet"> 
<link href="/syntaxhighlighter/styles/shThemeFlatUI.css" rel="stylesheet">

学习下CSS选择器奇偶匹配nth-child(even)

Tue, 17 Jun 2025 15:50:52 +0000

CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。

(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二：nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三：nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如 3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/ 
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/ 
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/ 
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/ 
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四：nth-child(-an+b) 此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。

(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/ 
li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/

第五：nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

参考:http://www.cnblogs.com/pansly/archive/2011/05/04/2037003.html

结合bootstrap自定义table列表

Tue, 17 Jun 2025 15:50:38 +0000

使用bootstrap这个方便的web UI框架，方便了自己，少些了很多的代码，至少兼容性方面，我觉的我就不用操心了，呵呵。

看看我自定义的table列表

css代码:

table.smoth{width:100%}
table.smoth thead tr.caption td.item{background-color: #E4E4E4;border:1px solid #ccc}
table.smoth tbody tr.list td{border:1px solid #ccc}
table.smoth tbody tr.list:nth-child(odd) td{background-color: #fff}
table.smoth tbody tr.list:nth-child(even) td{background-color: #F2F2F2}

html代码：

<div class="table">
	<table class='smoth' >
		<thead>
			<tr class='caption'>
				<td class='item'>电视剧名称</td>
				<td class='item'>上线日期</td>
				<td class='item'>ITV状态</td>
				<td class='item'>导演</td>
				<td class='item'>编剧</td>
				<td class='item'>主演</td>
			</tr>
		</thead>
		<tbody>
			<?php for($i = 0; $i < 10; $i++):?>
			<tr class='list'>
				<td>咱俩的事</td>
				<td>2013-01-13</td>
				<td>是</td>
				<td>David Zhang</td>
				<td>David</td>
				<td>Zhang</td>
			</tr>
			<?php endfor;?>
		</tbody>
	</table>
</div>

加入了一点php代码，实则是一个简单的循环

图片展示

CSS中最合理ID/CLASS的命名规范

Tue, 17 Jun 2025 15:36:21 +0000

先看一个例子：

.l-123f { color: red; }

　　如果你第一次看到这个类名，你能在css文件立刻找到这个class吗？估计很难，因为这个类的名称只是某一个人能理解的符号再没有其他意义，所以这里没有一个准确的方法能够让你立即说出来。

让我们来看下这个类名定义：

.right-red { color:red; }

你可能很明确的知道这个class选择符的所起的作用。但是这里还有个问题，当你在一星期的时间需要重新设计。在重新设计的时候，这个模块被放置到了左边，而且还是绿色。这个类就不再有存在的价值。所以现在不得不选择，要么改变所有的属性值，要么放着它不动，这可能导致混乱。

最好不要在你的类名或者ID名中去加入颜色或者长宽的尺寸等带有属性的名字。你应该避免任何的属性值都是直接的词汇。（如box）直接属性可能会导致内容的分离。

让我们来看看最合理ID/CLASS的命名规范：

.product-description { color: red; }

　　用这种样式定义的product-description（产品描述），不管你怎么改变，她都是那么的干净清晰。

总结为：最好不要在你的类名或者ID名中去加入颜色或者长宽的尺寸等带有属性的名字。

Django模板中使用CSS, JavaScript

Thu, 12 Jun 2025 11:49:32 +0000

测试环境

(r'^css/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/var/www/django-demo/css'}),
(r'^js/(?P</path><path>.*)$', 'django.views.static.serve', {'document_root': '/var/www/django-demo/js'}),
(r'^images/(?P</path><path>.*)$', 'django.views.static.serve', {'document_root': '/var/www/django-demo/images'}),

模板中使用下述方式即可：

<link href="/css/demo.css" type="text/css" rel="stylesheet">

注：可采用os.path.dirname(globals()["__file__"])来获得当前文件所在路径，比如

(r'^css/(?P<path>.*)$', 'django.views.static.serve', {'document_root': os.path.dirname(globals()["__file__"])+'/css'}),

可以使用os.path.abspath()函数返回此路径的绝对路径。
==============
要在django的tempalte file中引用css、js、gif等静态文件，首先一条setting.py中DEBUG开关打开。

1、在project目录下建立一个存放静态文件的目录，如：medias

2、在url.py patterns中增加一行：

(r'^site_media/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_PATH}),

还要from django.conf import setting

3、在setting.py中加入一行：

STATIC_PATH='./medias'

如此设置后，就可以在template file 中引用media中存放的静态文件了，如：

<img src='/site_media/django.gif'>

在使用Django开发的Web项目中是避免不了使用css、javascript、js等静态文件的，而对于这些静态文件的处理，django官网这样写：Django itself doesn’t serve static (media) files, such as images, style sheets, or video. It leaves that job to whichever Web server you choose.就是说django本身不处理类似于图片、样式表、视频等静态文件，它将此项工作交给了你选择的Web服务器。
在网上搜索到的django项目处理静态文件的示例中，大家似乎都在使用如下的方法让django处理静态文件：

urlpatterns += patterns('', (r'^static/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}), )

而对于django.views.static.serve方法，django官网说得很清楚：Using this method is inefficient and insecure. Do not use this in a production setting. Use this only for development.就是说这种方法是低效且不安全的，不要在生产环境使用此方法，只在开发环境使用。
这时对于静态文件的处理，我们只能使用我们选择的Web服务器来处理了。比如使用nginx服务器的话，可以如下设置：

server {
 listen 80; ## listen for ipv4; this line is default and implied
 root /home/davidzhang/pythonweb/mysite/mysite;
 index index.html index.htm;

 # Make site accessible from http://localhost/
 server_name local.ubuntu.python.blog.com;

 access_log /var/log/uwsgi/local.ubuntu.python.blog.access.log;
 error_log /var/log/uwsgi/local.ubuntu.python.blog.error.log;

 location / {
 include uwsgi_params;
 uwsgi_pass unix:///tmp/mysite.socket;
 #uwsgi_pass 127.0.0.1:9090;
 }
 location ^~ /static { #^~ 与 /static之间有空格
 alias /usr/local/lib/python2.7/dist-packages/Django-1.4.2-py2.7.egg/django/contrib/admin/static;
 }

 location ~* ^/(css|img|js)/.*$ {
 root /home/davidzhang/pythonweb/mysite/media;
 expires 12h;
 break;
 }

 location ~ ^.+\.(gif|jpg|png|ico|jpeg)$ {
 expires 3d;
 }
}

CSS3 Gradient 学习

Thu, 12 Jun 2025 09:56:40 +0000

CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐变。

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。本文照常忽略IE不管，我们主要看看在Mozilla、Webkit、Opera下的应用，当然在IE下也可以实现，他需要通过IE特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。那我们了解了这些，现在就开始今天的主题吧。

节选如下：

CSS3的线性渐变

一、线性渐变在Mozilla下的应用
语法：
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数：其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
注：这个效果暂时只有在Mozilla内核的浏览器下才能正常显示。
二、线性渐变在Webkit下的应用
语法：
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则 参数：-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。
三、线性渐变在Opera下的应用
语法：
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */ 参数：-o-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。（注：Opera支持的版本有限，本例测试都是在Opera11.1版本下，后面不在提示）。
四、线性渐变在Trident (IE)下的应用
语法：
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

详细的自己去参考吧。

来源：http://www.w3cplus.com/content/css3-gradient

CSS opacity透明度继承问题

Mon, 09 Jun 2025 16:18:15 +0000

元素透明的做法，大概如下

#div.opacity{ filter:alpha(opacity:80);opacity:0.8; }

但是结果导致的问题是，里面所有的元素都开始透明了

通过搜索，搜集资料，我发现了一个解决问题的方法

HTML文件代码如下：

<div class='well activity-outer'>
 <div class='activity-opacity'></div>
 <div class='activity-inner'>
 <h4>活动细则:</h4>
 <div class='detail'>
 <p style='margin:0;padding:0;text-indent:1em'>1. 手机拍摄黑龙江卫视乱世佳人照片并上传, 选择上传到“天心恋”和“重心恋”其中一组</p>
 <p style='margin:0;padding:0;text-indent:1em'>2. 普通观众点击支持，看哪些照片（带黑龙江卫视台标）获得支持多,优先获得奖品</p>
 <p style='margin:0;padding:0;text-indent:1em'>3. 本活动在和黑龙江卫视播出最后一期结束</p>
 </div>
 </div>
</div>

CSS文件代码如下：

div.activity-outer{padding:0;background-color:transparent;border:0}
div.activity-opacity,
div.activity-inner{
 height:100px;
 width:938px;
 left:0;
 position:relative;
 top:0;
 border-radius: 4px 4px 4px 4px;
 border-color:#ccc;
}

div.activity-opacity{
 background-color:#ccc;
 filter:alpha(opacity:80);
 opacity:.8;
}
div.activity-inner{
 margin-top: -119px;
 padding: 14px 4px 0 10px;
 color:white
}

以上两个文件的代码，是我做的网站的一个摘录，主css文件采用的是bootstrap这个css框架，记录一下。