zoukankan      html  css  js  c++  java
  • 小技巧贴士(二)

    1.background-size:cover等比例缩放占满容器,图片不一定完整

              contain图片完整不一定占满容器。

    2.html5新增语义化结构标签

      header  footer section nav artical aside detail summarry dialog

    3.contanteditable规定元素是否可编辑

      <p contenteditable="true">11</p>

    4.transform

    -webkit-transform: rotate(15deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px, -2px);
    -webkit-transform-origin: 0 5px;

    5. <legend>用户登录</legend>

    6.超出部分用省略号

    css:

      white-space: nowrap;  

      overflow: hidden;

      text-overflow: ellipsis;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新闻</title>
        <style>
    
            *{padding:0px; margin:0px;}
            dl{
                width: 240px;
                border:solid 1px #ccc;
            }
            dt{
                padding:8px 8px;
                background: #7fecad url(images/green.gif) repeat-x;
                font-size:13px;
                text-align: left;
                font-weight: bold;
                color:#71790c;
                border-bottom: solid 1px #efefef;
    
            }
            dd{
                font-size: 0.78px;
                height:1.5em;
                width: 220px;
                padding:2px 2px 2px 18px;
                background: url(images/icon.gif) no-repeat left 25%;
                margin:2px 0;
                /*margin-top: 2px;*/
                white-space: nowrap;
                overflow: hidden;a
                text-overflow: ellipsis;
            }
        </style>
    </head> 
    <body>
        <dl>
            <dt>收藏新闻</dt>
            <dd>钱币|5盘司彩银虎币价值几何 三联豹子钞币市值达千元</dd>
            <dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd>
            <dd>藏界|地产商谈收藏;跟拿地异曲同工 拾垃圾的老外</dd>
            <dd>逸闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd>
        </dl>
    </body>
    </html>
    View Code

    效果图:

     7.设置字体:

      1.  text-indent: 2em;段落的开始空格
      2.  line-height: 2em;行高
      3.  font-family: "楷体"; 
      4. margin-bottom: 4em;
  • 相关阅读:
    排序
    wine-qq 安装
    逆元模板
    最长上升子序列
    SGU[115] Calendar
    SGU[123] The sum
    SGU[105] Div 3
    SGU[102] Coprimes
    SGU[100] A+B
    poj-1325-Machine Schedule
  • 原文地址:https://www.cnblogs.com/gvip-cyl/p/6505658.html
Copyright © 2011-2022 走看看