- 浏览: 7942895 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
1 text-indent效果:
在<H1>标签中,把网站LOGO放到<H1>标签中,去掉文字,只看到图片,优化SEO,指定H1元素的长度和图片的长度一样,
设置h1的背景图片,使用text-indent:-9999px;
<style type="text/css">
h1
{
width:300px;
height:100px;
background-image:url("images/logo.jpg");
text-indent:-9999px;
}
</style>
2 text-align:对块元素不起作用,对文字,inline元素和inline-block元素起作用;margin:0:auto中,是块元素水平居中;
3 line-height:两行文字基线间的距离
CSS中同样有顶线,中线,基线,底线的概念;
行距:指的是上一行的底线到下一行顶线间的距离:
内容区:行中顶线和底线之间的部分;
行框:两行文字“半行距分隔线”之间的距离;
CSS中定义height和line-height属性值相等,实现单行文字的垂直居中
<style type="text/css">
div
{
width:240px;
height:60px;
border:1px solid gray;
font-size:12px;
text-align:center;
}
#div1{line-height:20px;}
#div2{line-height:40px;}
#div3{line-height:60px;}
</style>
</head>
<body>
<div id="div1">height为60px,line-height为20px</div>
<div id="div2">height为60px,line-height为40px</div>
<div id="div3">height为60px,line-height为60px</div>
</body>
4 line-height的值为百分比的时候,当前元素的行高是相对于父元素的font-size计算的;
line-height=父元素的 font-sixze*百分比
<style type="text/css">
body{font-size:30px;}
#outer-box
{
/*父元素行高:30px×150%=45px*/
line-height:150%;
background-color:Red;
color:White;
}
#inner-box
{
/*子元素行高:30px×150%=45px(继承父元素的line-height)*/
font-size:20px;
background-color:Purple;
color:White;
}
</style>
</head>
<body>
<div id="outer-box">这是父元素
<div id="inner-box">这是子元素</div>
</div>
5 vertical-align取值
A 负值:元素相对于基线向下偏移2PX;
B 百分比,比如vertical-align:50%,假如当前元素继承的line-height 为20PX,则vertical-align等于vertical-align:10PX,相对
于基线向上偏移10PX;
6 vertical中对于div元素,实现DIV中图片垂直居中;
<style type="text/css">
div
{
display:table-cell;
vertical-align:middle;
width:120px;
height:120px;
border:1px solid gray;
}
</style>
</head>
<body>
<div><img src="images/girl.png" alt=""/></div>
在<H1>标签中,把网站LOGO放到<H1>标签中,去掉文字,只看到图片,优化SEO,指定H1元素的长度和图片的长度一样,
设置h1的背景图片,使用text-indent:-9999px;
<style type="text/css">
h1
{
width:300px;
height:100px;
background-image:url("images/logo.jpg");
text-indent:-9999px;
}
</style>
2 text-align:对块元素不起作用,对文字,inline元素和inline-block元素起作用;margin:0:auto中,是块元素水平居中;
3 line-height:两行文字基线间的距离
CSS中同样有顶线,中线,基线,底线的概念;
行距:指的是上一行的底线到下一行顶线间的距离:
内容区:行中顶线和底线之间的部分;
行框:两行文字“半行距分隔线”之间的距离;
CSS中定义height和line-height属性值相等,实现单行文字的垂直居中
<style type="text/css">
div
{
width:240px;
height:60px;
border:1px solid gray;
font-size:12px;
text-align:center;
}
#div1{line-height:20px;}
#div2{line-height:40px;}
#div3{line-height:60px;}
</style>
</head>
<body>
<div id="div1">height为60px,line-height为20px</div>
<div id="div2">height为60px,line-height为40px</div>
<div id="div3">height为60px,line-height为60px</div>
</body>
4 line-height的值为百分比的时候,当前元素的行高是相对于父元素的font-size计算的;
line-height=父元素的 font-sixze*百分比
<style type="text/css">
body{font-size:30px;}
#outer-box
{
/*父元素行高:30px×150%=45px*/
line-height:150%;
background-color:Red;
color:White;
}
#inner-box
{
/*子元素行高:30px×150%=45px(继承父元素的line-height)*/
font-size:20px;
background-color:Purple;
color:White;
}
</style>
</head>
<body>
<div id="outer-box">这是父元素
<div id="inner-box">这是子元素</div>
</div>
5 vertical-align取值
A 负值:元素相对于基线向下偏移2PX;
B 百分比,比如vertical-align:50%,假如当前元素继承的line-height 为20PX,则vertical-align等于vertical-align:10PX,相对
于基线向上偏移10PX;
6 vertical中对于div元素,实现DIV中图片垂直居中;
<style type="text/css">
div
{
display:table-cell;
vertical-align:middle;
width:120px;
height:120px;
border:1px solid gray;
}
</style>
</head>
<body>
<div><img src="images/girl.png" alt=""/></div>
发表评论
-
复习:强迫线程顺序执行方式
2019-01-03 23:42 1579方法1: 三个线程,t1,t2,t3,如果一定要按顺序执行, ... -
(转)不错的前后端处理异常的方法
2019-01-02 23:16 2019前言 在 Web 开发中, 我们经常会需要处理各种异常, 这是 ... -
info q的极客时间大咖说等资料下载
2018-08-15 08:40 3470info q的极客时间大咖说等资料下载,还有不少思维导图 链 ... -
CXF 客户端超时时间设置(非Spring配置方式)
2018-07-03 22:38 2236import org.apache.cxf.endpoint. ... -
(转)synchronized关键字画像:正确打开方式
2018-06-14 09:25 490https://mp.weixin.qq.com/s/b3Sx ... -
CountDownLatch的例子
2018-06-13 14:10 691public class StatsDemo { ... -
两道面试题,带你解析Java类加载机制
2018-06-12 16:29 611https://mp.weixin.qq.com/s/YTa0 ... -
Spring中获取request的几种方法,及其线程安全性分析
2018-06-11 09:03 671https://mp.weixin.qq.com/s/KeFJ ... -
内部类小结
2018-06-06 10:25 438https://mp.weixin.qq.com/s/hErv ... -
JVM虚拟机小结1
2018-06-04 20:43 5441 jps -l //列出详细的类名和进程ID 2)jps ... -
windows下自带命令行工具查看CPU资源情况等
2018-06-04 12:53 3101微软提供了不少命令行 ... -
(收藏)深入分析Java的序列化与反序列化
2018-05-30 15:21 617https://mp.weixin.qq.com/s/T2Bn ... -
apache common包中的序列化工具
2018-05-30 09:10 1844什么是序列化 我们的 ... -
JAVA8 JVM的变化: 元空间(Metaspace)
2018-05-24 22:30 967本文将会分享至今为至我收集的关于永久代(Permanent G ... -
(转)服务器性能指标(一)——负载(Load)分析及问题排查
2018-05-21 21:03 1363原创: Hollis Hollis 负载 ... -
(转)对象复用
2018-05-20 15:27 863public class Student { priv ... -
mapreduce中入门中要注意的几点
2018-05-06 08:59 674在 mapreduce中,比如有如下的词: I love b ... -
HDFS的基本操作
2018-05-02 21:47 940-mkdir 在HDFS创建目录 ... -
一个不错的开源工具类,专门用来解析日志头部的,好用
2018-05-02 20:00 772一个不错的开源工具类,专门用来解析日志头部的,好用。 http ... -
介绍个不错的RESTFUL MOCK的工具wiremock
2018-04-27 21:02 1907介绍个不错的RESTFUL MOCK的工具wiremock,地 ...
相关推荐
对于文字特效,CSS3提供了一系列文本属性,如`animation`、`transition`、`transform`等,可以用于创建动态效果。例如,`transform`属性中的`translateY`可以实现文字的垂直移动,配合`animation`或`transition`设定...
总结起来,纯CSS3按钮边框线条动画特效是利用CSS3的高级特性,为按钮设计出吸引人的动态效果,它不仅丰富了网页的视觉体验,也减少了对JavaScript的依赖,提高了网页加载速度。对于开发者而言,理解和掌握这种技术有...
总结来说,"CSS3 3D彩色文本转圈动画特效"是利用了CSS3的3D变换、动画和过渡,结合JavaScript和jQuery的动态控制能力,创造出引人注目的网页互动体验。这个特效不仅展示了CSS3的强大功能,也为开发者提供了一个学习...
首先,我们了解CSS3的核心特性——选择器、盒模型、边框与背景、文本样式、过渡(transition)、动画(animation)等。这些特性使得开发者能够创造出复杂的视觉效果,而无需借助JavaScript或其他编程语言。在这个...
总结来说,利用CSS和jQuery实现的键盘特效是一个结合了视觉设计和交互逻辑的综合性技术实践。它不仅提升了无物理键盘设备的输入体验,也为网页增添了一份独特的互动魅力。通过对HTML结构、CSS样式和jQuery事件的巧妙...
总结,通过CSS3,我们可以轻松创建各种引人注目的按钮和输入框特效,提升用户体验。同时,虽然CSS3本身不支持复杂的粒子效果,但与JavaScript配合使用,可以创造出极具吸引力的交互式网页元素。不断探索和实践这些...
总结,纯CSS3蛇形时间轴特效的实现依赖于CSS3的多项新特性,包括选择器、边框与背景、`transform`和`animation`等。在编写此类特效时,需注意浏览器兼容性和响应式设计,以确保在不同环境下都能呈现出优秀的用户体验...
总结,动态文本特效是前端开发中的一个重要组成部分,通过JavaScript和HTML/CSS的组合,可以创造出丰富多样的视觉效果,提升网页的互动性和吸引力。学习和掌握这些技术对于提升网站用户体验至关重要。
在本文中,我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分,它允许我们为元素添加平滑、动态的效果,从而提升用户体验和视觉吸引力。在这个主题中,...
本篇将深入探讨如何利用CSS3来创建“文字烟雾散开”的动态效果,这种特效可以使得网页上的文本在视觉上更具吸引力。 首先,我们需要理解CSS3中的关键帧动画(@keyframes)规则,它是实现此动画的基础。通过定义动画...
总结来说,这个“漂亮的CSS3线条按钮动画特效”主要利用了CSS3的伪类(`:hover`、`:before`和`:after`)、过渡(`transition`)以及关键帧动画(`@keyframes`)。通过这种方式,我们可以在不依赖JavaScript的情况下...
总结,这个"css3鼠标经过动画特效"展示了CSS3强大的动画功能,结合`:hover`伪类和`transition`属性,为网页交互增添了生动性。通过理解并应用这些技术,开发者可以创建出更多吸引人的用户体验,提升网站的视觉吸引力...
总结,CSS3图文轮播弹性切换特效结合了CSS3的关键帧动画、过渡、变换、Flexbox布局等特性,实现了无JavaScript的交互式轮播效果。同时,通过响应式设计和性能优化,确保了在各种设备上的良好表现。在实际开发中,...
总结来说,"CSS3制作炫酷搜索框动画特效"涵盖以下知识点: 1. HTML基础元素:`<input>`和`<button>`的使用。 2. CSS3选择器:ID、类、伪类(`:hover`, `:focus`, `:active`)。 3. CSS3过渡(Transition):属性...
下雪背景可能通过创建无数小雪花的div元素,然后应用CSS3的`translate`和`rotate`来模拟随机飘落的效果。 除此之外,"JS特效-其它代码"标签暗示了JavaScript可能也被用于增强用户体验。JavaScript可以与HTML和CSS...
总结来说,这个压缩包提供的是一套利用JS和CSS3技术实现的3D平行文本动画特效,结合jQuery简化了编程工作。通过学习和使用这套源码,开发者可以提升自己在动态网页效果方面的技能,并能够将其应用到实际的网页设计...
4. 文本渲染技巧:可能使用CSS的text-shadow、text-align、letter-spacing等属性来优化文字的显示效果。 5. 响应式设计:为了适应不同设备的屏幕大小,可能采用了媒体查询(media queries)来确保时钟在不同分辨率下...
相比CSS2,CSS3引入了大量新特性,如选择器、多列布局、边框和背景、文本渲染、过渡(transitions)、动画(animations)等,这些都极大地丰富了网页设计的可能性。 二、CSS3动画 CSS3动画是通过`@keyframes`规则...
总结来说,这个压缩包提供的是一种利用CSS和jQuery实现的数字滑动特效。这种特效可以应用于各种场景,比如计数器、评分系统或者数据可视化,为用户带来更生动的互动体验。通过深入研究这个代码示例,开发者可以提升...
总结来说,"js+css3提交按钮点击动画特效"是利用现代Web技术增强用户体验的一种方式,它结合了CSS3的动画功能和JavaScript的交互性,为传统的提交按钮赋予了生动有趣的视觉反馈。通过理解和实践这种特效,开发者可以...