码迷,mamicode.com
首页 > 其他好文 > 详细

文本、背景、列表、换图

时间:2016-03-16 21:02:46      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:

word-spacing:单词之间的距离; letter-spacing:自负之间的距离;  white-space:no-wrap;同一行显示所有文本|pre保留所有的空格换行符;

 

垂直对齐方式:vertical-align:top、middle、bottom【处理两个元素(文本与图片)对齐时同时使用】

text-transform:字母大小写转换uppercase;lowercase;capitalize第一个字母大写;

text-shadow:水平值 垂直值 模糊半径 颜色;

background-attachment:fixed/scroll背景图片是否滚动;

background:颜色 背景图片 是否平铺 背景图片是否滚动 位置;

list-style-position:inside、outside项目符号在li里面还是外面

outline:1px solid red;也可以定义元素的边框,但是outline设置的像素值已经包含在元素的width值里面

 

换图

1、利用行高【将a标签里面显示的文字给挤出去】

  <h1 style="height:30px;line-height:150px;overflow:hidden;background:url(logo.png);">

    <a href="#" style="display:block;width:154px;height:30px;"></a>  

  </h1>

2、文本缩进

 

<h1 style="text-indent:-200px;overflow:hidden;background:url(logo.png);">

 

   <a href="#" style="display:block;width:154px;height:30px;"></a>  

 

</h1>

3、文字透明

4、定位【但是北京图片不能为png格式,否则会将span下面h1里面的文字给显示出来;当图片出现问题时,h1里面的文字会显示出来】

 <a href="#">

  <h1 style="position:relative;">

    <span style="position:absolute;height:30px;width:145px;background:url(logo.jpg);"></span>豆瓣

</h1>

</a>

 

文本、背景、列表、换图

标签:

原文地址:http://www.cnblogs.com/duanjiujiu/p/5284982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!