建站
咨询
售后
建站咨询
分享10个很实用的CSS的代码片段
介绍
发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及木屋等，在成都网站建设、网络营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。
以下是10个来自于网络收集的非常实用且重要的CSS代码片段
CSS重置
这是CSS浏览器重置的基本和常见的CSS代码段
- 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
- 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;
- }
跨浏览器透明度设置
- .transparent {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */
- filter: alpha(opacity=50); /* IE 5-7 */
- -moz-opacity: 0.5;/* Netscape */
- -khtml-opacity: 0.5; /* Safari 1.x */
- opacity: 0.5; /* Good browsers */
- }
常规媒体查询
- /* Smartphones (portrait and landscape) ----------- */
- @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
- }
- /* Smartphones (landscape) ----------- */
- @media only screen and (min-width : 321px) {
- }
- /* Smartphones (portrait) ----------- */
- @media only screen and (max-width : 320px) {
- }
- /* iPads (portrait and landscape) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
- }
- /* iPads (landscape) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
- }
- /* iPads (portrait) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
- }
- /* Desktops and laptops ----------- */
- @media only screen and (min-width : 1224px) {
- }
- /* Large screens ----------- */
- @media only screen and (min-width : 1824px) {
- }
- /* iPhone 4 ----------- */
- @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
- }
自定义选中文本
- ::selection {
- background: #51a351;
- }
- ::-moz-selection {
- background: #51a351;
- }
- ::-webkit-selection {
- background: #51a351;
- }
带CSS3的全屏背景
- html {
- background: url('images/bg.jpg') no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- }
强制垂直滚动条
- html {
- height: 101%
- }
文本首字母大写
- p:first-letter {
- display: block;
- margin: 4px 0 0 4px;
- float: left;
- color: #ff3366;
- font-size: 5.3em;
- font-family: Georgia, Times New Roman, serif;
- }
内外阴影
- #mydiv {
- -moz-box-shadow: inset 2px 0 4px #000;
- -webkit-box-shadow: inset 2px 0 4px #000;
- box-shadow: inset 2px 0 4px #000;
- }
- #mydiv {
- -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- }
语音气泡
- .speech-bubble {
- position: relative;
- background: #00aabb;
- border-radius: .4em;
- }
- .speech-bubble:after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 0;
- height: 0;
- border: 30px solid transparent;
- border-top-color: #00aabb;
- border-bottom: 0;
- border-left: 0;
- margin-left: -15px;
- margin-bottom: -30px;
- }
自定义输入样式
- input[type=text], textarea {
- -webkit-transition: all 0.30s ease-in-out;
- -moz-transition: all 0.30s ease-in-out;
- -ms-transition: all 0.30s ease-in-out;
- -o-transition: all 0.30s ease-in-out;
- outline: none;
- padding: 3px 0px 3px 3px;
- margin: 5px 1px 3px 0px;
- border: 1px solid #ddd;
- }
- input[type=text]:focus, textarea:focus {
- box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- padding: 3px 0px 3px 3px;
- margin: 5px 1px 3px 0px;
- border: 1px solid rgba(81, 203, 238, 1);
- }
新闻标题：分享10个很实用的CSS的代码片段
标题网址：http://www.jxjierui.cn/article/cceoehe.html
