您的位置：首页 > 其它

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

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

一、材料准备

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

[b]                     round2_left_bottom.gif（左下部分）[/b]

[b]                     round2_right_top.gif（右上部分）[/b]

[b]                     round2_right_middle.gif[/b]（右边中间部分）

[b]                     round2_right_bottom.gif[/b]（右下部分）





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

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">
版权所有 © 何丽杰&<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>

三、效果图






四、学习心得

    虽然看着东西不多，但是你能记住吗？才过去两天，我的大脑内这部分内容都已经忘记的差不多了，现在拾起来有点困难！整理一下是很有必要的，既能让自己又复习一遍，加深印象，又能理清思路，更好的编结知识网，从而方便管理自己的知识，这么好的事，我们何乐而不为呢？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航