css客齐集社区头像显示效果
CSS 显示 效果 社区 头像
2023-06-13 09:14:00 时间
代码说明:
这段中,定义了一个大的块DIV; 并给了他一个ID; 下边分别有LI,A,SPAN,IMG四个标签; 这样我们就可以在CSS中设置这四个标签来实现我们想要的效果;
<div id="zishu_test">
<ul>
<li><a href="64d">http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47 hits</span><img src="pixu/upload/20080607224454669.jpg">pixu</a></li>
...........
以下这段定义了网页的基本内容和链接的样式;
body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; }
a:link,a:visited{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;}
以下这行定义了列表横向显示,每个LI占14%的宽度;14%是由100%除以7块等于的; 而且LI里边的内容要居中显示; margin:0 auto; 这句是为了实现FIREFOX居中显示的;
#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
以下这行统一定义了一下A标签;边框,宽度,背景等; 其实这时候已经有边框了,只不过和背景色一样;你看不到; 如果你把网页的背景色改一下; 你就会看到效果了;
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}
以下定义了图片,给图片边上加了留白效果;和边框效果;
#zishu_test li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
以下这行就是隐藏SPAN标签里的内容;
#zishu_test li span{display:none;}
以下这行就是定义鼠标移上去的效果; 主要是显示SPAN里的内容; 和定义SPAN内容的位置; 注意;这样去定义SPAN的位置会在不同的浏览器中有不同的效果的;所以才有了后边那两行代码;另外注意的是;这里只定义了SPAN;
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; }
以下这两行是为了在不同浏览器中看到的效果一样而写的;主要是为IE6和IE7写的; 有人问为什么不把IMPORTANT写在上一行中? 你试一试再想一想就知道了; 我用这样的办法去改变IE6和IE7;我也不知道怎么样;因为我实在没有想到更好的办法;
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
最后这行就简单了;只是改变边框的色,给人的感觉就是鼠标移上去有变化了;
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;}
zishu.cntest
这段中,定义了一个大的块DIV; 并给了他一个ID; 下边分别有LI,A,SPAN,IMG四个标签; 这样我们就可以在CSS中设置这四个标签来实现我们想要的效果;
<div id="zishu_test">
<ul>
<li><a href="64d">http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47 hits</span><img src="pixu/upload/20080607224454669.jpg">pixu</a></li>
...........
以下这段定义了网页的基本内容和链接的样式;
body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; }
a:link,a:visited{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;}
以下这行定义了列表横向显示,每个LI占14%的宽度;14%是由100%除以7块等于的; 而且LI里边的内容要居中显示; margin:0 auto; 这句是为了实现FIREFOX居中显示的;
#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
以下这行统一定义了一下A标签;边框,宽度,背景等; 其实这时候已经有边框了,只不过和背景色一样;你看不到; 如果你把网页的背景色改一下; 你就会看到效果了;
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}
以下定义了图片,给图片边上加了留白效果;和边框效果;
#zishu_test li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
以下这行就是隐藏SPAN标签里的内容;
#zishu_test li span{display:none;}
以下这行就是定义鼠标移上去的效果; 主要是显示SPAN里的内容; 和定义SPAN内容的位置; 注意;这样去定义SPAN的位置会在不同的浏览器中有不同的效果的;所以才有了后边那两行代码;另外注意的是;这里只定义了SPAN;
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; }
以下这两行是为了在不同浏览器中看到的效果一样而写的;主要是为IE6和IE7写的; 有人问为什么不把IMPORTANT写在上一行中? 你试一试再想一想就知道了; 我用这样的办法去改变IE6和IE7;我也不知道怎么样;因为我实在没有想到更好的办法;
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
最后这行就简单了;只是改变边框的色,给人的感觉就是鼠标移上去有变化了;
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;}
- 64d/47hits
pixu - 24d/35hits
秀才 - 66d/87hits
透露 - 40d/34hits
LIVID - 47d/56hits
老孟 - 42d/36hits
小玉 - 63d/67hits
pixu
相关文章
- axure菜单展开收起_css菜单栏的隐藏和显示
- HTML+CSS登录界面[通俗易懂]
- IDEA添加外部插件“yuicompressor”压缩js/css
- css 更改所有text,CSS之cssText「建议收藏」
- 【说站】css内边框如何理解
- 【说站】css中svg图片无法显示怎么办?
- CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
- CSS媒体查询_css网页
- HTML+CSS美食静态网页设计
- CSS 换行_css不允许换行
- 如何在canvas中模拟css的背景图片样式
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
- CSS 控制内容显示行数
- HTML+css+js代码春节灯笼
- 前端必备的 CSS 库,normalize.css
- 【CSS】开发者调试工具 ( 打开工具 | 设置工具显示位置 | 选择元素 | 查看手机版样式 | 开发者调试工具缩放 | 修改数值大小调试 | 查看 CSS 样式代码位置 )
- 【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
- 【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )
- 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )
- 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
- div的hover放大css,实现小图变大图详解编程语言
- JS currentStyle属性和getComputedStyle()方法:读取CSS显示样式
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 小心:CSS代码书写顺序不同,导致显示效果不一样
- Lesson03_01什么是CSS和CSS的设置方式
- 教你如何用CSS来控制网页字体的显示样式
- 推荐个Css的filter常用滤波器属性及语句大全
- CSS基础CSS选择符
- asp中去除html中style,javascript,css代码
- CSS+jQuery实现的一个放大缩小动画效果