jackyrong
- 浏览: 7948779 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (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 块元素排斥其他元素与其一行，内部可以容纳其他块元素和行元素，有高度宽度，可以有四个方向的MARGIN属性，
如DIV,P,H1-H6,HR等都是块元素；
2 行元素可以一行，不能包含块元素，无法定义高度和宽度，可以定义MARGIN-LEFT,MARGIN-RIGHT，无法定义MARGIN-TOP和MARGIN-TOP；
常见的有SPAN,STRONG,S,U,A,EM标签
3 使用DISPLAY:inline 行内元素 display:block 块元素；
inline-block:行内块元素 ，有如下特点：
1） 可以定义WIDTH和height;
2) 可以和其他行内元素一行；
常见的有IMG标签和INPUT标签
<style type="text/css">
span
{
display:inline-block;
width:60px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
4 display:none和visibility:hidden区别；display:none为彻底的无了这个空间，visibility:hidden为看不到，但依然占据空间；
5 display:table-cell,可以让图片垂直居中
<style type="text/css">
div
{
display:table-cell;
width:150px;
height:150px;
border:1px solid gray;
vertical-align:middle;
text-align:center;
}
img{vertical-align:middle;}
div+div{border-left:none;}
</style>
</head>
<body>
<div><img src="images/haizei1.png" alt=""/></div>
<div><img src="images/haizei2.png" alt=""/></div>
<div><img src="images/haizei3.png" alt=""/></div>
6 等高布局
可以使用display:table-cell完成；
<style type="text/css">
#wrapper{display:table-row;}
#img-box
{
display:table-cell;
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
width:150px;
border:1px solid red;
}
#text-box
{
display:table-cell;
width:200px;
border:1px solid red;
border-left:none;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box">
<img src="images/haizei1.png" alt=""/>
</div>
<div id="text-box">
<span>《ONE PIECE》（海贼王、航海王）简称“OP”，是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年路飞，以成为“海贼王”为目标和同伴在大海展开冒险的故事。</span>
</div>
可以看到，两个DIV的高度相等，自动适应，高度由内容中最大的决定；
7 自动平分元素
当父元素{display:none};
子元素{dispplay:table-cell;}
如果父元素给定一定的高度，则父元素宽度就根据子元素的个数进行自动平均划分；
<style type="text/css">
*{padding:0;margin:0;}
ul
{
list-style-type:none;
display:table;
width:300px;
}
li
{
display: table-cell;
height:60px;
line-height:60px;
text-align:center;
color:White;
}
ul li:nth-child(1){background-color:Red;}
ul li:nth-child(2){background-color:Orange;}
ul li:nth-child(3){background-color:Blue;}
ul li:nth-child(4){background-color:silver;}
ul li:nth-child(5){background-color:Purple;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
8 去除INLINE-BLOCK元素间距
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none; font-size:0;}
li
{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
font-size:30px;
text-align:center;
color:White;
background-color:Purple;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
设置父元素：font-size:0去除
如DIV,P,H1-H6,HR等都是块元素；
2 行元素可以一行，不能包含块元素，无法定义高度和宽度，可以定义MARGIN-LEFT,MARGIN-RIGHT，无法定义MARGIN-TOP和MARGIN-TOP；
常见的有SPAN,STRONG,S,U,A,EM标签
3 使用DISPLAY:inline 行内元素 display:block 块元素；
inline-block:行内块元素 ，有如下特点：
1） 可以定义WIDTH和height;
2) 可以和其他行内元素一行；
常见的有IMG标签和INPUT标签
<style type="text/css">
span
{
display:inline-block;
width:60px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
4 display:none和visibility:hidden区别；display:none为彻底的无了这个空间，visibility:hidden为看不到，但依然占据空间；
5 display:table-cell,可以让图片垂直居中
<style type="text/css">
div
{
display:table-cell;
width:150px;
height:150px;
border:1px solid gray;
vertical-align:middle;
text-align:center;
}
img{vertical-align:middle;}
div+div{border-left:none;}
</style>
</head>
<body>
<div><img src="images/haizei1.png" alt=""/></div>
<div><img src="images/haizei2.png" alt=""/></div>
<div><img src="images/haizei3.png" alt=""/></div>
6 等高布局
可以使用display:table-cell完成；
<style type="text/css">
#wrapper{display:table-row;}
#img-box
{
display:table-cell;
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
width:150px;
border:1px solid red;
}
#text-box
{
display:table-cell;
width:200px;
border:1px solid red;
border-left:none;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box">
<img src="images/haizei1.png" alt=""/>
</div>
<div id="text-box">
<span>《ONE PIECE》（海贼王、航海王）简称“OP”，是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年路飞，以成为“海贼王”为目标和同伴在大海展开冒险的故事。</span>
</div>
可以看到，两个DIV的高度相等，自动适应，高度由内容中最大的决定；
7 自动平分元素
当父元素{display:none};
子元素{dispplay:table-cell;}
如果父元素给定一定的高度，则父元素宽度就根据子元素的个数进行自动平均划分；
<style type="text/css">
*{padding:0;margin:0;}
ul
{
list-style-type:none;
display:table;
width:300px;
}
li
{
display: table-cell;
height:60px;
line-height:60px;
text-align:center;
color:White;
}
ul li:nth-child(1){background-color:Red;}
ul li:nth-child(2){background-color:Orange;}
ul li:nth-child(3){background-color:Blue;}
ul li:nth-child(4){background-color:silver;}
ul li:nth-child(5){background-color:Purple;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
8 去除INLINE-BLOCK元素间距
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none; font-size:0;}
li
{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
font-size:30px;
text-align:center;
color:White;
background-color:Purple;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
设置父元素：font-size:0去除
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 829刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 555三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1572http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 824https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1704即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 1013不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3032参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93381. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 650http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 851http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10091 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 597虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 574【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1432https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 824深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 990(收藏）网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1151https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3160http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1595canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 580http://www.ruanyifeng.com/blog/ ...
相关推荐
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css3笔记知识点总结
总结来说，纯CSS3制作3D旋转球体涉及的关键知识点有：`transform`属性、`rotateX`和`rotateY`用于3D旋转、`perspective`定义观察者视角、`animation`实现动态效果以及`border-radius`创建圆形。通过巧妙地组合这些...
总结来说，这个特效充分利用了CSS3的3D变换、过渡和动画特性，创造出引人注目的3D浮雕文字动画，展示了现代Web设计的创新和灵活性。对于学习和掌握CSS3的开发者而言，这是一个值得研究的优秀案例。
【CSS3精美飘花效果】是一种...总结起来，CSS3精美飘花效果的实现依赖于关键帧动画、绝对定位、随机属性生成等技术。通过巧妙地组合和调整这些元素，我们可以创造出极具吸引力且可定制的飘花特效，为网页增添动态美感。
CSS制作网页总结经验,CSS制作网页总结经验,CSS制作网页总结经验
总结来说，CSS3马赛克样式图片切换是一种通过CSS3的新特性来创建独特视觉效果的方法。通过合理运用`grid`布局、伪元素、过渡和动画，我们可以创建出既美观又交互性强的图片展示效果。同时，配合响应式设计和性能优化...
总结来说，CSS3立体旋转菜单是一种创新的网页导航方式，它利用了CSS3的3D变换功能，为用户带来更丰富的视觉体验。通过熟练掌握`transform`、`perspective`等属性，我们可以创造出各种各样的动态菜单效果，提升网站的...
css学习总结思维导图
3. **层叠与继承**: CSS的“级联”特性意味着样式可以从多个来源应用，按照特定规则级联。继承则指子元素可以继承父元素的某些样式，但不是所有属性都能继承，比如`color`可以，而`border`则不行。 4. **盒模型**: ...
总结来说，`css3.htc`是一种为IE8实现CSS3圆角边框的技术，通过`behavior`属性将JavaScript代码注入浏览器，实现对非标准属性的支持。然而，由于其局限性和现代浏览器的广泛兼容性，这种技术在当前的开发实践中已...
**CSS3小结** 在网页设计领域，CSS3（Cascading Style Sheets Level 3）是HTML和XML文档样式表语言的最新版本，它极大地扩展了CSS2.1的功能，引入了许多新的特性和改进，使得网页设计更加丰富多彩，更具表现力。本...
总结来说，"CSS3图片3D旋转相册"是利用CSS3的变换、过渡和可能的动画特性，配合jQuery插件，来实现一个具有动态3D旋转和鼠标悬停时的抖动效果的图片展示组件。这个技术的运用展示了CSS3在网页设计中的强大功能，以及...
总结起来，纯CSS3按钮边框线条动画特效是利用CSS3的高级特性，为按钮设计出吸引人的动态效果，它不仅丰富了网页的视觉体验，也减少了对JavaScript的依赖，提高了网页加载速度。对于开发者而言，理解和掌握这种技术有...
总结起来，CSS3进度条允许开发者通过简单的HTML和CSS代码实现具有视觉吸引力的进度指示器。通过调整样式和引入动画效果，我们可以创建出各种各样的进度条，如多彩、平滑过渡的进度条，以提升用户体验。在实际项目中...
总结起来，"js+css3图片3D倾斜布局点击弹窗放大预览代码"项目是一个结合了CSS3高级特性和JavaScript交互设计的实例，它展示了如何通过现代Web技术实现创新的用户体验。通过学习和理解这个项目，开发者可以提升自己在...
在本“上课用CSS实验总结”中，我们将深入探讨CSS（层叠样式表）的核心概念以及在实际项目中的应用。CSS是网页设计的关键技术之一，它负责定义网页内容的外观和布局，使得网页更具视觉吸引力并提高用户体验。在这个...
总结来说，"纯CSS3 3D立体圆盘时钟动画"项目涉及的知识点主要包括： 1. CSS3的3D转换：`rotateX`, `rotateY`, `perspective` 2. `transform`属性的应用 3. `animation`属性与`@keyframes`规则 4. 使用伪元素`::...