zoukankan      html  css  js  c++  java
  • 可变宽度的圆角框

    以前在看牛腩做圆角框时感觉好神奇,但一直没有实现,最近自己做了个网上鲜花销售系统,自叹后台界面做得太难看,所有决定做个可变宽度的圆角框,在谷歌浏览器修改了好久,后来才发现时margin-top 和margin-bottom 要设置为0。。。。下面这图是做好的了:

    前台代码:

    代码
    <div id="Menu"class="round2">
    <h3>
    常用操作
    </h3>
    <div class="con">
    <p><a href="warekind.aspx" target="main">鲜花分类</a></p>
    <p><a href="#">站内信息管理</a></p>
    <p><a href="Goodsfangshi.aspx" target="main">付款及送货方式</a>

    <p><a href="CreateAdmin.aspx" target="main">用户管理</a></p>
    <p><a href="showware.aspx" target="main">鲜花添加</a></p>
    <p><a href="wareguanli.aspx" target="main">鲜花管理</a></p>
    <p><a href="../Default.aspx" target="main">访问主页</a></p>
    </div>
    <div class="footer">
    <p>
    &nbsp;</p>
    </div>
    </div>

    css代码:

    代码
    /************做个圆角*************/
    .round2
    {
    background
    -image: url(../images/round2_left_top.gif);
    background
    -repeat: no-repeat;
    background
    -position: top left;
    }
    .round2 h3
    {
    background
    -image: url(../images/round2_right_top.gif);
    background
    -repeat: no-repeat;
    background
    -position: top right;
    padding
    -top: 10px;
    padding
    -left: 38px;
    margin
    -bottom: 0px;
    margin
    -top: 0px;
    }
    .con
    {
    background
    -image: url(../images/round2_right_middle.gif);
    background
    -position: top right;
    background
    -repeat: repeat-y;
    padding: 20px;
    margin
    -bottom: 0px;
    margin
    -top: 0px;
    padding
    -left: 40px;
    font
    -size: 14px;
    }

    .con a
    {
    color: Black;
    }
    .footer
    {
    background
    -image: url(../images/round2_left_bottom.gif);
    background
    -repeat: no-repeat;
    background
    -position: bottom left;
    }
    .footer p
    {
    background
    -image: url(../images/round2_right_bottom.gif);
    background
    -position: bottom right;
    background
    -repeat: no-repeat;
    margin
    -top: 0px;
    margin
    -bottom: 0px;
    }
    #Menu
    {
    float: left;
    }
    #Menu .con
    {
    }
  • 相关阅读:
    aws-lambda之异步实现文件的下载上传
    aws实例部署flask报错script-timed-out-before-returning-headers-application-py
    aws上部署scrapy,出现 Out of Memory,内存溢出
    在线UserAgent,爬虫UA
    ubuntu10.24 下安装 unixODBC coreseek4.1 手记
    ubuntu12.04 安装 python2.6
    coreseek/sphinx CentOS6.4下安装
    Elasticsearch 6.2.3 崩溃经历
    (转)梳理在线教育的几大金矿
    kangaroo-open 开源在线公开课平台
  • 原文地址:https://www.cnblogs.com/huaizuo/p/1909545.html
Copyright © 2011-2022 走看看