css 右上角应用

浏览数：25 / 时间：2015年06月09日

.hot_play
{
    position: relative;
    float:left;
}
.hot_play ul
{
    float: left;
}
.hot_play li
{
    float: left;
    position: relative;
    width: 95px;
    height: 20px;
    margin: 4px 19px 16px 10;
    padding: 20px 10px 10px 10px;
    overflow: hidden;
}
.hot_play a img
{
    width: 86px;
    height: 120px;
    padding: 2px;
    border: 1px solid #cfcfcf;
}
.hot_play a:hover img
{
    border-color: #8ECFF9;
}
.hot_play span
{
    display: block;
    width: 35px;
    height: 34px;
    position: absolute;
    left: 70px;
    top: 6px;
}
.a1 span
{
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    left: 60px;
    top: -20px;
    text-align: center;
    color: #fff;
    line-height: 45px;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 700;
}
.hot_play span.back
{
    background: url( "http://s0.husor.cn/image/index/icons1.png" ) no-repeat -20px -246px;
}
.top
{
    background: url( "http://s0.husor.cn/image/index/icons1.png" ) no-repeat -246px -6px;
}
.a1
{
    width: 100px;
    height: 100px;
    display: block;
    position: relative;
    float: left;
    margin:10px 10px 10px 10px;
}
.a1 img
{
    width: 100%;
    height: 100%;
    border: 0px;
}

.top_div
{
 position:relative;
 float:left;
 padding:20px 20px 20px 20px;
    }

html 代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link href="css/StyleSheet2.css" type="text/css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="hot_play">
            <ul>
                <li><a href="/">我的微商</a> <span class="back"></span></li>
            </ul>
        </div>
        <div class="top_div">
            <a class="a1" href="">
                <img src="http://img14.360buyimg.com/n4/jfs/t703/135/212301262/103348/b19c3937/5494198bN8357a1c5.jpg" /><span
                    class="top">1</span></a> <a class="a1" href="">
                        <img src="http://img14.360buyimg.com/n4/jfs/t703/135/212301262/103348/b19c3937/5494198bN8357a1c5.jpg" /><span
                            class="top">2</span></a> <a class="a1" href="">
                                <img src="http://img14.360buyimg.com/n4/jfs/t703/135/212301262/103348/b19c3937/5494198bN8357a1c5.jpg" /><span
                                    class="top">3</span></a> <a class="a1" href="">
                                        <img src="http://img14.360buyimg.com/n4/jfs/t703/135/212301262/103348/b19c3937/5494198bN8357a1c5.jpg" /><span
                                            class="top">4</span></a> <a class="a1" href="">
                                                <img src="http://img14.360buyimg.com/n4/jfs/t703/135/212301262/103348/b19c3937/5494198bN8357a1c5.jpg" /><span
                                                    class="top">5</span></a> <a class="a1" href="">
                                                        <img src="http://img14.360buyimg.com/n4/jfs/t703/135/212301262/103348/b19c3937/5494198bN8357a1c5.jpg" /><span
                                                            class="top">6</span></a>
        </div>
    </div>
    </form>
</body>
</html>