2.4 外观美化

默认的样式实在太过时了，好在GridView为我们提供了丰富的内置样式。将Visual Studio 2010切换回“设计”模式，如图2-3、图2-4所示。

图2-3 “设计”模式和“源”模式的切换

图2-4 “设计”模式下的GridView

这个时候把鼠标移到GridView右侧，出现一个向右的三角形箭头，这是快捷按钮，单击该按钮出现“GridView任务”窗口，如图2-5、图2-6所示。

图2-5 GridView快捷按钮

图2-6 “GridView任务”窗口

单击“自动套用格式”链接，弹出“自动套用格式”对话框，里面有许多样式可供选择，这里选择“雪松”，如图2-7所示。

图2-7 “自动套用格式”对话框

此时在浏览器中刷新，再看GridView外观发生了什么变化，如图2-8所示。

图2-8 在IE中设置样式后的效果

感觉字体有点大，这时可以在GridView上单击鼠标右键，弹出“属性”菜单，在Font下的Size中设置字体大小为12px，再次刷新浏览器，效果如图2-9所示。

这时的报表字号就是最常见的网页字号大小，整个页面也显得好看很多。再次切换到“源”模式，发现系统为我们加了许多代码。

        <asp:GridViewID="GridView1"runat="server"BackColor="White"BorderColor="#C
    CCCCC"
        BorderStyle="None"BorderWidth="1px"CellPadding="3"Font-Size="12px">
        <FooterStyleBackColor="White"ForeColor="#000066"/>
        <RowStyleForeColor="#000066"/>
        <PagerStyleBackColor="White"ForeColor="#000066"HorizontalAlign="Left"/>
        <SelectedRowStyleBackColor="#669999"Font-Bold="True"ForeColor="White"/>
        <HeaderStyleBackColor="#006699"Font-Bold="True"ForeColor="White"/>
        </asp:GridView>

图2-9 在IE中设置字号为12px的效果

上一章目录下一章