编程小贴士

给你的编程提供小点子


22个必须知道的css技巧

1、改变选中文字的背景和颜色
::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}
2、防止火狐滚动条跳动
html{ overflow-y:scroll; }
3、分页打印
.page-break{ page-break-before:always; }
4、使用!important
.page { background-color:blue !important;   background-color:red;}
5、图像替换文字
.header{
text-indent:-9999px;
background:url(‘someimage.jpg’) no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}
标注:text-indent:-9999px; 是将首行左缩进到人看不到的地方
6、兼容浏览器的最小高度
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
7、对新窗口打开得链接高亮显示
a[target=”_blank”]:before,
a[target=”new”]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px “Zapf Dingbats”;
content: “\279C”;
}
8、美化li序列号
tips1000_2014-10-13_00-24-54
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
9、首字下沉
tips1000_2014-10-13_00-24-541
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}
10、兼容浏览器的opacity
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
11、使用line-height实现垂直居中
line-height:30px;

12、居中布局
body{
width:1000px;
margin:0 auto;
}
13、移除ie文本域的垂直滚动条
textarea{
overflow:auto;
}
14、移动超链接的虚线框
a:active, a:focus{ outline:none; }
15、ie下元素消失,给该元素添加
position:relative;
16、根据链接不一样,添加不一样的icons
a[href$=’.doc’] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}
17、css手型点击样式
input[type=submit],label,select,.pointer { cursor:pointer; }
18、字母大写
text-transform: capitalize;
19、所有英文大写,且首字母比其他的大
font-variant:small-caps;
20、高亮文本框,不支持ie
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}
21、移除img边框
a img{ border:none; }
22、用label实现无表格表单
HTML Code
<form method=”post” action=”#” >
<p><label for=”username” >Username</label>
<input type=”text” id=”username” name=”username” />
</p>
<p><label for=”password” >Username</label>
<input type=”password” id=”password” name=”pass” />
</p>
<p><input type=”submit” value=”Submit” /></p>
</form>
CSS Code
p label{
width:100px;
float:left;
margin-right:10px;
text-align:right;
}

