标签归档:CSS

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;”强行转换后可以定义),相邻的两个内联对象会排在同一行上。