首页 > 其他 > 详细

文字排版效果

时间:2015-04-07 17:26:04      阅读:258      评论:0      收藏:0      [点我收藏+]

text-show:2px 2px 5px gray;   文字阴影显示

letter-spacing:1px;  文字间距1px;

padding:10px;    内边距10px;

-webkit-columns:atuo 3;     文字分为三排

-webkit-column-gap:30px;   间空隙30px;

-webkit-column-rule:1px dashed gray;     排间加虚线

border-radius:10px;   边框添加圆弧为css3新技术

width:80%  可以占屏幕的百分之八十

margin:0 atuo;   居中

background-image:-webkit-linear-gradient(#eee,#fff);   背景为渐变色

background-repeat:no repeat; 背景不平铺

如下为文字排版案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
    text-align: center;
    background-image: -webkit-linear-gradient(#eee, #fff);
    background-repeat: no-repeat;
}
.myc {
    border: 1px solid #B8B8B8;
    letter-spacing: 1px;
    line-height: 30px;
    padding: 10px;
    -webkit-columns: auto 3;
    -webkit-column-rule: 1px dashed gray;
    -webkit-column-gap: 30px;
    text-indent: 26px;
    font-size: 12px;
    border-radius: 15px;
    width: 80%;
    margin: 0 auto;
}
.myt {
    letter-spacing: 50px;
    font-size: 35px;
    text-shadow: 2px 2px 5px gray;
}
</style>
</head>

<body>
<h1 class="myt">公司简介</h1>
<p class="myc"> 否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿
  斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬
  阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂否阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬发送到发斯蒂芬。 </p>
</body>
</html>

 

文字排版效果

原文:http://www.cnblogs.com/lsr111/p/4398655.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!