常用实例

常用实例

一、五环居中

<div class="plat">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
</div>

*{
    margin:0;
    padding: 0;
}
.plat{
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -190px;
    margin-top: -93px;/*水平垂直居中*/
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
    position: absolute;
    width: 100px;
    height:100px;
    border: 10px solid black;
    border-radius: 50%;
}
.circle1{
    border-color: red;
    top: 0;
    left: 0;
}
.circle2{
    border-color: green;
    top: 0;
    left: 130px;
    z-index: 3;/*绿环在上面*/
}
.circle3{
    border-color: yellow;
    top: 0;
    left: 260px;
}
.circle4{
    border-color: blue;
    top:70px;
    left:65px ;
}
.circle5{
    border-color: purple;
    top: 70px;
    left: 195px;
}

 

 

二、两栏布局

 

 

<div class="layout">
    <div class="right"></div>
    <div class="left"></div>
</div>

.right{
    position: absolute;/*脱离原来位置，让黑块上来*/
    background-color: pink;
    width: 100px;
    height: 100px;
    right:0;/*首先将粉色区域定位到最右边*/
}
.left{
    background-color: black;
    height: 100px;
    margin-right:100px;/*然后让黑色区域让出来这段距离*/
}margin-right:100px;/*然后让黑色区域让出来这段距离*/
}

二———（1）

 

    <div class="right"></div>
    <div class="left1"></div>
    <div class="left2"></div>

body{
            width:50%;
            height:400px;
        }
        .right{
            width:50%;
            height:50%;
            float: right;
            background-color: #f00;
        }
        .left1{
            background-color: #0f0;
            width:50%;
            height: 25%;
            opacity: 0.5;
            float: left;
        }
        .left2{
            background-color: #0000ff;
            width:50%;
            height: 25%;
            float: left;
        }

三、文字溢出

1、单行文本溢出省略处理

<p>日本政府想改善中日关系？中方:好 我们注意到了日本政府想改善中日关系？中方:好 我们注意到了日本政府想改善中日关系？中方:好 我们注意到了</p>

*{
    padding:0;
    margin: 0;
}
p{
    width: 300px;
    height:30px;
    line-height: 30px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;/*强制性不换行*/
    text-overflow: ellipsis;/*这三句话可以让溢出的文本用省略号表示，仅限于单行文本*/
}overflow: hidden;
    white-space: nowrap;/*强制性不换行*/
    text-overflow: ellipsis;/*这三句话可以让溢出的文本用省略号表示，仅限于单行文本*/
}

2、多行文本溢出处理

<p>日本政府想改善中日关系？中方:好 我们注意到了日本政府想改善中日关系？中方:好 我们注意到了日本政府想改善中日关系？
</p>

*{
    padding:0;
    margin: 0;
}
p{
    width: 300px;
    height:30px;
    line-height: 15px;/*height 的一半，框中放两行，用于多行文本*/
    border: 1px solid black;      overflow:hidden;
}

四、背景图片处理

浏览器有一个默认机制，当网速很慢或受限制时，不加载css,js，只有html,放在css里的背景图片出不来，但功能要正常运行

 

如本例中，图片不加载时会出现淘宝网链接，正常时链接要隐藏

 

方法一：

 

 

<a href="http://www.taobao.com" target="_blank" >淘宝网
 
 </a>

 

a{
    display: inline-block;
    width: 200px;
    height:100px;
    color: #424242;
    text-decoration: none;
    background-image: url("https://img.alicdn.com/tfs/TB1njLZn26H8KJjy0FjXXaXepXa-190-140.gif");
    background-size: 200px 100px;
    border: 1px solid black;
    text-indent: 200px;/*缩进*/
    white-space: nowrap;/*强制性不换行*/
    overflow: hidden;  }正常是

 

 

正常时

 

 

 

当css不加载时，即去掉css

 

 

 

 

方法二：淘宝网做法，注意：容器高度为0

 

css:

 

a{
    display: inline-block;
    width: 200px;
    height:0;
    color: #424242;
    text-decoration: none;
    background-image: url("https://img.alicdn.com/tfs/TB1njLZn26H8KJjy0FjXXaXepXa-190-140.gif");
    background-size: 200px 100px;
    border: 1px solid black;
    padding-top: 100px;/*padding里可以放背景但不能写内容，背景图片可以放在里面，自然把文字怼到了下面*/
    overflow: hidden;
}height:0;
    color: #424242;
    text-decoration: none;
    background-image: url("https://img.alicdn.com/tfs/TB1njLZn26H8KJjy0FjXXaXepXa-190-140.gif");
    background-size: 200px 100px;
    border: 1px solid black;
    padding-top: 100px;/*padding里可以放背景但不能写内容，背景图片可以放在里面，自然把文字怼到了下面*/
    overflow: hidden;
}

 

最终呈现效果与方法一 一样