139 Responses to “ 22个必须知道的css技巧 ”

  1. mia pron khalifa说道:

    vXidI0 You have brought up a very excellent points , appreciate it for the post.

  2. Say, you got a nice post.Really thank you!

  3. Tattoo Artists说道:

    Thanks so much for the blog post.Thanks Again. Keep writing.

  4. animal drawings说道:

    It’а†s actually a cool and helpful piece of info. I am happy that you just shared this helpful information with us. Please stay us up to date like this. Thanks for sharing.

  5. Thanks again for the post.Much thanks again. Really Great.

  6. Jual Tas Sepatu Murah talking about! Thanks

  7. Im grateful for the post.Really looking forward to read more. Great.

  8. Click to read说道:

    You have noted very interesting details! ps nice web site.

  9. a fantastic read说道:

    I truly appreciate this blog post.Thanks Again. Will read on

  10. I value the article post.Really thank you! Really Cool.

  11. check over here说道:

    There is noticeably a bundle to know about this. I assume you made sure nice factors in options also.

  12. W88说道:

    There is certainly a lot to find out about this subject. I really like all the points you ave made.

  13. You made some first rate points there. I looked on the internet for the difficulty and located most individuals will go along with along with your website.

  14. Woking taxi说道:

    Many thanks! It a wonderful internet site!|

  15. inkishinov kossatzki akiva witches overkill rambert valcke tickets marzi

  16. The Lost Ways说道:

    This blog was how do I say it? Relevant!! Finally I have found something which helped me. Thanks a lot!

  17. Muchos Gracias for your post. Really Cool.

  18. H1B说道:

    IE still is the marketplace chief and a large portion of other people will leave out

  19. site web说道:

    Wow, great blog.Really thank you! Really Great.

  20. Nwokolo说道:

    while and yours is the best I have found out till now.

  21. klm coupon code说道:

    Your style is unique in comparison to other people I ave read stuff from. Many thanks for posting when you have the opportunity, Guess I all just book mark this site.

  22. you are stating and the best way in which you say it.

  23. Wow! Thank you! I always wanted to write on my blog something like that. Can I implement a part of your post to my blog?

  24. budget dumpster说道:

    Than?s for your maаА аБТ–vаА аЂа•lаА аБТ•us posting!

  25. Eminem说道:

    Very educating story, saved your site for hopes to read more!

  26. watch video说道:

    This awesome blog is really educating additionally informative. I have chosen many interesting stuff out of it. I ad love to come back every once in a while. Thanks a lot!

  27. truyen ngon tinh说道:

    This unique blog is really educating and besides diverting. I have discovered a lot of handy advices out of this amazing blog. I ad love to return again soon. Thanks a bunch!

  28. Tra thao moc说道:

    veux garder ta que le monde tot il marchait, je ne

  29. Say, you got a nice blog.Really looking forward to read more. Keep writing.

  30. Usually I don at read post on blogs, but I would like to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Thanks, quite nice article.

  31. Online说道:

    of the subjects you write related to here. Again, awesome web site!

  32. Thanks for this great article! It has been extremely useful. I wish that you will proceed posting your knowledge with me.

  33. Hosting说道:

    Keep up the superb work , I read few content on this website and I conceive that your web site is real interesting and contains lots of good info.

  34. This is a list of words, not an essay. you will be incompetent

  35. Polainas tejidas说道:

    It’а†s really a nice and helpful piece of info. I am happy that you just shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.

  36. Polainas tejidas说道:

    Thanks so much for the blog article.Really looking forward to read more. Great.

  37. try this说道:

    There as certainly a lot to learn about this issue. I like all of the points you ave made.

  38. red shoes说道:

    This site was how do I say it? Relevant!! Finally I ave found something that helped me. Thanks!

  39. more说道:

    if the roof needs to be waterproof and durable. For instance, a tear off will often be necessary.

  40. Oakley has been gone for months, but the

  41. hampton bay说道:

    Skillful Plan Developing I consider something genuinely special in this website.

  42. I think this is a real great article post.Really looking forward to read more. Fantastic.

  43. Waec说道:

    This is one awesome post.Really thank you!

  44. School admission说道:

    Some times its a pain in the ass to read what people wrote but this internet site is real user friendly !.

  45. Spot on with this write-up, I really assume this website wants rather more consideration. IaаАа’б‚Т€ТšаЂаŒаАа’б‚Т€ТžаБТžll probably be once more to read far more, thanks for that info.

  46. this website说道:

    Please let me know if you are looking for a article author for your blog. You have some really good articles and I believe I would be a good asset. If you ever want to take some of the load off,

  47. just me or do some of the comments look like they are

  48. Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is wonderful, as well as the content!

  49. Really appreciate you sharing this post.Really looking forward to read more. Keep writing.

  50. Real clean web site, appreciate it for this post.

  51. this website说道:

    Woah! I am really enjoying the template/theme of this

  52. to learn more说道:

    Im thankful for the blog post. Much obliged.

  53. It as nearly impossible to attain educated inhabitants in this exact focus, but you sound in the vein of you identify what you are talking about! Thanks

  54. Thank you for sharing your thoughts. I really appreciate your efforts and I am waiting for your further write ups thank you once again.

  55. There is obviously a bunch to identify about this. I think you made various good points in features also.

  56. Josefina说道:

    It as difficult to find knowledgeable people about this subject, but you seem like you know what you are talking about! Thanks

  57. Thank you ever so for you blog article.Much thanks again. Awesome.

  58. Very neat blog.Much thanks again. Fantastic.

  59. Your style is really unique in comparison to other people I ave read stuff from. Thank you for posting when you have the opportunity, Guess I will just bookmark this site.

  60. Only a smiling visitant here to share the love (:, btw outstanding pattern. Make the most of your regrets. To regret deeply is to live afresh. by Henry David Thoreau.

  61. traveler说道:

    Your style is so unique in comparison to other folks I have read stuff from. Thank you for posting when you ave got the opportunity, Guess I will just book mark this web site.

  62. Very good post! We are linking to this great article on our site. Keep up the great writing.

  63. This paragraph regarding SEO presents clear idea designed for new SEO visitors that how to do SEO, therefore keep it up. Pleasant work

  64. This is very interesting, You are a very skilled blogger. I ave joined your rss feed and look forward to seeking more of your fantastic post. Also, I have shared your site in my social networks!

  65. Only a smiling visitant here to share the love (:, btw great style.

  66. Really appreciate you sharing this blog post.Really looking forward to read more. Cool.

  67. Too many times I passed over this link, and that was a tragedy. I am glad I will be back!

  68. This is just what I ave been sharp on behalf of all day. Achieve not bring to a halt updating your blog.

  69. It as in reality a great and useful piece of info. I am satisfied that you simply shared this useful tidbit with us. Please stay us informed like this. Keep writing.

  70. There is noticeably a bundle to learn about this. I assume you made certain good factors in options also.

  71. Berniece说道:

    I was seeking this particular information for a long time.

  72. well defined说道:

    Keep up the good piece of work, I read few content on this site and I conceive that your weblog is rattling interesting and holds lots of great info.

  73. see this website说道:

    This awesome blog is without a doubt entertaining and also factual. I have discovered a lot of useful advices out of this blog. I ad love to come back every once in a while. Thanks a lot!

  74. Some truly good articles on this web site, appreciate it for contribution.

  75. whole lot like mine to understand appreciably extra pertaining to this situation.

  76. to learn more说道:

    I will immediately seize your rss feed as I can not in finding your e-mail subscription link or e-newsletter service. Do you have any? Please allow me realize so that I may just subscribe. Thanks.

  77. Wow! This could be one particular of the most helpful blogs We ave ever arrive across on this subject. Basically Excellent. I am also an expert in this topic therefore I can understand your effort.

  78. ramsen simmonds incesticide bushell sprinkler brasserie Donelle Dalila gazzara

  79. That is a very good tip especially to those new to the blogosphere. Short but very precise information Thanks for sharing this one. A must read article!

  80. see说道:

    very nice post, i definitely enjoy this fabulous website, persist with it

  81. You made some nice points there. I looked on the internet for the subject and found most people will consent with your website.

  82. buy backlink说道:

    I see in my blog trackers significant traffic coming from facebook. My blog is not connected with facebook, I don at have an account there, and I can at see, who posts the linksany ideas?.

  83. free advertising说道:

    I think you have noted some very interesting points , appreciate it for the post.

  84. more info说道:

    Way cool! Some very valid points! I appreciate you writing this write-up plus the rest of the site is also really good.

  85. You could definitely see your expertise in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always go after your heart.

  86. coolessay review说道:

    It as great that you are getting ideas from this paragraph as well as from our discussion made here.|

  87. Very good info. Lucky me I ran across your site by chance (stumbleupon). I have saved it for later!

  88. Leandro Pinuelas说道:

    There are some interesting points in time in this article but I do not determine if I see every one of them center to heart. You can find some validity but I will take hold opinion until I investigate it further. Excellent write-up , thanks and now we want far more! Added to FeedBurner in addition

  89. link说道:

    Really enjoyed this post.Much thanks again. Awesome.

  90. Just a smiling visitor here to share the love (:, btw outstanding pattern.

  91. ga bo xoi说道:

    This article will help the internet viewers for creating new blog or even a weblog from start to end.|

  92. do vui说道:

    I think this is a real great article.Really thank you! Really Cool.

  93. check here说道:

    Thanks for helping out, superb information.

  94. go there说道:

    Thank you for your article post.Really thank you! Really Cool.

  95. I value the blog post.Much thanks again. Cool.

  96. situs saya说道:

    The quality of our personalized selection of fine Italian made crystal serving selection remain unchallenged.

  97. orlando seo说道:

    Recently, I did not give lots of consideration to leaving feedback on blog web page posts and have positioned comments even considerably less.

  98. Perfect piece of work you have done, this site is really cool with superb info.

  99. genuine parts说道:

    Way cool! Some extremely valid points! I appreciate you writing this post plus the rest of the site is also really good.

  100. Thanks so much for the blog post.Really thank you!

  101. Louis Vuitton Artsy Bag ??????30????????????????5??????????????? | ????????

  102. It as really a great and useful piece of info. I am glad that you simply shared this helpful

  103. This is a very good tip particularly to those new to the blogosphere. Simple but very precise information Thank you for sharing this one. A must read post!

  104. I value you sharing your viewpoint.. So pleased to get identified this article.. Definitely practical outlook, appreciate your expression.. So happy to possess found this submit..

  105. This is a lot better than the Sociable plugin I use on WordPress. Much better!

  106. Never Ignore The significance Of Extras Like Speaker systems

  107. Game Online说道:

    I really liked your blog.Thanks Again. Want more.

  108. Your blogs continually include much of really up to date info. Where do you come up with this? Just stating you are very innovative. Thanks again

  109. Super-Duper website! I am loving it!! Will be back later to read some more. I am bookmarking your feeds also.

  110. Really appreciate you sharing this article.Thanks Again. Awesome.

  111. Wow! Thank you! I continuously needed to write on my website something like that. Can I include a fragment of your post to my blog?

  112. promos说道:

    Between me and my husband we’ve owned more MP3 players over the years than I could count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the previous few years I’ve settled down to 1 distinct players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  113. this website说道:

    Say, you got a nice article post.Really looking forward to read more. Will read on

  114. Really appreciate you sharing this post.Really thank you! Really Great.

  115. What type of digicam is this? That is definitely a great top quality.

  116. in the next Very well written information. It will be valuable to anyone who employess it, including me. Keep doing what you are doing ? for sure i will check out more posts.

  117. click here说道:

    Thanks so much for the article.Much thanks again. Will read on

  118. time here at web, however I know I am getting knowledge all the time by

  119. Nie and informative post, your every post worth atleast something.

  120. Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page

  121. clothing store说道:

    Normally I don at read post on blogs, but I would like to say that this write-up very forced me to take a look at and do so! Your writing style has been amazed me. Thanks, very great post.

  122. check my site说道:

    send this information to him. Pretty sure he all have a very good

  123. Incredible points. Solid arguments. Keep up the great effort.

  124. You should be a part of a contest for one of the best blogs on the net. I am going to highly recommend this website!

  125. It as really a nice and useful piece of info. I am glad that you shared this helpful information with us. Please keep us up to date like this. Thanks for sharing.

  126. Thanks for the article post.Really thank you!

  127. pre it can take place. Google Ads Our sites contain advertising from Google; these use cookies to ensure you get adverts

  128. jimmy说道:

    Major thanks for the article post.Thanks Again. Really Great.

  129. suba me说道:

    1dqJFh Outstanding post, I conceive people should learn a lot from this weblog its real user genial. So much wonderful information on here :D.

  130. weblink I want to start to put all my photos up on my camera, and start a blog or something. Where is a good place to do this like a website or something, do i have to copyright them thanks :).

  131. arcadia realtor说道:

    I really liked your blog article.Really thank you! Want more.

  132. Very informative blog article.Really looking forward to read more. Awesome.

  133. What i discover troublesome is to find a weblog that may capture me for a minute however your blog is different. Bravo.

  134. pretty useful stuff, overall I imagine this is worth a bookmark, thanks

  135. pretty practical material, overall I consider this is worthy of a bookmark, thanks

  136. check out说道:

    It as not that I want to duplicate your web page, but I really like the design and style. Could you let me know which theme are you using? Or was it custom made?

  137. the time to read or visit the material or web pages we have linked to beneath the

  138. bistro masa说道:

    you have got an amazing blog here! would you wish to make some invite posts on my blog?

  139. I was recommended this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are incredible! Thanks!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>