`

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 ...

    [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 节在容器...

    Learning Ionic中文版

    - Ionic模块是指那些可以被添加到Ionic应用中的额外功能模块。通过使用这些模块，开发者可以轻松地扩展应用的功能，比如增加地图支持、社交分享等。 - **2.6 Yeoman Ionic Generator** - Yeoman Ionic Generator是...

    LifeRay 6.1GA2开发手册-英文

    这里解释了如何在主题中集成JavaScript脚本，以实现更丰富的交互效果。 **5.6 设置** 这部分内容讨论了如何配置主题的各种选项，以满足不同的需求。 **5.7 颜色方案** 这一节介绍了如何自定义主题的颜色方案，这...

    无废话XML.pdf 无废话XML.pdf

    - **6.3 使用XHTML的最佳实践**：分享了一些在开发过程中使用XHTML时应遵循的最佳实践，以确保文档的质量和效率。 通过以上对文档部分内容的分析，可以看出《无废话XML》这份资料涵盖了从XML的基础知识到高级应用的...

    火狐插件|火狐打包|火狐插件打包|网页设计火狐插件打包

    2. FEBE{6.3.3.2}.xpi：FEBE（Firefox Environment Backup Extension）能备份火狐的设置、扩展、主题、书签等，确保在浏览器出现问题时可以迅速恢复到之前的状态。 3. FlashGot{1.2.1.23}.xpi：FlashGot是一款强大...

    java品熹官方主题网站商城购物系统论文.doc

    本项目“品熹官方主题网站商城”正是在这种背景下诞生，旨在提供一个集商品展示、销售、管理于一体的在线平台，以便于企业与消费者之间进行有效的信息交流和交易。 1.2 设计内容 本设计主要包括以下几个部分：需求...

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

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

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