分类目录归档:CSS

SyntaxHighlighter Evolved支持哪些高亮语言

SyntaxHighlighter Evolved这个插件很好用,但是就是有时候不知道自己的代码它支不支持,百度和官网都找不到具体的说明,不过在后台插件编辑中看到这些代码,那我就放心使用了!


$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
'as3' => 'as3',
'actionscript3' => 'as3',
'bash' => 'bash',
'shell' => 'bash',
'coldfusion' => 'coldfusion',
'cf' => 'coldfusion',
'clojure' => 'clojure',
'clj' => 'clojure',
'cpp' => 'cpp',
'c' => 'cpp',
'c-sharp' => 'csharp',
'csharp' => 'csharp',
'css' => 'css',
'delphi' => 'delphi',
'pas' => 'delphi',
'pascal' => 'delphi',
'diff' => 'diff',
'patch' => 'diff',
'erl' => 'erlang',
'erlang' => 'erlang',
'fsharp' => 'fsharp',
'groovy' => 'groovy',
'java' => 'java',
'jfx' => 'javafx',
'javafx' => 'javafx',
'js' => 'jscript',
'jscript' => 'jscript',
'javascript' => 'jscript',
'latex' => 'latex', // Not used as a shortcode
'tex' => 'latex',
'matlab' => 'matlabkey',
'objc' => 'objc',
'obj-c' => 'objc',
'perl' => 'perl',
'pl' => 'perl',
'php' => 'php',
'plain' => 'plain',
'text' => 'plain',
'ps' => 'powershell',
'powershell' => 'powershell',
'py' => 'python',
'python' => 'python',
'r' => 'r', // Not used as a shortcode
'splus' => 'r',
'rails' => 'ruby',
'rb' => 'ruby',
'ror' => 'ruby',
'ruby' => 'ruby',
'scala' => 'scala',
'sql' => 'sql',
'vb' => 'vb',
'vbnet' => 'vb',
'xml' => 'xml',
'xhtml' => 'xml',
'xslt' => 'xml',
'html' => 'xml',
) );

测试

这里写你的代码

CSS 改变边框方法

.category-picture img{
 background-color: hsl(0, 0%, 100%);
 border: 1px solid hsl(0, 0%, 66%);
 display: block;
 margin: 4px 0 4px 4px;
 padding: 4px;
 position: relative;
 height: auto;
 width: 120px;
 }

 

.category-picture img:hover{
background-color:#FF9797;
}

利用padding使图片区域留出空格,然后通过background-color改变颜色
案例地址:http://qulehe.com/picture/beauty-t036.html

以百分比设置图片宽度(高度)

1、使用目的

现在很多朋友都使用手机等手持设备访问网站,那么对网站在各种分辨率下的显示效果就有了比较高的要求,本博客使用的主题是大前端的D7 主题,其对手持客户端的支持是非常好的。只是我在发表一些文章并插图的时候,其图片固定了宽度(高度)后在这些设备上的显示就比较难看了。

2、实现方法(代码)

当然,爱折腾的我就开始寻找解决方法!我的做法就是将图片的宽度(高度)以百分比来进行设置,这样就可以很好的支持各分辨率的浏览器了!这里是代码的DEMO

 

      美女套图-美臀欣赏

块元素&内联元素

块对象默认宽度是100%(继承自父元素),如果没有采用“float:left/right;”样式,相邻的两个块对象就会分排在不同的两行上。

内联对象的宽度取决于其内部元素的宽度与padding样式值之和,不可直接指定其宽度与高度(“display:block;”、“float:left/right;”强行转换后可以定义),相邻的两个内联对象会排在同一行上。