牛腩新闻发布系统（4）——可变宽度的圆角框制作

最新推荐文章于 2017-07-11 20:08:36 发布

Reka

最新推荐文章于 2017-07-11 20:08:36 发布

阅读量1.2k

点赞数

分类专栏：我的成长路の计算机 ----------【B/S】牛腩新闻发布系统文章标签： css 发布新闻

本文链接：https://blog.csdn.net/helijie92902/article/details/46852905

版权

我的成长路の计算机同时被 3 个专栏收录

138 篇文章 1 订阅

订阅专栏

----------【B/S】

27 篇文章 0 订阅

订阅专栏

牛腩新闻发布系统

7 篇文章 1 订阅

订阅专栏

背景：大家在牛腩新闻发布系统的视频中学习了两遍圆角框的制作，一个是带边框的圆角框，一个是可变宽度的圆角框，两者都使用了平铺的效果，前者使用三张切分出来的图片（分别是：round1_top，round1_bottom，round1_middle），后者使用五张切分出来的图片（分别是：round2_left_top，round2_left_bottom，round2_right_top，round2_right_middle，round2_right_bottom）。下面重点介绍一下后者——可变宽度的圆角框制作。

一、材料准备

切分出的五张图片：round2_left_top.gif(左上部分)

round2_left_bottom.gif（左下部分）

round2_right_top.gif（右上部分）

round2_right_middle.gif（右边中间部分）

round2_right_bottom.gif（右下部分）

二、代码调试（类别管理）

1、manager-common.css

/*
 * 作者：何丽杰
 * 小组：个人版
 * 说明：类别表公共属性
 * 创建日期：2015-07-14
 * 版本号：V1.0.0
 */
* {
    margin:0;
    padding:0;
}
body {
    font-size:14px;
}
/*管理中心栏目样式*/
#m_category {
    width:200px;
    margin-right:10px;
    float:left;
}
#m_category .con {
    height:300px;
}
#m_category .con p{
    margin:20px 50px;
}
/*类别管理样式*/
#camanager {
    width:610px;
    float:left;
}
#addca {
    width:610px;
    float:left;
}
/*可变宽度的圆角框样式*/
.round2 {
    background-image:url("../images/round2_left_top.gif");
    background-position:top left;
    background-repeat:no-repeat ;
}
.round2 h3 {
    background:url("../images/round2_right_top.gif") no-repeat top right;
    padding-left:35px;
    padding-top:12px;
    padding-bottom:30px;
    font-size:16px;
    font-weight:bold;
}
.round2 .con {
    background:url("../images/round2_right_middle.gif") repeat-y top right;
    margin-top:-2em;  /*解决ie系列的空隙问题*/
    padding:10px 20px;
}
.round2 .footer {
    background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p {
    background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}

/*类别管理表格样式*/
.m_table {
    border-collapse:collapse ;
    margin:0 auto;
    width:350px;
    text-align:center;
}
.m_table th, .m_table td {
    border:1px solid  #CECFCE;
    padding:5px;
}
.m_table .xuhao {
    width:60px;
}
.m_table .del {
    width:50px;
}

2、categorymanager.aspx

<%@ Page Title="类别管理-牛腩新闻发布系统" Language="C#" MasterPageFile="~/<span style="color:#ff0000;">common.master</span>" AutoEventWireup="true" CodeFile="categorymanager.aspx.cs" Inherits="categorymanager" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="css/manager_common.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="m_category" class="round2">
        <h3>管理中心</h3>
        <div class="con">
            <p><a href="categorymanager.aspx" >类别管理</a></p>
            <p><a href="newsmanager.aspx" >新闻管理</a></p>
            <p><a href="addnews.aspx" >添加新闻</a></p>
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </div>
     <div id="camanager" class="round2">
        <h3>类别管理</h3>
        <div class="con">
            <table class="m_table">
                <tr>
                    <th class="xuhao">id</th>
                    <th>类别名称</th>
                    <th class="del">删除</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>体育新闻</td>
                    <td><a href="#"></a>删除</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>体育新闻</td>
                    <td><a href="#"></a>删除</td>
                </tr>
            </table>
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </div>
     <div id="addca" class="round2">
        <h3>添加类别</h3>
        <div class="con">
            请输入类别名称：<asp:TextBox ID="txtCaname" runat="server"></asp:TextBox>
            <asp:Button ID="btnAdd" runat="server" Text="添加类别" />
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </div>
</asp:Content>

注：common.master是模版

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="common.master.cs" Inherits="common" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页-牛腩新闻发布系统</title>
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="top">
        <img src="images/福牛乐乐.jpg" width="170" />
        <a href="Default.aspx" target="blank"><img src="images/牛腩新闻发布系统logo.jpg" width="650"/></a>
    </div>
    <div id="search">
        搜索条件：
        <asp:RadioButton ID="radTitle" GroupName="cond" runat="server" Text="标题" Checked="true" />
        <asp:RadioButton ID="radContent" GroupName="cond" runat="server" Text="内容" />
        <asp:TextBox ID="txtKey" runat="server" CssClass="txtKey" ></asp:TextBox>
        <asp:ImageButton ID="ibtnSearch" imageUrl="~/images/搜索按钮.jpg" runat="server" />    
    </div>
    <div id="main">
         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">     
        </asp:ContentPlaceHolder>     
    </div>
    <div id="footer">
    版权所有 &copy; 何丽杰&<a href="http://helijie92902.blog.163.com/" target="blank">网易</a>&<a href="http://blog.csdn.net/helijie92902" target="_blank">CSDN
    </a></div>
       
    
    </form>
</body>
</html>

三、效果图