GridView用CSS设定样式

GridView是很便利的数据控件，在MIS中的应用很广泛，其样式编写很简单，但是每次新增都要重新编写，工作很是烦琐，而且由于其本身的特性，样式并不好编写，最好的办法就是在单双行、Header、Pager、Footer等栏目引用单独的样式，如下：

<asp:GridView ID="grvAdUserInfo" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" AllowPaging="True"PageSize="12" HorizontalAlign="Center" CssClass="GridView" OnPageIndexChanging="grvAdUserInfo_PageIndexChanging"><Columns><asp:BoundField DataField="EMPLOYEEID" HeaderText="工號" /><asp:BoundField DataField="TRUENAME" HeaderText="姓名" /></Columns><EmptyDataTemplate><span style="text-align: center; font-size: larger; font-weight: bolder; color: Blue;">抱歉，暫時沒有數據！</span></EmptyDataTemplate><AlternatingRowStyle CssClass="GridView_Row_Alter" /><PagerStyle CssClass="GridView_Pager" /><HeaderStyle CssClass="GridView_Header" /><RowStyle CssClass="GridView_Row" /><SelectedRowStyle CssClass="GridView_Row_Select" /></asp:GridView>

各样式如下：

/*****************GridView 樣式*******************//************GridView頁碼樣式************/
.GridView_Pager {background-color: #507CD1;font-weight: bold;color: white;height: 35px;font-size: 14px;
}.GridView_Pager td a:hover {width: 20px;color: white;padding-left: 4px;padding-right: 4px;}.GridView_Pager td a:active {width: 20px;color: white;padding-left: 4px;padding-right: 4px;}.GridView_Pager td a:link {width: 20px;color: white;padding-left: 4px;padding-right: 4px;}.GridView_Pager td a:visited {width: 20px;color: white;padding-left: 4px;padding-right: 4px;}.GridView_Pager td span {font-weight: bold;font-size: 15px;width: 20px;color: red;padding-left: 4px;padding-right: 4px;}/******GridView標題欄樣式********/
.GridView_Header {color: white;background-color: #507CD1;height: 35px;font-size: 14px;font-weight: bold;
}/**********GridView主樣式*************/
.GridView_Main {border-color: white;width: 100%;
}/************GridView RowStyle************/
.GridView_Row {background-color: #EFF3FB;height: 25px;text-align: center;color: #333333;
}.GridView_Row_Alter {background-color: white;height: 25px;text-align: center;color: #333333;
}.GridView_Row_Select {background-color: #D1DDF1;color: #333333;font-weight: bold;
}

这是我现在使用的方法，对样式的设置只需引用，还是很方便的。但是我是一个不断追寻轻松的懒人，能不能只在GridView开头引用样式就一劳永逸呢？由于GridView实质上在HTML的表现为一个table，所以其实可以通过写table样式来对其进行设置，如下：

<asp:GridView ID="grvAdUserInfo" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" AllowPaging="True"PageSize="12" HorizontalAlign="Center" CssClass="GridView" OnPageIndexChanging="grvAdUserInfo_PageIndexChanging"><Columns><asp:BoundField DataField="EMPLOYEEID" HeaderText="工號" /><asp:BoundField DataField="TRUENAME" HeaderText="姓名" /></Columns><EmptyDataTemplate><span style="text-align: center; font-size: larger; font-weight: bolder; color: Blue;">抱歉，暫時沒有數據！</span></EmptyDataTemplate></asp:GridView>

样式文件如下：

/*****以下GridView的樣式目前還未完成，處於測試階段*********/
.GridView {width: 100%;
}.GridView th {color: white;background-color: #507CD1;height: 35px;font-size: 14px;font-weight: bold;}.GridView tr {background-color: #EFF3FB;height: 25px;text-align: center;}.GridView tr td {text-align: center;}.GridView td table {background-color: #507CD1;text-align: center;}.GridView td table td {text-align: center;}.GridView td table td A:hover {width: 20px;color: black;padding-left: 4px;padding-right: 4px;}.GridView td table td A:active {width: 20px;color: black;padding-left: 4px;padding-right: 4px;}.GridView td table td A:link {width: 20px;color: black;padding-left: 4px;padding-right: 4px;}.GridView td table td A:visited {width: 20px;color: black;padding-left: 4px;padding-right: 4px;}.GridView td table td span {font-weight: bold;font-size: 15px;width: 20px;color: red;padding-left: 4px;padding-right: 4px;}

这样设置看起来好像没有问题，但是并不能达到一些要求，比如单双行不同样式，页码Pager自定义样式等，由于在此之前对样式没有过了解，所以有待后期完善。而且还有一个问题，就是页码的居中，需要在GridView的属性中加上如下一句：

HorizontalAlign="Center"

CSS还是很强大的，仔细研究说不定就能完善这个样式了。

经过多次测试，我已经可以确定了以上样式是可行的，不过IE8不支持CSS3，所以我一直以来都以为样式有问题。。

论来自IE8的恶意。。

GridView用CSS设定样式相关推荐

css 字体样式设置
css字体样式(Font Style),属性时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
CSS基础(part16)--CSS用户界面样式
学习笔记,仅供参考,有错必纠参考自:pink老师课堂笔记文章目录 CSS用户界面样式鼠标样式cursor 轮廓线outline 防止拖拽文本域resize CSS用户界面样式鼠标样式curso ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
html中按钮的形状,css button 样式
css 怎么去掉button默认样式代码如下: .button{border:0px;background-color:transparent;background-image:url(你自定义背景 ...
CSS滚动条样式设置
CSS滚动条样式设置 1.概述 2.滚动条css 3.总结 1.概述最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需 ...
html中美化右侧滑动条,美化css滚动条样式，就这么简单
很多朋友,会觉得默认的css滚动条样式是很丑的吧,稍微改下-webkit-scrollbar(滚动条整体样式).-webkit-scrollbar-thumb(滚动条里面小方块样式).-webkit- ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
HTML、CSS综合02——css，样式表，选择器、盒子模型
回顾复习什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...
如何设置CSS链接样式
如何用CSS为链接设置不同样式通常需要设置一些链接的样式来美化页面,网页设计中.链接的样式能设置很多种,但是如何能实现我想要的效果,那就需要设置样式的优先顺序,通常可以通过链接的一些伪类样式顺序来实 ...

GridView用CSS设定样式

GridView用CSS设定样式相关推荐

最新文章

热门文章