jackyrong
- 浏览: 7943778 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (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竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
CSS学习7 常见技巧
1 文字的水平居中
<style type="text/css">
div
{
display:inline-block;
width:500px;
height:50px;
line-height:50px;
text-align:center; /*实现div元素内文字水平居中*/
border:1px dashed gray;
}
</style>
</head>
<body>
<div>CSS实现单行文字水平居中：text-align:center;</div>
2 块元素居中：
保证margin-left和margin-right都为auto,就可以保证块元素水平居中；如果要是使用margin:0:auto来实现块元素居中，就要
指定这个元素的宽度；
<style type="text/css">
div
{
margin:0 auto;
width:80%;
height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div></div>
3 行内元素：
使用text-align:center剧中；
<style type="text/css">
div{text-align:center;}
</style>
</head>
<body>
<div><strong>strong元素</strong></div>
<div><span>span元素</span></div>
<div><a href="http://www.lvyestudy.com">a元素</a></div>
4 INLINE-BLOCK元素的居中，比如图片
<style type="text/css">
body{text-align:center;}
div
{
display:inline-block;
width:100px;
height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div></div>
5 垂直居中
1) 单行文字垂直居中：
定义line-height和height属性值相等就可以
<style type="text/css">
div
{
height:100px;
line-height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div>《web前端开发精品课》</div>
2） 多行文字
如果父元素高度固定，文字可能是两行或者多行，则
<style type="text/css">
p
{
display:table-cell;
vertical-align:middle;
width:400px;
height:120px;
border:1px dashed gray;
}
span{display:inline-block;}
</style>
</head>
<body>
<p>
<span>《web前端开发精品课•HTML和CSS基础教程》<br />
《web前端开发精品课•HTML和CSS进阶教程》<br />
《web前端开发精品课•CSS3教程》</span>
</p>
6） CSS SPRITE
把所有图标放到一张背景图片中去，然后利用backgroud-position属性对背景进行定位，
可以利用css sprite generator在线生成地址：css.spritegen.com
原理：
{
background: url(images/sprite.png) no-repeat;
height:30px;
padding-left:30px;
}
.chrome { background-position: -0px -0px; }
.firefox { background-position: -0px -30px; }
.ie { background-position: -0px -60px;}
.opera { background-position: -0px -90px;}
.safari { background-position: -0px -120px; }
</style>
7）iconfont网站：用字体文件代替图片文件，实现小图标效果：
国内的www.iconfont.cn 国外的icomoon.io
1 文字的水平居中
<style type="text/css">
div
{
display:inline-block;
width:500px;
height:50px;
line-height:50px;
text-align:center; /*实现div元素内文字水平居中*/
border:1px dashed gray;
}
</style>
</head>
<body>
<div>CSS实现单行文字水平居中：text-align:center;</div>
2 块元素居中：
保证margin-left和margin-right都为auto,就可以保证块元素水平居中；如果要是使用margin:0:auto来实现块元素居中，就要
指定这个元素的宽度；
<style type="text/css">
div
{
margin:0 auto;
width:80%;
height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div></div>
3 行内元素：
使用text-align:center剧中；
<style type="text/css">
div{text-align:center;}
</style>
</head>
<body>
<div><strong>strong元素</strong></div>
<div><span>span元素</span></div>
<div><a href="http://www.lvyestudy.com">a元素</a></div>
4 INLINE-BLOCK元素的居中，比如图片
<style type="text/css">
body{text-align:center;}
div
{
display:inline-block;
width:100px;
height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div></div>
5 垂直居中
1) 单行文字垂直居中：
定义line-height和height属性值相等就可以
<style type="text/css">
div
{
height:100px;
line-height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div>《web前端开发精品课》</div>
2） 多行文字
如果父元素高度固定，文字可能是两行或者多行，则
<style type="text/css">
p
{
display:table-cell;
vertical-align:middle;
width:400px;
height:120px;
border:1px dashed gray;
}
span{display:inline-block;}
</style>
</head>
<body>
<p>
<span>《web前端开发精品课•HTML和CSS基础教程》<br />
《web前端开发精品课•HTML和CSS进阶教程》<br />
《web前端开发精品课•CSS3教程》</span>
</p>
6） CSS SPRITE
把所有图标放到一张背景图片中去，然后利用backgroud-position属性对背景进行定位，
可以利用css sprite generator在线生成地址：css.spritegen.com
原理：
{
background: url(images/sprite.png) no-repeat;
height:30px;
padding-left:30px;
}
.chrome { background-position: -0px -0px; }
.firefox { background-position: -0px -30px; }
.ie { background-position: -0px -60px;}
.opera { background-position: -0px -90px;}
.safari { background-position: -0px -120px; }
</style>
7）iconfont网站：用字体文件代替图片文件，实现小图标效果：
国内的www.iconfont.cn 国外的icomoon.io
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 825刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 551三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1572http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 822https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1701即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 1013不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3027参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93221. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 649http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 850http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10061 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 593虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 569【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1431https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 824深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 980(收藏）网页导出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 1592canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 577http://www.ruanyifeng.com/blog/ ...
相关推荐
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css学习总结思维导图
7. **响应式设计**: 使用媒体查询（`media queries`）可以实现响应式Web设计，根据设备的不同特性（如屏幕尺寸）应用不同的CSS。 8. **Flexbox布局**: 弹性盒模型（Flexbox）提供了一种更灵活的布局方式，可以轻松...
CSS制作网页总结经验,CSS制作网页总结经验,CSS制作网页总结经验
在本“上课用CSS实验总结”中，我们将深入探讨CSS（层叠样式表）的核心概念以及在实际项目中的应用。CSS是网页设计的关键技术之一，它负责定义网页内容的外观和布局，使得网页更具视觉吸引力并提高用户体验。在这个...
### CSS实战学习总结 在《CSS实战学习总结》这一篇深度文档中，作者辛磊针对CSS的实际应用进行了全面而深入的解析，旨在帮助读者掌握CSS的核心技能，提升网页设计与开发的能力。以下是对该文档中关键知识点的提炼与...
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两...
这是一篇关于前端页面的介绍，开放学习，望大家多多看看、 哈哈
总结来说，Postcss-css-variables插件是前端开发者处理CSS Variables的有效工具，它增强了CSS Variables的浏览器兼容性，简化了样式管理，提高了代码的可维护性和效率。结合PostCSS的其他插件，可以构建出强大的CSS...
整理了常用的css属性，适用于新手查阅，熟悉css基本属性使用等等
dw cs6的css总结
一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、...
html+css知识点总结
下面小编给大家分享一下。 首先点击左上角的file菜单，选择Setting 接着选择Editor下面的Inspections选项，如下图所示 然后在右侧找到CSS，选择typo，如下图所示 接着点击apply和ok按钮，如下图所示 然后新建一...
总结起来，Blueprint CSS 是一个强大且实用的CSS框架，能够帮助开发者快速构建响应式的、视觉统一的网页。其网格系统、预定义样式和打印优化等功能，大大提高了开发效率，同时也降低了维护成本。对于任何希望提升...
### CSS学习总结 #### 一、CSS选择器与样式应用 **1. 行内样式** 行内样式是在HTML元素内部直接使用`style`属性来指定样式规则的方式。这种方式适用于临时性的样式修改，但不利于代码的维护和复用。 **示例**： ...
本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先，让我们来谈谈`flex布局`。Flex布局，全称为 ...
本篇文章将深入探讨如何利用CSS实现无图片的圆角效果，以及在各种场景下创建圆角区块容器和圆形边框的方法。 一、CSS圆角基础 CSS3引入了`border-radius`属性，它允许我们为元素的四个角设定不同的圆角半径，从而...