编写html如何借鉴别人网页的样式,30个开发人员有用的CSS代码片段整理值得借鉴...

最新推荐文章于 2022-10-31 21:14:04 发布

知乎小管家

最新推荐文章于 2022-10-31 21:14:04 发布

阅读量507

点赞数

文章标签：编写html如何借鉴别人网页的样式

CSS 是我们使用的功能强大和最常用web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题。

在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；

Css Reset by Eric Meyer

复制代码代码如下:

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, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

根据文件格式显示不同的链接样式

复制代码代码如下:

/* external links */

a[href^="http://"]{

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;

}

在IE浏览器删除textarea的滚动条

复制代码代码如下:

textarea{

overflow:auto;

}

浏览器特定的 hacks

复制代码代码如下:

/* IE 6 */

* html .yourclass { }

/* IE 7 */

*+html .yourclass{ }

/* IE 7 and modern browsers */

html>body .yourclass { }

/* Modern browsers (not IE 7) */

html>/**/body .yourclass { }

/* Opera 9.27 and below */

html:first-child .yourclass { }

/* Safari */

html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */

body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */

body:first-of-type .yourclass { }

/* Safari 3+, Chrome 1+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {

.yourclass { }

}

Clearfix

复制代码代码如下:

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* close commented backslash hack */

固定宽度且居中

复制代码代码如下:

.wrapper {

width:960px;

margin:0 auto;

}

Rounded corners – border-radius

复制代码代码如下:

.round{

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px; /* future proofing */

-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

伪元素向文本的第一个字母添加特殊样式

复制代码代码如下:

p:first-letter{

display:block;

margin:5px 0 0 5px;

float:left;

color:#000;

font-size:60px;

font-family:Georgia;

}

使用 @fontface

复制代码代码如下:

@font-face {

font-family: 'MyFontFamily';

src: url('myfont-webfont.eot?') format('eot'),

url('myfont-webfont.woff') format('woff'),

url('myfont-webfont.ttf') format('truetype'),

url('myfont-webfont.svg#svgFontName') format('svg');

}

跨浏览器的inline-block

复制代码代码如下:

li {

width: 200px;

min-height: 250px;

border: 1px solid #000;

display: -moz-inline-stack;

display: inline-block;

vertical-align: top;

margin: 5px;

zoom: 1;

*display: inline;

_height: 250px;

}

Fixed Footer

复制代码代码如下:

#footer {

position:fixed;

left:0px;

bottom:0px;

height:30px;

width:100%;

background:#999;

}

/* IE 6 */

* html #footer {

position:absolute;

top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

}

更改内容区域的大小

复制代码代码如下:

#content {

width: 100%;

margin: 0;

float: none;

}

CSS3 Media Queries (这个不常用主要用于智能设备的判断显示不同的媒体)

复制代码代码如下:

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}

/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}

多背景图片

复制代码代码如下:

#multiple-images {

background: url(image_1.png) top left no-repeat,

url(image_2.png) bottom left no-repeat,

url(image_3.png) bottom right no-repeat;

}

多列

复制代码代码如下:

#columns-3 {

text-align: justify;

-moz-column-count: 3;

-moz-column-gap: 12px;

-moz-column-rule: 1px solid #c4c8cc;

-webkit-column-count: 3;

-webkit-column-gap: 12px;

-webkit-column-rule: 1px solid #c4c8cc;

}

在IE的最小高度

复制代码代码如下:

.box {

min-height:500px;

height:auto !important;

height:500px;

}

突出显示文本样式

复制代码代码如下:

::selection {

color: #000000;

background-color: #FF0000;

}

::-moz-selection {

color: #000000;

background: #FF0000;

}

Box Shadow

复制代码代码如下:

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

占位符文本样式

复制代码代码如下:

::-webkit-input-placeholder { color: #ccc; font-style:italic }

:-moz-placeholder { color: #ccc; font-style:italic }

CSS3 3D文字效果

复制代码代码如下:

h1 {

text-shadow: 0 1px 0 #ccc,

0 2px 0 #c9c9c9,

0 3px 0 #bbb,

0 4px 0 #b9b9b9,

0 5px 0 #aaa,

0 6px 1px rgba(0,0,0,.1),

0 0 5px rgba(0,0,0,.1),

0 1px 3px rgba(0,0,0,.3),

0 3px 5px rgba(0,0,0,.2),

0 5px 10px rgba(0,0,0,.25),

0 10px 10px rgba(0,0,0,.2),

0 20px 20px rgba(0,0,0,.15);

}

WebKit的边界半径修正

复制代码代码如下:

-webkit-background-clip: padding-box;

XBrowser的border-radius(CSS3PIE)

复制代码代码如下:

.roundbox {

-moz-border-radius:8px;

-webkit-border-radius:8px;

-khtml-border-radius:8px;

border-radius:8px;

behavior: url(/PIE.htc);

}

更好的兼容IE浏览器的

复制代码代码如下:

CSS3工具提示(这个很实用，看我网站的导航工具提示效果)

复制代码代码如下:

a {

color: #900;

text-decoration: none;

}

a:hover {

color: red;

position: relative;

}

a[title]:hover:after {

content: attr(title);

padding: 4px 8px;

color: #333;

position: absolute;

left: 0;

top: 100%;

white-space: nowrap;

z-index: 20px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0px 0px 4px #222;

-webkit-box-shadow: 0px 0px 4px #222;

box-shadow: 0px 0px 4px #222;

background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));

}

CSS3背景大小

复制代码代码如下:

body {

background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;

-moz-background-size: cover;

background-size: cover;

}

@media only all and (max-width: 1024px) and (max-height: 768px) {

body {

-moz-background-size: 1024px 768px;

background-size: 1024px 768px;

}

跨浏览器的CSS页面卷曲阴影

复制代码代码如下:

.page-curl {

position: relative;

background: #ffffff;

background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }

.page-curl:after {

z-index: -1;

position: absolute;

background: transparent;

width: 70%;

height: 55%;

content: '';

right: 10px;

bottom: 10px;

-webkit-transform: skew(15deg) rotate(5deg);

-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);

-moz-transform: skew(15deg) rotate(5deg);

-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }

.page-curl:before {

z-index: -2;

position: absolute;

background: transparent;

width: 70%;

height: 55%;

content: '';

left: 10px;

bottom: 10px;

-webkit-transform: skew(-15deg) rotate(-5deg);

-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);

-moz-transform: skew(-15deg) rotate(-5deg);

-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

CSS3模糊文字

复制代码代码如下:

.blur {

color: transparent;

text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

修复 IE6/7 margin/padding双倍间距错误

复制代码代码如下:

ul li

{

float: right;

margin-right: 10px;

*display: inline; /*Target IE7 and bellow*/

_display: inline; /*Target IE6 and bellow*/

}

/* This example fixes the double right margin bug */

链接伪类的顺序

复制代码代码如下:

a:link {color: blue;}

a:visited {color: purple;}

a:hover {color: red;}

a:active {color: yellow;}

响应布局的HTML Meta标签

复制代码代码如下:

知乎小管家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写html如何借鉴别人网页的样式,30个开发人员有用的CSS代码片段整理值得借鉴...

CSS 是我们使用的功能强大和最常用web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题。在今天的文章中分享我收藏的 30 个...
复制链接

扫一扫