`

6.3在主题中添加CSS

CSSXHTMLHTMLCC++ 
阅读更多
在主题中添加CSS

如果在主题文件夹中添加CSS文件，则在页面应用主题时也会自动应用CSS。

SimpleStyle\SimpleSheet.css 
html {
  background-color:Gray;
  font:14px Georgia,Serif;
}
.content
{
    margin:auto;
    width:600px;
    border:solid 1px black;
     background-color:White;
     padding:10px;
    }
h1
{
     color:Gray;
     font-size:18px;
     border-bottom:solid 1px orange;
}
    
label
{
  font-weight:bold;
}
input
 {          
    background-color:Yellow;
    border:double 3px orange;
}
.button
{
   background-color:#eeeeee;
}

页面 ShowSimpleCSS.aspx 
  <%@ Page Language="C#" Theme="StyleTheme" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="content">
        <h1>
            Registration Form</h1>
        <asp:Label ID="lblFirstName" AssociatedControlID="txtFirstName" runat="server" />
        <br />
        <asp:TextBox ID="txtFirstName" runat="server" />
        <br />
        <br />
        <asp:Label ID="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" runat="server" />
        <br />
        <asp:TextBox ID="txtLastName" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnSubmit" Text="Submit Form" CssClass="button" runat="server" />
    </div>
    </form>
</body>
</html>


页面显示：


注意：
   使用CSS的好处是使加载页面的速度更快。
   尽量不要通过修改控件属性来对控件进行格式化。使用<style>

1、在主题中添加多个CSS
<link href="App_Themes/StyleTheme/SimpleSheet.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/StyleTheme/SimpleSheet2.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/StyleTheme/SimpleSheet3.css" type="text/css" rel="stylesheet" />

2、使用CSS改变页面布局
使用CSS可以改变页面布局，所以使用主题可以控制页面布局

Float.css 放在主题中

html
{
background-color:Silver;
font:14px Arail,Sans-Serif;
}

#div1
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;   
}

#div2
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;   
}

#div3
{
float:left;
width:25%;
margin:15px;
padding:10px;
background-color:White;   
}

ShowLayout.aspx 

<%@ Page Language="C#" Theme="Simple5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">
        First div content
        <br />
        First div content
        <br />
        First div content
        <br />
        First div content
        <br />
        First div content
        <br />
        First div content
    </div>
    <div id="div2">
        Second div content
        <br />
        Second div content
        <br />
        Second div content
        <br />
        Second div content
        <br />
        Second div content
        <br />
        Second div content
    </div>
    <div id="div3">
        Third div content
        <br />
        Third div content
        <br />
        Third div content
        <br />
        Third div content
        <br />
        Third div content
        <br />
        Third div content
    </div>
    </form>
</body>
</html>


2011-4-28 15:02 danny
分享到：
| 6.2在主题中添加皮肤
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ASP.NET 控件的使用

    6.3 在主题中添加CSS 189 6.3.1 在主题中添加多个CSS 192 6.3.2 使用CSS改变页面布局 192 6.4 创建全局主题 195 6.5 动态应用主题 196 6.6 小结 200 第7章　使用用户控件创建定制控件 201 7.1 创建用户控件 201 ...

    ASP.NET.4揭秘

    6.3 在主题中添加css212 6.3.1 在主题中添加多个css215 6.3.2 使用css改变页面布局215 6.4 创建全局主题219 6.5 动态应用主题220 6.6 小结225 第7章 使用用户控件创建定制控件226 7.1 创建用户控件226 7.1.1 在web...

    [Visual.Basic.2010.入门经典(第6版)].Thearon.Willi等.扫描版（1/2）

    4.3.4 Select Case 中的不同数据 类型 ........................................ 89 4.4 循环 ............................................ 90 4.4.1 For…Next 循环 ..................... 90 4.4.2 ...

    超实用的jQuery代码段

    10.8 在标题栏中添加导航栏 10.9 在页脚区域添加导航栏 10.10 添加可折叠的导航按钮 10.11 实现可折叠的输入表单 10.12 实现手风琴样式的折叠面板 10.13 使用网格打造简单的九宫格界面 10.14 可动态隐藏的页眉和页脚...

    flex3的cookbook书籍完整版dpf（包含目录）

    3.4 节在容器中动态添加和移除子组件 3.5 节对容器使用基于约束的布局 3.6 节在容器内为子组件设置最大、最小尺寸 3.7 节为容器指定行和列的约束 3.8 节使用约束条件为文本创建排版流程(Layout Flows) 3.9 节在容器...

    ASP.NET2.0高级编程(第4版)1/6

    书中提供了大量的实例，可帮助读者快速掌握如何在.NET平台下开发功能强大的ASP.NET应用程序。本书适合有一些基础的ASP.NET初级程序员以及准备迁移到ASP.NET 2.0的编程老手。该书与《ASP.NET 2.0入门经典（第4版）》...

    Maven权威指南 很精典的学习教程,比ＡＮＴ更好用

    6.3. simple-weather 模块 6.4. simple-webapp 模块 6.5. 构建这个多模块项目 6.6. 运行Web应用 7. 多模块企业级项目 7.1. 简介 7.1.1. 下载本章样例 7.1.2. 多模块企业级项目 7.1.3. 本例中所用的技术 ...

    2.ASP.NET.2.0.高级编程(第4版) [1/7]

    9.2.3 在主题中包含CSS文件 260 9.2.4 使主题包含图像 263 9.3 定义多个Skin选项 266 9.4 编程使用主题 267 9.4.1 编程指定页面的主题 267 9.4.2 编程指定控件的SkinID 268 9.5 主题和定制控件 268 9.6 小结 ...

    PHP程序开发范例宝典III

    实例036　在下拉菜单中显示数组中的元素　51 实例037　级联菜单的应用　52 实例038　修改数据时下拉列表的默认值为数据库中原数据信息　54 实例039　可输入字符的下拉菜单　56 实例040　应用下拉列表选择所要联机的...

    C#编程经验技巧宝典

    79 &lt;br&gt;0116　如何在字符串中查找指定字符　79 &lt;br&gt;0117　如何在字符串中用一子串替换另一子串　80 &lt;br&gt;0118　将新字符串添加到已有字符串中　80 &lt;br&gt;0119　如何在字符串中添加多个空格　81 &lt;br&gt;0120...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    16.2.6　在主题里使用CSS 16.2.7　通过配置文件来应用主题 16.2.8　动态应用主题 16.3　标准化网站布局 16.4　母版页基础 16.4.1　简单的母版页 16.4.2　简单的内容页 16.4.3　默认内容 16.4.4　具有表格和...

Magicbox
Global site tag (gtag.js) - Google Analytics