61阅读

首页 >  css样式的作用-使用css控制GridView控件的样式

css样式的作用-使用css控制GridView控件的样式

发布时间：2017-11-29 所属栏目：设计

一 : 使用css控制GridView控件的样式

<style>

.GridView_Header

{

background-color:Transparent;

color:Black;

font-family:Tahoma,Arial,Helvetica;

font-size:10px;

font-weight:bold;

text-align:center;

}

.DataGrid_Item

{

background-color:Transparent;

color:Black;

font-family:Tahoma,Arial,Helvetica;

font-size:10px;

font-weight:normal;

}

.GridView_SelectedItem

{

background-color:Silver;

color:Blue;

font-family:Tahoma,Arial,Helvetica;

font-size:10px;

font-weight:normal;

}

</style>

<asp:GridViewrunat="server">

<HeaderStyleCss="GridView_Header"/>

<ItemStyleCss="GridView_Item"/>

<SelectedItemStyleCss="GridView_SelectedItem"/>

</asp:GridView>

前台就是这样子了

<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="false">

<Columns>

<asp:TemplateFieldHeaderStyle-Width="200px"HeaderText="第一列">

<ItemTemplate>

这是第一列

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateFieldHeaderStyle-Width="50px"HeaderText="第二列">

<ItemTemplate>

这是第二列

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

后台设置宽度

protectedvoidGridView1_RowDataBound(objectsender,GridViewRowEventArgse)

{

if(e.Row.RowState==(DataControlRowState.Edit|DataControlRowState.Alternate)

||e.Row.RowState==DataControlRowState.Edit)

{

TextBoxcurText;

for(inti=0;i<e.Row.Cells.Count;i++)

{

if(e.Row.Cells[i].Controls.Count!=0)

{

curText=e.Row.Cells[i].Controls[0]asTextBox;

if(curText!=null)

{

curText.Width=Unit.Pixel(70);

}

}

}

}

}

二 : 完全使用css样式制作弹出菜单

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}


/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}


</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}


.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}


</style>
<![endif]-->
</head>


<body>


<div class="menu">


<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>


<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>


    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>


  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
  <table><tr><td>
  <![endif]-->


        <ul>
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>


    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->


    </li>


    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    </ul>


<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


</li>


<li><a class="hide" href="index.html">MENUS</a>


<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>


<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


</li>


<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>


<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>


<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


</li>


<li><a class="hide" href="../boxes/index.html">BOXES</a>


<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>


<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


</li>


<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>


<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


</li>


<li><a class="hide" href="../ie/index.html">EXPLORER</a>


<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>


<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


</li>


<li><a class="hide" href="../opacity/index.html">OPACITY</a>


<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->


    <ul>
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>


  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
  <table><tr><td>
  <![endif]-->


        <ul class="left">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>


    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->
    </li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>

</div>
</body>
</html>

三 : span设CSS样式总是不起作用的解决方法

span 设CSS样式不起作用的情况，应该有很多的朋友都有见到过吧，小编今天也有遇到过，经搜索整理出来的经验就是先让span成块级元素显示，CSS样式才会起作用

复制代码代码如下:
<span id='span_slide_container' style='display:block; overflow-y: auto; overflow-x: auto; height: 500px;'>


此处 display:block; 一定要加上，否则，span不起作用

如 果要定义span居中，必须先让span成块级元素显示，也就是说，要先定义span的display:block;属性，然后再给span添加边距属性 margin:0px auto;这样就能达到你想要的效果了。span的属性很多，几乎所有标签的属性都可以定义在span上，只是很多属性都必须在span成块级元素时菜其 作用，span本身只是为了补充a标签的作用，是一个辅助标签，一般只能识别对文字的样式的你故意，所以如果想给span标签定义更多的其他样式属性，你 就必须先给span加上块级属性，也就说添加display:block;属性，这样以后你的样式就可以起作用了

四 : 添加css样式的三种方法

一，行内式样式（Inline Style）

即使用style属性，将CSS直接写在HTML标签中。

例如：<p style="color:red">这行段落将显示为红色。</p>

注意：style属性可以用在<body>内的所有（X）HTML标签上，但不能应用与<body>以外的标签，如<title><head>等标签。

二，嵌入式样式表（Embedded Style Sheets）

嵌入式样式表使用“<style></style>”标签嵌入到（X）HTML文件的头部中，代码如下：

<head>

<style type="text/css">

<!--

.class{

color:red;

}　

-->　

</style>

</head>

注意：对于一些不能识别<style>标签的浏览器，使用（X）HTML的注释标签<!-- 注释文字 -->把样式包含进来。这样，不支持<style>标签的的浏览器会忽略样式内容，而支持<style>标签的浏览器会解读样式表。

三，外部样式表（Link Style Sheets）

在<head>标签内使用<link>标签将样式表文件连接到（X）HTML文件中。

代码如下：

<head>

<link style="stylesheet" href="myclass.css" type="text/css" />

</head>

五 : CSS样式颜色属性的使用

css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。

red红色
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00

有17个预先确定的颜色，它们是：

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,

olive, orange, purple, red, silver, teal, white, and yellow.

transparent 也是一个正确的值。

rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。

我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。

十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。

color和background-color

颜色可以使用color和background-color，是美国英语中"color"不是"colour"。

蓝色背景，黄色文字：

h1 {
color: yellow;
background-color: blue;
}

这些颜色可能比较粗糙，你可以使用另外的色度：

body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}

你可以看到h1已经变成黄色和蓝色。

color和background-color可以使用在绝大部分html元素，包括body。


本文标题：css样式的作用-使用css控制GridView控件的样式
本文地址： http://www.61k.com/1060533.html

教程

设计

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1