JAVA、PHP、前端、APP、网站开发 - 开发技术学习

文档标签: css

css保持图片自适就与图片比例.

页面即要保持响应式的结构又要保持图片的某全比例不变,解决方法:html代码:<div class="img-responsive">    <img src="http://d13yacurqjgara.cloudfront.net/users/14765/screenshots/1392915/mrbc-badge-....png"    /></div>css代码:.img-responsive {    max-width: 100%;    height: 0;    padding-bottom: 60%;    background-color:#ff0000;    overflow: hidden;}.img-responsive img {    width: 100%;}http://jsfid...
此文被围观2769次  分类: 前端设计 标签:  ···

CSS修改HTML5 input placeholder颜色.

css改placeholder颜色方法:toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。 WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素::-webkit-input-placeholderMozilla Firefox 4-18使用伪类:-moz-placeholderMozilla Firefox 19+ 使用伪元素::-moz-placeholderIE10使用伪类:-ms-input-placeholderIE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。CSS选择器 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。::-webkit-input-placeholder { /* WebKit browsers */  &n...
此文被围观3994次  分类: 前端设计 标签:  ···

css判断ipone4/4s,iphone 5.

‍‍@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容/4s */ .class{} } @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ .class{} }‍‍...
此文被围观3551次  分类: 前端设计 标签:  ···

css 边框滚动条样式修改.

定义div滚动条的样式:.content-box {height: 222px; overflow-y: scroll; overflow-x: hidden;SCROLLBAR-FACE-COLOR: #888; SCROLLBAR-SHADOW-COLOR: #eee; SCROLLBAR-HIGHLIGHT-COLOR: #eee; SCROLLBAR-3DLIGHT-COLOR: #eee; SCROLLBAR-DARKSHADOW-COLOR: #eee; SCROLLBAR-TRACK-COLOR: #eee; SCROLLBAR-ARROW-COLOR: #eee;} /***chrome模式***/ .content-box::-webkit-scrollbar {     width:&...
此文被围观2834次  分类: 前端设计 标签:  ·····

css自定义字体.

css自定义字体 @font-face {      font-family: 'msyh';      src: '/font/msyh.ttf' } body {font-family: msyh,Arial} css自定义字体 ...
此文被围观3441次  分类: 前端设计 标签:  ····

css自适应,LI表格宽度自适应,自动替换标题过长用省略号代替.

css自适应,LI表格宽度自适应,自动替换省略号 LI 表格 宽度自适应 自动替换省略号 实用对象:文章标题排序的时候 在文章列表中因为网页宽度的限制,有些长标题文章可能无法完全显示,有用程序截取,那样对seo好像不是很理想。 这里讲解一下用CSS来解决li表格宽度自适应 请看源码: 注意css:text-overflow: ellipsis; [php] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <html class="no-js" lang="en"> <head><style> .table { width: 100%; ...

用css代码去掉点击图片和链接讨厌的虚线框.

用css代码去掉点击图片和链接讨厌的虚线框 在IE下,点击后会出现一个虚线框,很是讨厌, 在Firefox(以下简称FF)里可以用-moz-outline:none; 或者outline:none;来将其去掉 如: a:focus{ -moz-outline:none; outline:none; } 顺便插一句,用过Safari和Chrome的肯定记得,在鼠标移动到输入框上时会出现阴影效果。 如果不想要这个效果,也可以用outline属性来实现: input{ outline:none; }  言归正传,刚才说了这么多,还没说到在IE下如何实现。 遗憾的是没有找到通过css去掉IE链接虚线框的办法,不过在IE里,a标签有个独有的属性,就是hidefocus: <a href="#" hidefocus="true">我是一个链接</a> 对应的JS应该是:xxx.hideFocus="true";  还有一种暴力的方法,就是让它获得焦点的时候,同时让它失去焦点,不过个人还是不推荐这种方...
此文被围观2437次  分类: 前端设计 标签:  ·········

前端知识,FACEBOOK的面试题?css display:block与display:inline的区别.

前端知识:FACEBOOK的面试题?css display:block与display:inline的区别 浏览器支持 所有主流浏览器都支持 display 属性。 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 可能的值 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CS...

[经典推介]CSS框架开发向导——定制你自己的CSS框架.

不少CSS框架已经存在了一段时间,但大多数Web开发人员避免使用它们。 相反最有经验的开发者希望创建自己的CSS框架,提供个性化解决方案的优势,并减少对第三方的解决方案消极方面的依赖。虽然CSS框架,目的是加快网络开发,但是开发自己的全面的CSS框架,可能需要大量时间和精力。 本文将提供指导和精心挑选的资源,以协助你完成这一心愿。开始之前首先尝试一些流行的CSS框架或者至少去看看他们提供的文件:•Blueprint•Yet Another Multicolumn Layout (YAML)•YUI Grids CSS Foundation•960 Grid System您可能还需要检查CSS框架的权威清单。为什么要建立自己的CSS框架?在现代的网页设计中CSS起着至关重要的作用,它是真的不是很难学。没有理由不去寻求一个捷径完成这个似乎一劳永逸的事情。这里有一些具体原因/优点:更有成效:您将能够使用自己更有效的框架。更好的设计兼容性:您的设计将不依赖于如何制定一个框架,框架将自动支持你的设计的喜好。更少的头痛的事:你会不会继承错误或由其他人创建的缺...
此文被围观2366次  分类: 前端设计 标签:  ·····

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号