给gridview写css样式.doc

在网页设计中，GridView 是一个常用的控件，用于展示数据集中的信息，通常与数据库连接，以表格形式呈现。为了使GridView更具吸引力和符合网站设计风格，我们可以自定义其CSS样式。以下是一份详细的关于如何为GridView编写CSS样式的指南。 我们创建一个CSS类 `.GridViewStyle`，用于设置整个GridView的基本样式。这个类定义了边框宽度、颜色以及内边距，例如： ```css .GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: 2px solid #A7A6AA; border-left: 2px solid white; border-top: 2px solid white; padding: 4px; } ``` 在这个例子中，GridView的右侧和底部边框是灰色的，而左侧和顶部边框是白色的。内边距为4像素，增加了内容与边框之间的空间感。 接着，我们为链接（`<a>` 元素）定义样式 `.GridViewStyle a`，使其文字颜色为白色： ```css .GridViewStyle a { color: #FFFFFF; } ``` 接下来，定义表格头（`<th>` 元素）的样式 `.GridViewHeaderStyle th` 和 `.GridViewHeaderStyle`。`.GridViewHeaderStyle th` 设置左右边框，而`.GridViewHeaderStyle`设置背景色、字体加粗和文字颜色： ```css .GridViewHeaderStyle th { border-left: 1px solid #EBE9ED; border-right: 1px solid #EBE9ED; } .GridViewHeaderStyle { background-color: #5D7B9D; font-weight: bold; color: White; } ``` 这将使得表格头背景为深蓝色，文字白色且加粗。 `.GridViewFooterStyle` 类为表格脚部（通常是页脚信息）设置样式，与表格头类似，但背景颜色不变： ```css .GridViewFooterStyle { background-color: #5D7B9D; font-weight: bold; color: White; } ``` 对于表格行，`.GridViewRowStyle` 定义了默认行的样式，`.GridViewAlternatingRowStyle` 定义了交替行的样式，以便于视觉区分： ```css .GridViewRowStyle { background-color: #F7F6F3; color: #333333; } .GridViewAlternatingRowStyle { background-color: #FFFFFF; color: #284775; } ``` 这里，默认行背景为淡米色，交替行则为白色，文字颜色相应调整。 `.GridViewRowStyle td, .GridViewAlternatingRowStyle td` 用于设置所有行的单元格边框： ```css .GridViewRowStyle td, .GridViewAlternatingRowStyle td { border: 1px solid #EBE9ED; } ``` `.GridViewSelectedRowStyle` 用于选中行的样式，强调选中状态： ```css .GridViewSelectedRowStyle { background-color: #E2DED6; font-weight: bold; color: #333333; } ``` `.GridViewPagerStyle` 用于分页导航的样式，确保背景色和文字颜色清晰可读： ```css .GridViewPagerStyle { background-color: #284775; color: #FFFFFF; } ``` 为了居中显示分页链接，对`.GridViewPagerStyle table` 应用内联样式： ```css .GridViewPagerStyle table /* to center the paging links */ { margin: 0 auto 0 auto; } ``` 在ASP.NET中，我们可以将这些CSS样式应用到GridView控件，如下所示： ```xml <asp:GridView CssClass="GridViewStyle" runat="server"> <FooterStyle CssClass="GridViewFooterStyle" /> <RowStyle CssClass="GridViewRowStyle" /> <SelectedRowStyle CssClass="GridViewSelectedRowStyle" /> <PagerStyle CssClass="GridViewPagerStyle" /> <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" /> <HeaderStyle CssClass="GridViewHeaderStyle" /> </asp:GridView> ``` 通过这种方式，我们可以完全自定义GridView的外观，使其与网站的整体设计保持一致，同时提供良好的用户体验。在实际项目中，可以根据需要调整颜色、边框宽度等细节，以满足特定的设计需求。