CSS代码片段
定位:
将元素居中
将元素水平居中
将元素垂直居中
样式:
文字毛玻璃效果 -------------------------------------------代码------------------------------------------------------ 将元素居中:
1.使用绝对定位实现1
{
width: 50px;
height: 50px; /*设置元素宽高*/
position: absolute; /*修改为绝对定位*/
top: 50%;
left: 50%; /*设置与上、左的距离*/
margin-top: -25px;
margin-left: -25px; /*外边距分别为宽高的一半*/
}
2.使用绝对定位实现2
{
position: absolute;
left: 50%;
top: 50%;
transform: tranplate(-50%, -50%);
}
3.使用父元素文本流水平居中,单元格显示垂直居中
#parent{
text-align: center; /*设置子元素水平居中*/
display: table-cell; /*设置为表格单元格显示*/
vertical-align: middle; /*设置垂直对齐方式为居中*/
}
#child{
display: inline-block;
} 将元素水平居中
1.使用外边距自动实现(相对父元素居中)
{
margin: 0 auto;
}
2.将父元素文本流水平居中,配合子元素变成行内快(child里的文字也会水平居中,可以在.child添加text-align:left;还原)
#parent{
text-align: center;
}
#child{
display: inline-block;
} 将元素垂直居中
1.将父元素设置为表格单元格显示,使内容垂直居中(子元素垂直居中)
#parent{
display: table-cell; /*设置为表格单元格显示*/
vertical-align:middle; /*设置垂直对齐方式为居中*/
} 文字毛玻璃效果
1.将文字设置成黑色透明,然后加上投影
{
color:rgba(0,0,0,0);
text-shadow: 0 0 10px black;
}
CSS代码片段的更多相关文章
- 30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...
- HTML/CSS代码片段
内容简介:本文收集了我常用的CSS代码片段! *reset @charset "utf-8"; /* reset */ body, dl, dd, h1, h2, h3, h4, ...
- 【转】30+有用的CSS代码片段
来自:WEB资源网 链接:http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/ 原文:http://www.desig ...
- 实用的60个CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- 60个有用CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- 拥有的50个CSS代码片段(上)
1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...
- (转)每位设计师都应该拥有的50个CSS代码片段
原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
- Css学习总结(2)——60个有用CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- 实用的60个CSS代码片段[上]
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
随机推荐
- Python tkinter 学习记录(一) --label 与 button
最简的形式 from tkinter import * root = Tk() # 创建一个Tk实例 root.wm_title("标题") # 修改标题 root.mainloo ...
- easyui自定义皮肤及缺陷修改
引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...
- 解决idea导入项目后依赖报错问题
1.在idea首页 Confige-->setting-->build,execution,deployment-->buildTool-->maven-->work o ...
- [Swift]LeetCode321. 拼接最大数 | Create Maximum Number
Given two arrays of length m and n with digits 0-9 representing two numbers. Create the maximum numb ...
- [Swift]LeetCode678. 有效的括号字符串 | Valid Parenthesis String
Given a string containing only three types of characters: '(', ')' and '*', write a function to chec ...
- [Swift]LeetCode353. 设计贪吃蛇游戏 $ Design Snake Game
Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...
- Python内置函数(34)——isinstance
英文文档: isinstance(object, classinfo) Return true if the object argument is an instance of the classin ...
- 12.Flask-Restful
定义Restful的视图 安装:pip install flask-restful 如果使用Flask-restful,那么定义视图函数的时候,就要继承flask_restful.Resourse类, ...
- Can't connect to X11 window server using ':1.0' as the value of the DISPLAY variable.
安装oracle数据时需要用到图形界面安装,当我们用root用户登录后切换到oracle用户时运行./runInstaller提示报错: Can't connect to X11 window ser ...
- asp.net core 系列 21 EF现有数据库进行反向工程
一.概述 在上篇中使用EF基于数据模型创建数据库, 本篇继续使用 EF 基于数据库创建数据模型. 实现对已有数据库进行反向工程,来构建数据访问的 ASP.NET Core MVC 应用程序.已有 ...