合肥企业模板建站,网站备案信息如何下载,wordpress配图api,校园网站设计与实现1. 垂直对齐 如果你之前遇到过这个问题#xff0c;你就应该知道它是多么的烦人#xff0c;幸运的是#xff0c;现在你可以使用CSS3变换来解决这个问题#xff1a; .vc{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%…1. 垂直对齐 如果你之前遇到过这个问题你就应该知道它是多么的烦人幸运的是现在你可以使用CSS3变换来解决这个问题 .vc{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}2. 只在一侧或者两侧具有投影 .box-shadow { background-color: #AC92EC; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%;}.box-shadow:after { content: ; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;}3. 渐变背景动画效果 从CSS3开始动画变得非常的酷了但是切不可过分的使用它们。下面这一技巧巧妙地的移动背景位置使其看起来像动画一样 button { padding: 15px; background-image: linear-gradient(#FC6E51, #FFF); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s;} button:hover { background-position: 0 0;}4. 将文本分成多列 div{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;}5. 表格自动宽度 td { white-space: nowrap;}6. 像出版物一样第一个字变得大些 p:first-child::first-letter{ font-family: papyrus; font-size: 28px; font-weight: bold;}7. 特定浏览器的CSS Hacks的完整列表 有时候解决跨浏览器兼容性可能会非常的棘手但这些特定浏览器的技巧可能会帮你解决问题。 /***** Selector Hacks ******//* IE6 and below */* html #uno { color: red }/* IE7 */*:first-childhtml #dos { color: red } /* IE7, FF, Saf, Opera */htmlbody #tres { color: red }/* IE8, FF, Saf, Opera (Everything but IE 6,7) */html/**/body #cuatro { color: red }/* Opera 9.27 and below, safari 2 */html:first-child #cinco { color: red }/* Safari 2-3 */html[xmlns*] body:last-child #seis { color: red }/* safari 3, chrome 1, opera9, ff 3.5 */body:nth-of-type(1) #siete { color: red }/* safari 3, chrome 1, opera9, ff 3.5 */body:first-of-type #ocho { color: red }/* saf3, chrome1 */media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red }}/* iPhone / mobile webkit */media screen and (max-device-width: 480px) { #veintiseis { color: red }}/* Safari 2 - 3.1 */html[xmlns*]:root #trece { color: red }/* Safari 2 - 3.1, Opera 9.25 */*|html[xmlns*] #catorce { color: red }/* Everything but IE6-8 */:root * #quince { color: red }/* IE7 */*html #dieciocho { color: red }/* Firefox only. 1 */#veinticuatro, x:-moz-any-link { color: red }/* Firefox 3.0 */#veinticinco, x:-moz-any-link, x:default { color: red }/***** Attribute Hacks ******//* IE6 */#once { _color: blue }/* IE6, IE7 */#doce { *color: blue; /* or #color: blue */ }/* Everything but IE6 */#diecisiete { color/**/: blue }/* IE6, IE7, IE8 */#diecinueve { color: blue\9; }/* IE7, IE8 */#veinte { color/*\**/: blue\9; }/* IE6, IE7 -- acts as an !important */#veintesiete { color: blue !ie; } /* string after ! can be anything */ 8. 创建模糊文本 .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);} 9. 不使用表格实现跨浏览器垂直水平居中图片 这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片这是 IE 的一个hack figure classlogo span/span img classphoto//figure.logo { display: block; text-align: center; display: block; text-align: center; vertical-align: middle; border: 4px solid #dddddd; padding: 4px; height: 74px; width: 74px; } .logo * { display: inline-block; height: 100%; vertical-align: middle; } .logo .photo { height: auto; width: auto; max-width: 100%; max-height: 100%; } 10. 高亮选中的 input // HTMLinput idmycheck1 typecheckbox /label formycheck1Check box label here/labelbr /input idmycheck2 typecheckbox checked/label formycheck2Check box label here/labelbr /input idmycheck3 typecheckbox /label formycheck3Check box label here/label // CSSinput:checked label{ background: yellow; }11. 跨浏览器透明度 selector { filter: alpha(opacity50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}12. CSS投影 // 外投影.shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc;} // 内投影.shadow { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000;}13. 跨浏览器最小高度 #div { min-height: 500px; height:auto !important; height: 500px;}14. 固定 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);}15. 清除浮动 Clearfix /* slightly enhanced, universal clearfix hack */.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 */16. 给可点击元素添加手型光标 a[href], input[typesubmit], input[typeimage], label[for], select, button, .pointer { cursor: pointer;}17. iPad 定向CSS !-- css --media only screen and (max-device-width: 1024px) and (orientation:portrait) { .landscape { display: none; }}media only screen and (max-device-width: 1024px) and (orientation:landscape) { .portrait { display: none; }}!-- example markup --h1 classportraitYour device orientation is portraith1h1 classlandscapeYour device orientation is landscapeh118. Pre 标签内文本换行 pre{height: 120px;overflow: auto;font-family: “Consolas”,monospace;font-size: 9pt;text-align:left;background-color: #FCF7EC;overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, notwhite-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */word-wrap: break-word; /* Internet Explorer 5.5 */margin: 0px 0px 0px 0px;padding:5px 5px 3px 5px;white-space : normal; /* crucial for IE 6, maybe 7? */}19. CSS3媒体查询 /* Smartphones (portrait and landscape) ----------- */media only screenand (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */media only screenand (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}/* iPads (landscape) ----------- */media only screenand (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */media only screenand (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}/* Desktops and laptops ----------- */media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */media only screenand (min-width : 1824px) {/* Styles */}/* iPhone 4 ----------- */mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}20. 重置加载 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,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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}/* remember to define focus styles! */:focus { outline: 0;}body { line-height: 1; color: black; background: white;}ol, ul { list-style: none;}/* tables still need cellspacing0 in the markup */table { border-collapse: separate; border-spacing: 0;}caption, th, td { text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after { content: ;}blockquote, q { quotes: ;}21. 多边框 元素必须是相对定位且具有足够的padding来显示多余的边框 #borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600;}#borders:before { content:; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929;}#borders:after { content:; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid #00b4ff; background:#fff;}22. 移除IE中textarea的滚动条 textarea { overflow: auto; }23. 简单但好看的引用样式 css-blockquote 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; margin-right:.25em; vertical-align:-.4em;}blockquote p { display:inline;}24. :-moz-placeholder !doctype htmlhtmlhead titlePlaceholder demo/title style typetext/css input:-moz-placeholder { color: green; } /style/headbody input idtest placeholderPlaceholder text!/body/html25. 另一种固定footer的方式 * { margin:0; padding:0; } html, body, #wrap { height: 100%; }body #wrap {height: auto; min-height: 100%;}#main { padding-bottom: 150px; } /* must be same height as the footer */#footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/.clearfix:after {content: .; display: block; height: 0; clear: both; visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */div idwrap div idmain classclearfix /div/divdiv idfooter/div 26. 背景透明 .rgba { background-color: transparent; background-color: rgba(200,200,200,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr#99dddddd,endColorstr#99dddddd); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#99dddddd,endColorstr#99dddddd);} 27. 居中未知宽度的DIV元素 .content { margin: 0 auto 8px; display: table; }.content div { display: table-cell; }!--[if IE].content { display: block; text-align: center; }.content div { display: inline; zoom: 1;}![endif]--28. 根据文件类型设置样式 /* external links */a[href^http://]{padding-right: 13px;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: 18px;background: url(acrobat.png) no-repeat center right;} 29. 解决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 */ 30. 更改选中文本的样式 ::selection{color: white;background-color: red;}::-moz-selection /* Firefox needs an extra attention for this */{color: white;background-color: red;} 31. 首字下沉 p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; } 32、如何清除图片下方出现几像素的空白间隙 方法1img{display:block;}方法2img{vertical-align:top;}除了top值还可以设置为text-top | middle | bottom | text-bottom甚至特定的length和percentage值都可以方法3#test{font-size:0;line-height:0;}#test为img的父元素 33、如何让文本垂直对齐文本输入框方法input{vertical-align:middle;} 34、为什么Standard mode下IE无法设置滚动条的颜色方法html{ scrollbar-3dlight-color:#999; scrollbar-darkshadow-color:#999; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eee; scrollbar-arrow-color:#000; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; scrollbar-base-color:#ddd;} 35、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中方法#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}#test是img的祖父节点p是img的父节点。Know More未知尺寸的图片如何水平垂直居中 36、如何容器透明内容不透明方法1.outer{width:200px;height:200px;background:#000;filter:alpha(opacity20);opacity:.2;}.inner{width:200px;height:200px;margin-top:-200px;} div classouter!--我是透明的容器--/divdiv classinner我是不透明的内容/div原理是容器层与内容层并级容器层设置透明度内容层通过负margin或者position绝对定位等方式覆盖到容器层上方法2.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity20)\9;}.outer .inner{position:relative\9;} div classouter div classinner我是不透明的内容/div/div高级浏览器直接使用rgba颜色值实现IE浏览器在定义容器透明的同时让子节点相对定位也可达到效果 37、如何做1像素细边框的table 方法#test{border-collapse:collapse; border:1px solid #ddd;}#test th,#test td{border:1px solid #ddd;} table idtest trth姓名/thtdJoy Du/td/tr trth年龄/thtd26/td/tr/table 38、如何使页面文本行距始终保持为n倍字体大小的基调方法body{line-height:n;} 39、如何解决IE6下当li内部元素是定义了display:block的内联元素时底部产生空白的问题 a,span{display:block;background:#ddd;} ul lia hrefhttp://css.doyoe.com/CSS参考手册/a/li lia hrefhttp://blog.doyoe.com/CSS探索之旅/a/li lia hrefhttp://demo.doyoe.com/web前端实验室/a/li lispan测试li内部元素为设置了display:block的内联元素时底部产生空白/span/li/ul 如上代码IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1 40、如何区别display:none与visibility:hidden 方法相同的是display:none与visibility:hidden都可以用来隐藏某个元素 不同的是display:none在隐藏元素的时候将其占位空间也去掉而visibility:hidden只是隐藏了内容而已其占位空间仍然保留。 41、如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时li之间产生的空白间隙的BUG方法li{vertical-align:top;}除了top值还可以设置为text-top | middle | bottom | text-bottom甚至特定的length和percentage值都可以转载于:https://www.cnblogs.com/design-engineer/p/5377759.html
