首页 > Web开发 > 详细

css较深层学习,高级常用用法

时间:2017-04-06 12:27:59      阅读:210      评论:0      收藏:0      [点我收藏+]

div设置隐藏:

      visibility:hidden/visible(始终占位);

      display:none/block(不占位);

 

设置字体垂直居中:

      常用line-height,不是所有的垂直居中都可以用line-height,常用垂直居中vertical-align;

      line-height通过行高来设置垂直居中,vertical-align则有多种垂直方式,常用垂直居中vertical-align: middle;

 

自带响应式布局,bootstrap的栅格参数:

     <script type="text/javascript" src="bootstrap.min.js"></script>

      <link rel="stylesheet" href="bootstrap.min.css" type="text/css">     

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

html网页制作常用:div ul dl a span img form(包括一些form标签:input button) h5 i(字体图标)

常用logo可点<a>标签设置背景图,<a>首页</a>里面有字体不显示只显示图片并可点,设置属性text-indent:-999px;

text-overflow: clip|ellipsis|string;
clip      修剪文本。
ellipsis   显示省略符号来代表被修剪的文本。
string    使用给定的字符串来代表被修剪的文本。

例如:style=‘width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;‘超过长度200px的部分显示省略号

 

css较深层学习,高级常用用法

原文:http://www.cnblogs.com/instelly/p/instelly_css_01.html

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