js+css完成网站的会员照片信息显示效果

效果图:

演示代码

js+css完成网站的会员照片信息显示效果

function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i

*{
margin: 0;
padding: 0;
}
body {
font-size:12px;
font-family:"宋体",Arial, Helvetica, sans-serif;
color:#666666;
}
.door_container {
width:200px;
}
.door_container .TabTitle {
height:36px;
}
.door_container .TabTitle li {
list-style:none;
float:left;
width:77px;
height:36px;
cursor:pointer;
padding-left:2px;
line-height:28px;
color:#7c7c7c;
font-size:14px;
text-align:center;
font-weight:bold;
}
.door_container .TabTitle .active {
color:#000;
background:#CC9999;
}
.door_container .TabTitle .normal {
color:#7c7c7c;
}
.door_container .TabContent {
width:198px;
}
.none {
display: none;
}
.star{
width:198px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.star dl{
width:198px;
margin:5px 0;
float:left;
}
.star dl dd{
float:left;
margin-left:8px;
line-height:18px;
}
.star dl dt{
float:left;
}
.bg{
width:198px;
margin:5px 0;
background:#CCC;
float:left;
}
.sl01{
background:#CCCCCC;
margin:15px 5px 0 0;
width:25px;
height:18px;
padding-top:7px;
text-align:center;
font-weight:bold;
color:#FF0000;
}
.sl02 img{
border:1px solid #999999;
padding:3px;
}
.sl03 a{
color:#0066CC;
text-decoration:underline;
}
.sl03 a:hover{
color:#FF3300;
text-decoration:none;
}
.sl04{
background:#CCCCCC;
}
.sl05{
}
.bg .sl01{
background:#996600;
margin:5px 5px 0 0;
width:25px;
height:18px;
padding-top:7px;
text-align:center;
font-weight:bold;
color:#FF0000;
}
.bg .sl02 img{
display:none;
}
.bg .sl03{
width:140px;
}
.bg .sl04{
background:#CCCCCC;
width:140px;
}
.bg .sl05{
display:none;
}

  • 明星网友
  • 优秀圈主
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178
01
水样年华
25岁·湖北 武汉
人气:1243178

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js实现select跳转功能代码

    js简单实现select跳转功能:代码如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="selectBox"> <select class="toSlt"> <option href="http://jichuang.gongchang.cn/

  • js实现文章文字大小字号功能完整实例

    本文实例讲述了js实现文章文字大小字号功能的方法.分享给大家供大家参考.具体分析如下: 文字大中小是很多网站供用户阅读方便的一个功能,本文实例介绍的文字大中小字号功能可以在用户选择之后打开只要在同网站打开另一篇文章都会根据用户习惯来显示字体大小. 大家一定在某些大型网站看到过文章标题下三个按钮 "大"."中"."小",用来照顾不同人的阅读习惯.这里我就要介绍这种方法,而且比它们的还支持自动保存哦~只要选择一次,下次阅读自动调整到喜欢的字号. JS

  • 纯js实现瀑布流展现照片(自动适应窗口大小)

    用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道. 我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了. 然后进入下一个循环插入下一行.公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系: h' * (w / h + y / x) = w w是浏览器窗口的宽度, 则 h' = w / (w / h

  • js+jquery实现图片裁剪功能

    现在我们在使用各大网站的个人中心时,都有个上传个人头像的功能.用户在上传了个人照片之后,可能不符合网站的要求,于是要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像.这个功能真是太棒了,原来不懂js的时候,感觉很神奇,太神奇了.心想哪天要是自己也能搞明白这里面的技术,那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~ 下面我们就来用javascript来实现这个功能吧. 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.

  • nodejs实现的一个简单聊天室功能分享

    今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码 首先我们通过express来托管网站,并附加到socke

  • jQuery内置的AJAX功能和JSON的使用实例

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> &

  • js实现照片墙功能实例

    本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">     <head>         <meta charset="utf-8">     

  • 浅析Node.js查找字符串功能

    需求如下: 整个目录下大概有40几M,文件无数,由于时间久了, 记不清那个字符串具体在哪个文件,于是.强大,亮瞎双眼的Node.js闪亮登场: windows下安装Node.js和安装普通软件毫无差别,装完后打开Node.js的快捷方式,或者直接cmd,你懂的. 创建findString.js var path = require("path"); var fs = require("fs"); var filePath = process.argv[2]; var

  • js实现ArrayList功能附实例代码

    1.ArrayList方法摘要 构造方法摘要 ArrayList() 构造一个初始容量为 10 的空列表. ArrayList(Collection<? extends E> c) 构造一个包含指定 collection 的元素的列表,这些元素是按照该 collection 的迭代器返回它们的顺序排列的. ArrayList(int initialCapacity) 构造一个具有指定初始容量的空列表. 方法摘要 boolean add(E e) 将指定的元素添加到此列表的尾部. void ad

  • js+css完成网站的会员照片信息显示效果

    效果图:演示代码 js+css完成网站的会员照片信息显示效果 function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i *{ margin: 0;

  • JS+CSS实现的日本门户网站经典选项卡导航效果

    本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果.分享给大家供大家参考.具体如下: 这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单,银灰色风格,看来日本人和中国人的审美是接近的,都喜欢这种风格,如果你要用的话,直接拷贝代码部分到你的网页中,注意你需要修改编码才行,日本的编码和中国可是不一样哦,只要把文字改为中国的就行了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-japan-web-

  • JS+CSS实现电子商务网站导航模板效果代码

    本文实例讲述了JS+CSS实现电子商务网站导航模板效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的电子商务网站导航模板,二级导航菜单,超强美化,超强实用性,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

  • JS+CSS实现六级网站导航主菜单效果

    本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色,而且菜单的兼容性非常好,支持IE6\IE7\IE8,火狐.GG浏览器等不同内核的主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-6l-web-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PU

  • 纯js+css实现仿移动端淘宝网站的弹出详情框功能

    点击查看图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="ap

  • js+css实现超简洁的二级下拉菜单效果代码

    本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • 使用java技术抓取网站上彩票双色球信息详解

    前言 现在很多web应用,做过web项目的童鞋都知道,web结果由html+js+css组成,html结构都有一定的规范,数据动态交互可以通过js实现. 有些时候,需要抓取某一个你感兴趣的网站信息,一个网站信息肯定是通过某一个url,发送http请求,根据地址定位的,当知道这个地址,可以获取到很多的网络响应,需要认真分析,找到你那一个合适的地址,最后通过这个地址返回一个html给你,我们可以得到这个html,分析结构,解析这个结构获取你要的数据.Html的结构解析往往是复杂繁琐的,我们可以使用j

  • JS+CSS实现TreeMenu二级树形菜单完整实例

    本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &

  • JS+CSS实现大气清新的滑动菜单效果代码

    本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

随机推荐