- 浏览: 26897 次
- 性别:
- 来自: 郑州
最近访客 更多访客>>
最新评论
-
guiguzi83:
还有底下的圆形在IE下是方形,这个怎么实现
天猫商城JS效果制作 -
guiguzi83:
为什么把你的另存为页面就不行了呢?
天猫商城JS效果制作 -
xilie180:
我想问下前辈在哪家公司就职,前端待遇情况(看所属地是郑州,所以 ...
项目的质和量:西班牙语频道制作思路和规划
中秋放假,淋漓小雨下了三天,这种天气最适合看电影、玩游戏、睡觉。害的眼睛都发炎了,刚去医院看了看,回到家里看博,觉的用css实现开心网标签观点的博文不错,就自己按照自己的思路,给制作了一下:
制作思路:外面的层控制宽度,内容层控制padding和border,这样栏目在后期的维护或修改只要修改外层的宽度,实用寿命更长。
li 浮动; a标签 控制字符、设置display:inline-block、相对定位; span class="now" 默认为不显示,当鼠标hover,绝对定位显示观点字符全部; small 选用这个标签,是觉的now为主,它应该为副,可商讨; span class="triangle" 三角形的层 绝对定位于右边;
整个li只有small为宽度,其它的于定位来现实。为什么用不float:left;来实现,是考虑到li设置为左浮动。
短评文字个数超过一定的长度,后面一些文字会被省略,以三角形式呈现。鼠标经过,则显示完整的文字内容,三角消失:
您可以狠狠地点击这里:开心网“发表观点”CSS实现
为了显示的需要,我们需要两段文字内容,一段是截取字符版,用做默认的显示;另外一段就是完整的文字内容,用做鼠标经过的显示。文字的截取由后台控制与输出,我们前台不予以担心与考虑。
我共分为九种颜色样式,每一种用不同的类来加载,前七个为重点,后两个为次显示,随着赞同观点点击,越排在前面,后台只需判断赞同观点的点击量,而来加载样式,这点应该也很容易实现。
为了兼顾IE6下的hover效果,最外层标签需要是a标签。hover上去显示完整文字借助的absolute绝对定位实现的,设置层高为11,也就是让上面遮罩住下面的span。
三角形用字符实现,这点就觉的很舒服,减少图片的应用,而且在各个浏览器支持的也蛮好,直接可以使用css的color属性控制颜色。
我又根据张鑫旭的思路,做出下面“更多”旁边的那个三角,这种方法,比用border做出来要兼容的好。
发表评论
-
胡思乱想 打鱼晒网
2012-02-15 15:54 885其实一直想写一篇东西出来,但最近状态不好,我这个人过份的自由、 ... -
淘宝良无限页面交互
2012-02-15 15:35 791您可以狠狠地点击这里:淘宝良无限页面交互DEMO 前 ... -
纯代码蓝色理想的logo
2012-01-06 15:44 749您可以狠狠地点击这里:蓝色理想的logoDEMO ... -
项目的质和量:西班牙语频道制作思路和规划
2012-01-04 17:14 832您可以狠狠地点击这里 ... -
祝贺“房多多”网站低调上线
2011-11-29 10:27 754感谢前团队的照顾和培养,现在这个项目上线了,看到了心里非常高兴 ... -
世界工厂首页前端制作 - 首页分解图
2011-11-04 16:32 1019您可以狠狠地点击这里:世界工厂网首页预览版 网 ... -
CSS3:animation属性实例操作
2011-09-26 17:24 1650文章中的实例须在FireFox ... -
网页重构:公司网站小面积改版
2011-09-17 10:13 860公司网站首页要改版, ... -
CSS3:wordpress读者墙
2011-08-29 10:45 788最近在制作一个企业站和制作一些广告效果,今天又在网上看到css ... -
论网易对联广告的效果展示
2011-08-25 10:02 941打开网易,你会发现网易网站的对联广告做的效果是:默认 ... -
项目制作流程:请勿野蛮施工
2011-08-16 15:38 841项目制作流程图: 项目是制做出来的,它有它自己的流程方式 ... -
培养团队的责任心和个人修养
2011-08-16 14:45 1090团队的责任心 高层如果怪中层,中层怪员工,员工 ... -
css3:鼠标hover图片效果
2011-08-16 10:56 1411今天在网上看到的鼠标hover效果,当时就看的心痒痒,c ... -
css3:QQ衰表情
2011-08-16 10:39 987发现在聊天群里面,用这个表情的很多,最近一直也在了解CSS ... -
百度选车
2011-08-16 10:15 670百度选车频道上线,朋友推荐了这个效果,觉的蛮不错的,就想着 ... -
工作上面的一些积累
2011-07-25 10:29 598总结一下自己前端工作的一些工作经验和自己前期工作的规划:1、用 ... -
项目中的一些小技巧tips记录
2011-07-25 10:27 701项目中遇到的一些小技巧,记录下来: 对非a标签添加伪类 ... -
认真的学习
2011-07-25 10:26 741一篇教程,至少要看3遍你才能真正懂的里面的内容和它要表达的真正 ... -
CSS 中的 :first-letter
2011-07-25 10:15 1007对CSS熟悉的人一般都会了解 :first-letter 这个 ... -
div+css 文本两端对齐的方法
2011-07-25 10:01 18281、先定义text-align:justify;2、添加 te ...
相关推荐
不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果 基础先来看一下blur属性的表达式: CSS Code复制内容到剪贴板 filter:blur(add=add,direction,strength=...
HTML5的Canvas元素是网页动态图形绘制的重要工具,它提供了JavaScript接口来绘制2D图形,使得开发者...通过深入理解并实践这个代码,开发者可以进一步掌握Canvas的绘图技术,以及如何结合CSS3实现更丰富的交互体验。
Html+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml...
需要注意的是,不同浏览器可能需要不同的CSS来实现一致的效果,因为对`<progress>`元素的支持并不完全统一。 除了基本的进度条,我们还可以通过JavaScript动态更新`<progress>`元素的`value`属性,以反映实时的进度...
1. CSS选择器的使用:CSS选择器是选择HTML元素并应用样式规则的方法。它包括元素选择器、类选择器、ID选择器、属性选择器等。通过组合不同的选择器,可以非常精确地控制样式的应用范围。 2. CSS布局模型:在Web设计...
HTML5 & CSS3 网页制作:CSS 继承性 在 HTML5 和 CSS3 网页制作中,CSS 继承性(Cascade)是一个非常重要的概念。它是 CSS 样式表的核心机制,决定了样式如何在文档树中传递和继承。今天,我们将深入探讨 CSS 继承...
sheets-of-paper-a4.css:A4纸(21cm × 29.7cm) sheets-of-paper-a3.css:A3纸(29.7cm × 42cm) sheets-of-paper-usletter.css:US letter(21.6cm × 27.9cm) sheets-of-paper-uslegal.css:US legal(21.6cm × ...
"js css实现LCD数字显示"这个主题涉及到如何使用JavaScript(js)和层叠样式表(CSS)技术来模拟LCD液晶显示屏上的数字显示效果。液晶显示器(LCD)数字通常用于各种设备,如时钟、仪表盘或简单的用户界面,它们以...
在本文中,我们将深入探讨如何使用CSS3来创建引人入胜的烟花特效。CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了许多新特性和功能,极大地扩展了网页设计的可能性,包括动画和特效。烟花特效就是...
在这个"HTML5 CSS3:无插件拖拽上传图片实例源码"中,我们重点关注的是利用HTML5的拖放(Drag and Drop)API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域,...
为了实现左右同步的效果,我们需要使用CSS进行布局。我们可以使用Flexbox或Grid来创建这种布局。这里使用Flexbox的例子: ```css .container { display: flex; } .task-list { width: 30%; overflow-y: auto; }...
CSS3的3D变换是实现动态效果的关键。`transform`属性可以对元素应用2D或3D转换,包括旋转(`rotateX`, `rotateY`, `rotateZ`)、平移(`translateX`, `translateY`, `translateZ`)和缩放(`scaleX`, `scaleY`, `...
HTML+CSS制作个人简历web网页.zipWeb前端静态个人简历,网页个人简历模版,HTML&CSS制作个人简历。 HTML+CSS制作个人简历web网页.zipWeb前端静态个人简历,网页个人简历模版,HTML&CSS制作个人简历。 HTML+CSS制作...
2. **边框**:CSS的`border`属性允许我们设置元素的边框宽度、样式和颜色。为了创建大括号,我们可能需要使用`border-left`和`border-right`来创建垂直部分,以及`border-top`和`border-bottom`来创建水平部分。通过...
最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触发放大动画,后来通过查找相关的资料,发现利用css3:@keyframes animation即可实现这个效果,下面来看看详细的介绍吧。 技术重点css3: @...
2. **过渡与动画**:CSS3的`transition`和`animation`属性可以实现平滑的过渡效果和自定义动画,增强用户体验。在王者荣耀官网上,这些功能可以用于英雄展示、按钮点击反馈等场景。 3. **多列布局**:`column-count...
本主题将深入探讨如何利用CSS3来制作立体导航网页特效,让用户体验更加出色。 首先,我们要理解CSS3中的盒模型和定位机制。在制作立体导航栏时,我们可以使用`border-radius`属性来创建圆角效果,让导航按钮看起来...
这种方式通常用于在已有的CSS文件中引入其他CSS文件,以实现模块化管理。例如: ```css @import url(style.css); ``` `url()`内填写要导入的CSS文件的URL。 总结,了解和掌握这些引入CSS样式的不同方法,能够...
标题中的“css制作工具”指的是用于创建、编辑和管理CSS(Cascading Style Sheets)样式的软件或在线平台。CSS是网页设计的关键技术之一,它允许我们控制网页的布局、颜色、字体等视觉元素,使其呈现出预期的外观。...