• 我们中的有些人,注定要在日常生活的点滴中去寻找生命的意义。---- 《生活大爆炸》|

HTML中CSS应用介绍(更新中)

前端 admin 1年前 (2018-05-02) 288次浏览 已收录 0个评论

1. 一个div两张图片

body{
    background: url('../images/pic-3.png') no-repeat +400px(位置) +650px(位置),
                url('../images/bgpic.jpg') repeat;
    text-align:center;(居中)
    font-family: PingFangSC-Medium;(字体)
}

2. input框中 获取验证码按钮

效果图: html:

<div class="form-group captcha">
    <input type="text" name="username" placeholder="手机号" class="form-control" id="js-mobile-input">
    <button >获取验证码</button>
</div>
<div class="tips"></div>

css:

.captcha{
    position: relative;
}
.captcha button{
    position: absolute;
    right: 50px;
    top: 18px;
    cursor: pointer;
    border: none;
    font-size: 15px;
    color: #6B4419;
    letter-spacing: 0;
    line-height: 16px;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    background: none;
    z-index: 100;
}

3. 图片上下居中显示

vertical-align:middle;

4. 多行超出隐藏

  1. overflow : hidden;
  2. textoverflow: ellipsis;
  3. display: webkitbox;
  4. webkitlineclamp: 2;(需要显示几行。也可以整体添加高度来实现)
  5. webkitboxorient: vertical;

 

5. 单行超出隐藏

  1. overflow: hidden;
  2. textoverflow: ellipsis;
  3. whitespace: nowrap;

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

<span class="pln">overflow<span class="pun">: hidden;
text-overflow:ellipsis;
white-space: nowrap;</span></span>

 

6. 段落开头空格

  • #adiv p{
  •  text-align:left;
  •  text-indent:2em;
  •  padding-bottom:10px;
  • }

 

7. 手机端 table表格,太长,可左右滑动

在<table></table>外面在套一个div,给这个div添加如下样式: div{ white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;

 

8. 强制换行

1 word-break: break-all; 只对英文起作用,以字母作为换行依据。

2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。

3 white-space: pre-wrap; 只对中文起作用,强制换行。

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于:

1、word-break:break-all
假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。

2、word-wrap:break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。


本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML中CSS应用介绍(更新中)
喜欢 (1)

您必须 登录 才能发表评论!