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

来源：互联网发布：手机淘宝扫一扫编辑：程序博客网时间：2024/04/30 07:11

背景：大家在牛腩新闻发布系统的视频中学习了两遍圆角框的制作，一个是带边框的圆角框，一个是可变宽度的圆角框，两者都使用了平铺的效果，前者使用三张切分出来的图片（分别是：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>

三、效果图

四、学习心得

虽然看着东西不多，但是你能记住吗？才过去两天，我的大脑内这部分内容都已经忘记的差不多了，现在拾起来有点困难！整理一下是很有必要的，既能让自己又复习一遍，加深印象，又能理清思路，更好的编结知识网，从而方便管理自己的知识，这么好的事，我们何乐而不为呢？

0 0