简约个⼈主页html代码_60个⾮常实⽤的CSS代码⽚段，千万
要收藏好了
1、垂直对齐
如果你⽤CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利⽤CSS3的Transform，可以很优雅的解决这个困惑：
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
使⽤这个技巧，从单⾏⽂本、段落到box，都会垂直对齐。⽬前浏览器对Transform的⽀持是需要关注的，
Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均⽀持该属性。
2、伸展⼀个元素到窗⼝⾼度
在具体场景中，你可能想要将⼀个元素伸展到窗⼝⾼度，基本元素的调整只能调整容器的⼤⼩，因此要使⼀个元素伸展到窗⼝⾼度，
我们需要伸展顶层元素：html和body:
html,
body {
height: 100%;
}
然后将100%应⽤到任何元素的⾼
div {
height: 100%;
}
仓颉编程语言内测3、基于⽂件格式使⽤不同的样式
为了更容易知道链接的⽬标，有时你想让⼀些链接看起来和其它的不同。下⾯的⽚段在⽂本链接前添加⼀个图标，对不同的资源使⽤不同的图标或图⽚：
a[href^=""]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
4、创建跨浏览器的图像灰度
灰度有时看起来简约和优雅，能为⽹站呈现更深层次的⾊调。在⽰例中，我们将对⼀个SVG图像添加灰度过滤：
<svg xmlns="/2000/svg">
<filter id="grayscale">
clipboard英文<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
为了跨浏览器，会⽤到filter属性：
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
5、背景渐变动画
CSS中最具诱惑的⼀个功能是能添加动画效果，除了渐变，你可以给背景⾊、透明度、元素⼤⼩添加动画。⽬前，你不能为渐变添加动画，但下⾯的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
6、CSS：表格列宽⾃适⽤
对于表格，当谈到调整列宽时，是⽐较痛苦的。然后，这⾥有⼀个可以使⽤的技巧：给td元素添加white-space: nowrap；能让⽂本正确的换⾏
td {
white-space: nowrap;
}
7、只在⼀边或两边显⽰盒⼦阴影
如果你要⼀个盒阴影，试试这个技巧，能为任⼀边添加阴影。为了实现这个，⾸先定义⼀个有具体宽⾼的盒⼦，然后正确定位:after伪类。实现底边阴影的代码如下
简单的CSS代码就能在容器中调整⽂本：
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
html个人网页完整代码怎么看content: "2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis { from {
width: 2px;
}
to {
width: 15px;
}
}
11、样式重置
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kb margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }导航网站源码
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
12、典型的CSS清除浮动
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
13、新版清除浮动（2011）
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
14、跨浏览器的透明
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
15、CSS引⽤模板
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "201C""201D""2018""2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;activemq python
margin-right: .25em;
vertical-align: -.4em;
}
blockquote p {
display: inline;
}
16、个性圆⾓
#container {
-webkit-border-radius: 4px 3px 6px 10px;
conf文件是什么-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */#container { -webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-
webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 10px;
}
17、通⽤媒体查询
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论