zoukankan      html  css  js  c++  java
  • css 右上角应用

    .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>
  • 相关阅读:
    微信小程序之登录页实例
    微信小程序之购物车
    微信小程序之加载更多(分页加载)实例
    微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
    微信小程序--实现图片上传
    关于JavaScriptInterface的一系列问题
    关于websocket,JS客户端和java服务端的林林总总。
    关于JS接高德地图API,以及坐标偏移坐标转换
    Butter Knife:8.0.1的完整正确导入步骤
    android:讲述一下我的第三方支付之路(微信和支付宝)
  • 原文地址:https://www.cnblogs.com/engine/p/4299371.html
Copyright © 2011-2022 走看看