文字排版效果

Posted on 2015-04-07 16:30  小蕊同学  阅读(167)  评论(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>

 

Copyright © 2024 小蕊同学
Powered by .NET 8.0 on Kubernetes