HT ML相关

最新推荐文章于 2024-10-26 14:11:33 发布
最新推荐文章于 2024-10-26 14:11:33 发布
阅读量442 收藏 1
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_62272971/article/details/127960521
版权

HTML

网页的构成

  • HTML：通常用来定义网页内容的含义和基本结构。
  • CSS：通常用来描述网页的表现与展示效果。
  • JavaScript：通常用来执行网页的功能与行为。

一、概述

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。

所谓超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。

所谓标记Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。

二、组成

HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。

1）标签

一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。
在这里插入图片描述

2）属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值 成对的形式出现，比如：name=‘value’。
在这里插入图片描述

页面说明

  1. <!DOCTYPE html>: 声明文档类型。
  2. <html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。
  3. <head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容
  4. <body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。

三、基本语法

注释

将其用特殊的记号<!--注释-->包括起来

标签

空元素

一些元素只有一个标签，叫做空元素

例如：

<br/>

嵌套元素

<p>这是<b>第一个</b>页面</p>

块级和行内

概念

  • 块级元素：

    独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。

  • 行内元素

    行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span> 等。

    注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

div和span

  • <div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。

  • <span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。

注意：div和span在页面布局中有重要作用。

属性

  • 属性名：同一个标签中，属性名不得重复。

  • 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。

  • 引号：双引号是最常用的，不过使用单引号也没有问题。

  • 常用属性：

    属性名作用
    class定义元素类名，用来选择和访问特定的元素
    id定义元素唯一标识符，在整个文档中必须是唯一的
    name定义元素名称，可以用于提交服务器的表单字段
    value定义在元素内显示的默认值
    style定义CSS样式，这些样式会覆盖之前设置的样式

特殊字符

原义字符等价字符引用
<&lt;
>&gt;
"&quot;
’&apos;
&&amp;
空格&nbsp;

文本标签

标签名作用
p表示文本的一个段落
h表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低
hr表示段落级元素之间的主题转换，一般显示为水平线
li表示列表里的条目。
ul表示一个无序列表，可含多个元素，无编号显示。
ol表示一个有序列表，通常渲染为有带编号的列表
em表示文本着重，一般用斜体显示
strong表示文本重要，一般用粗体显示
font表示字体，可以设置样式（已过时）
i表示斜体
b表示加粗文本

div的class值

<style>
     div{ border: 1px solid blue;}
</style>


<div >left</div>
<div >center</div>
<div>right</div>

在这里插入图片描述

浮动布局和清除

<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动

<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。

设置背景

背景色:
	 background-color: black;
背景图:
	 background-image: url("../img/bg.png");

图片标签

标签名作用备注
img可以显示一张图片(本地或网络)src属性，这是一个必需的属性，表示图片的地址。

其他属性：

属性名作用备注
title鼠标悬停（hover）时显示文本。
alt图形不显示时的替换文本。
height图像的高度。
width图像的宽度。

超链接

标签名作用备注
a表示超链接。href属性，表示超链接指向的URL地址。
属性名作用
target页面的打开方式(_self当前页 _blank新标签页)。

去掉下划线

根据某些样式的布局需求，去除下划线更为美观。

a { 
    text-decoration:none;  // none 表示不显示
}

表单标签

标签名作用备注
form表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器
<form >
    //表单元素
</form>

表单的属性

属性名作用备注
action处理此表单信息的Web服务器的URL地址
method提交此表单信息到Web服务器的方式可能的值有get和post，默认为get
autocomplete自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用HTML5

GET与POST说明：

post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。

GET方式举例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3Zl0enb-1669002533405)(assets/1573034215181.png)]

GET与POST对比：

地址栏可见数据安全数据大小
GET可见不安全有限制（取决于浏览器）
POST不可见相对安全无限制

表单元素入门

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

标签名作用备注
label表单元素的说明，配合表单元素使用for属性值为相关表单元素的id属性值
input表单中输入控件，多种输入类型，用于接受来自用户数据type属性值决定输入类型
button页面中可点击的按钮，可以配合表单进行提交type属性值决定按钮类型

简单的文本输入框

  • label标签：表单的说明。

    • for属性值：匹配input标签的id属性值

  • input标签：输入控件。

    • type属性：表示输入类型，text值为普通文本框
    • id属性：表示标签唯一标识
    • name属性：表示标签名称
    • value属性：表示标签数据值

在这里插入图片描述

提交用户名的表单

  • button标签：表示按钮。

    • type属性：表示按钮类型，submit值为提交按钮。

    在这里插入图片描述

关于属性值

NAME和VALUE属性

属性名作用
name<input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值
value这个<input>元素当前的值，允许用户通过页面输入

TYPE属性

  • 基本的文本属性
属性值作用备注
text单行文本字段
password单行文本字段，值被遮盖
email用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验HTML5

单选多选属性

属性值作用
radio单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。
checkbox复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器

  • 按钮属性

    属性值作用
    button无行为按钮，用于结合JavaScript实现自定义动态效果
    submit提交按钮，用于提交表单数据。
    reset重置按钮，用于将表单中内容恢复为默认值。
    image图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

  • HTML5新增的type值

    属性值作用备注
    dateHTML5 用于输入日期的控件年，月，日，不包括时间
    timeHTML5 用于输入时间的控件不含时区
    datetime-localHTML5 用于输入日期时间的控件不包含时区
    numberHTML5 用于输入浮点数的控件
    rangeHTML5 用于输入不精确值控件max-规定最大值
    min-规定最小值
    step-规定步进值
    value-规定默认值
    searchHTML5 用于输入搜索字符串的单行文本字段可以点击x清除内容
    telHTML5 用于输入电话号码的控件
    urlHTML5 用于编辑URL的字段可以校验URL地址格式
属性值作用备注
file此控件可以让用户选择文件，用于文件上传。使用 accept 属性可以定义控件可以选择的文件类型。
hidden此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值

  • button标签的type属性

    属性值作用备注
    submit此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。同 <input type="submit"/>
    reset此按钮重置所有组件为初始值。同<input type="reset"/>
    button此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。同<input type="button"/>

HTML5新增属性

属性名作用备注
placeholder提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required这个属性指定用户在提交表单之前必须为该元素填充值1. 布尔属性，可省略属性值表示true
2. 当type属性是hidden,image或者button类型时不可使用
autocomplete自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。1. 开启为on，关闭为off
2. 可以设置指定的字段为off，关闭自动补全

更多表单元素

标签名作用备注
select表单的控件，下拉选项菜单与option配合实用
optgroupoption的分组标签与option配合实用
optionselect的子标签，表示一个选项
textarea表示多行纯文本编辑控件rows表示行高度， cols表示列宽度
fieldset用来对表单中的控制元素进行分组(也包括 label 元素)
legend用于表示它的fieldset内容的标题。fieldset 的子元素

四、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wai{
           background-color: orange; 
        }
        .zi{
            width: 70px;
            height: 20px;
            color: gray;
            float: right;
            margin: 20px 10px;
        }
        .logo{
            width: 200px;
            height: 25px;
            float: left;
        }
        .team{ 
            width: 300px;
            height: 600px;
            float: left;
        }
        a{
            text-decoration: none;
        }
        a:link{
            color: gray;
        }
        a:visited{
            color:gray;
        }
        a:hover{
            color: orange;
            text-decoration: none;
            cursor: pointer;
        }
        a:active{
            color: red;
            text-decoration: underline;
        }
        .quan:visited{
            color:orange;
        }
        .quan:hover{
            color: blue;
            text-decoration: none;
            cursor: pointer;
        }
        .quan:active{
            color: red;
            /* text-decoration: underline; */
        }
        input{
            
            background-color: orange;
            color: white;
            border: 2px solid white;
        }
        input:hover{
            color: red;
            background-color: blue;
            border:2px solid red;
        }
        
        
    </style>
</head>
<body>
    <div class="wai">
        <div style="width: 1000px;height: 24px; margin: auto;"><!--第一层-->
            <span style="color:white;line-height:20px;font-size: 13px;">电话：0512-57995109 &nbsp;&nbsp; 地址：昆山市庆丰西路639号智谷创意工业园301</span>
        </div>
        <div style="background-color: rgb(253, 241, 218); ""><!--第二层 logo-->
            <div style="background-color: rgb(253, 241, 218);width: 1000px;height: 60px;margin: auto;">
                <div class="logo" style="margin: 20px 0 1px 0px;"><img src="./images/logo.png" alt="" width="155px" height="36px"></div>
                <div class="zi" ><b><a href="#">联系我们</a></b></div>
                <div class="zi" ><b><a href="#">关于我们</a></b></div>
                <div class="zi" ><b><a href="#">萌宠咨询</a></b></div>
                <div class="zi" ><b><a href="#">宠物用品</a></b></div>
                <div class="zi" ><b><a href="#">宠物品种</a></b></div>
                <div class="zi"  ><b> &nbsp; &nbsp; &nbsp; <a href="#">首页</a>

                    <div style="margin:-7px 27px;">——</div>
                </b></div>
            </div>
        </div>
        <div style="width: 100%;height: 600px; margin: 0px;"><!--第三层 小女孩-->
            <img src="./images/bg_slide2.jpg" alt="" height="100%" width="100%"">
        </div>
        <div style="width: 100%;height: 90px; text-align: center;line-height:80px;"><!--第四层-->
            <div style="width: 1350px;"><span style="color: white;font-size: 24px; ">我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。</span></div>
            <div style="color: white; border-radius: 10px; width: 100px; height: 50px; text-align: center;line-height:50px;margin: -68px 1050px;">
               <a href="#"><input style="border-radius: 10px;width:103px;height: 53px;" type="button" value="联系我们" οnclick="alert('已联系')"></a> 
                </div>
                
            
        </div>
        <div style="background-color: rgb(253, 241, 218); width: 100%;height: 404px;padding: 10px 0 10px 0;"><!--第五层 萌宠展示 盒中盒-->
            <div style=" width: 1000px;height: 400px;background-color: white;margin: auto;">
                <div style=" width: 275px;height: 401px;float: left;background-color: orange;">
                    <div style="margin: 125px 10px;"><span style="color: white;font-size:small;">动物是人类的朋友。在这里，每一个热爱宠物的人
                        <br>
                        不但能找到他们想要的，而且能得到比他们想要的更多。
                    </span></div>
                    <div style="color: gray;width: 241px;height: 36px;background-color: white;border-radius: 5px;text-align: center;line-height:36px;margin: -118px 16px;">所有品种</div>
                </div>
                <div style=" width: 715px;height: 62px;float: top;float: right; line-height:65px;">
                    <b style="font-size: 25px;">萌宠展示</b>
                    <div style="float: right;width: 40px;height: 40px;background-color: lightgray;text-align: center;line-height:40px;margin:15px 7px 15px 5px;"><b>
                        <a href="#"><input style="float: right;width: 42px;height: 43px;background-color: lightgray;text-align: center;line-height:40px;margin:-1px -1px 15px 5px;color:black;font-weight:bold;" type="button" value=">" οnclick="alert('正在前往下一页')"></a> 
                    </b></div>
                    <div style="float: right;width: 40px;height: 40px;background-color: lightgray;text-align: center;line-height:40px;margin:15px 0px 15px 0;"><b>
                        <a href="#"><input style="float: right;width: 42px;height: 43px;background-color: lightgray;text-align: center;line-height:40px;margin:-1px -2px 15px 5px;color: black;font-weight:bold;" type="button" value="<" οnclick="alert('正在前往上一页')"></a> 
                        </b></div>
                    </div>
                <div style=" width: 234px;height: 322px;float: right;margin: 10px 0;"><img src="images/depositphotos_1.jpg" alt="" width="100%" height="100%">
                    <div style="color: orange;width: 220px;height: 38px;background-color: white;border-radius: 5px;text-align: center;line-height:37px;margin: -84px 7px;position: absolute;">
                        <b><a class="quan" href="#">萨摩耶</a></b>
                    </div>
                    <div style="color: orange;width: 220px;height: 19px;background-color: gray;text-align: center;line-height:20px;margin: -38px 7px;position: absolute;">
                        <span style="color: white;font-size:small;">乖巧可爱 微笑天使</span>
                    </div>
                </div>
                <div style=" width: 234px;height: 322px;float: right;margin: 10px 5px;"><img src="images/img5-350x500.jpg" alt="" width="100%" height="100%">
                    <div style="color: orange;width: 220px;height: 38px;background-color: white;border-radius: 5px;text-align: center;line-height:37px;margin: -84px 7px;position: absolute;">
                        <b><a class="quan" href="#">金毛犬</a></b>
                    </div>
                    <div style="color: orange;width: 220px;height: 19px;background-color: gray;text-align: center;line-height:20px;margin: -38px 7px;position: absolute;">
                        <span style="color: white;font-size:small;">热情友善 自信且不怕生</span>
                    </div>
                </div>
                <div style=" width: 234px;height: 322px;float: right;margin: 10px 0;"><img src="images/img4-350x500.jpg" alt="" width="100%" height="100%">
                    <div style="color: orange;width: 220px;height: 38px;background-color: white;border-radius: 5px;text-align: center;line-height:37px;margin: -84px 7px;position: absolute;">
                        <b><a class="quan" href="#">法国斗牛犬</a></b>
                    </div>
                    <div style="color: orange;width: 220px;height: 19px;background-color: gray;text-align: center;line-height:20px;margin: -38px 7px;position: absolute;">
                        <span style="color: white;font-size:small;">聪明敏捷 开朗不常犬吠</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 160px;"><!--第六层-->
            <img src="images/b2.jpg" alt="" width="100%">
            <!-- <div style="color: white; width: 100%;height: 100px;text-align: center;line-height:50px;margin: -500px 0px;float: top; font-size: 25px;">宠物之恋，在于关爱，让你的爱宠享受家的感觉！</div> -->
        </div>
        <div style="color: white; width: 100%;height: 183px;text-align: center;margin: -93px 0px;font-size: 25px;position: relative;">宠物之恋，在于关爱，让你的爱宠享受家的感觉！</div>
        <div style="background-color: rgb(253, 241, 218); width: 100%;height: 660px;position: relative;"><!--第七层 我们的团队 盒中盒-->
            <div style="width: 1180px;height: 650px;margin: auto;">
                <br>
                <p align="center" style="font-size: 22px;"><b>———我们的团队———</b></p>
                <br>
                <div style="text-align: center;color: gray;"><span style="font-size: 13px;"> 凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程</span></div>
                <div class="team" style="width: 287px;height: 548px;margin: 10px 5px 10px 0px;background-color: white;"><img src="images/image1-500x320.jpg" alt="" height="400" width=100%>
                    <div style="width: 100px; height: 50px;line-height:40px;"><span style="color: orange;"><span>&nbsp;&nbsp;</span><ins>Dr.Helen</ins></span></div>
                    <div style="width: 272px; height: 50px;color: gray;margin: 0 10px;"><span>B级美容师，注册兽医师，理论与实践经验丰富。</span></div>
                    </div>
                <div class="team" style="width: 287px;height: 548px;margin: 10px 5px 10px 5px;background-color: white;"><img src="images/image4-500x320.jpg" alt="" height="400" width="100%">
                    <div style="width: 100px; height: 50px;line-height:40px;"><span style="color: orange;"><span>&nbsp;&nbsp;</span><ins>Dr.Alan</ins></span></div>
                    <div style="width: 272px; height: 50px;color: gray;margin: 0 10px;"><span>执业兽医师，国际认证资深宠物美容导师。</span></div>
                    </div>
                <div class="team" style="width: 287px;height: 548px;margin: 10px 5px 10px 5px;background-color: white;"><img src="images/image5-500x320.jpg" alt="" height="400" width="100%">
                    <div style="width: 100px; height: 50px;line-height:40px;"><span style="color: orange;"><span>&nbsp;&nbsp;</span><ins>Dr.Ariv</ins></span></div>
                    <div style="width: 272px; height: 50px;color: gray;margin: 0 10px;"><span>A级宠物美容师，擅长泰迪的各种造型。</span></div>
                    </div>
                <div class="team" style="width: 287px;height: 548px;margin: 10px 0 10px 5px;background-color: white;"><img src="images/image6-500x320.jpg" alt="" height="400" width="100%">
                    <div style="width: 100px; height: 50px;line-height:40px;"><span style="color: orange;"><span>&nbsp;&nbsp;</span><ins>Dr.Edwards</ins></span></div>
                    <div style="width: 272px; height: 50px;color: gray; margin: 0 10px;"><span>宠物医院主诊，宠物美容培训中心讲师。</span></div>
                    </div>
            </div>
        </div>
        <div style="width: 100%;height: 40px;text-align: center;line-height:40px;"><!--最后一层-->
            <span style="color: white;">&copy;XXX市城市宠物医院</span>
        </div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

WPF中的ControlTemplate(控件模板)
qq_30725967的博客
09-02 2147
在上面的代码中，我们修改了Button的Template属性，我们定义了一个ControlTemplate，在 ... 之间包含的是模板的视觉树，也就是如何显示控件的外观，我们这里使用了一个Ellipse（椭圆）和一个TextBlock（文本块）来定义控件的外观。最好的模板示例：我们知道每个控件都有自己默认的模板，这是MS编写的，如果我们能够得到这些模板的XAML代码，那么它将是学习模板的最好的示例，
wpf入门第二篇 MVVM与binding
wf824284257的博客
03-23 4296
前言 本文是wpf入门系列第二篇，面向有winform或者web前端基础的、并且也有C#基础的同学。 本文通过简单的例子，介绍了wpf的MVVM开发模式与binding的使用方法。 本文使用了 Visual Studio 2017 进行演示讲解。 wpf入门系列导航页面： https://blog.youkuaiyun.com/wf824284257/article/details/88757497 上一步...
WPF ControllTemplate Triggers小记 - 简书
weixin_30498921的博客
04-10 674
WPF ControllTemplate Triggers小记 - 简书 原文:WPF ControllTemplate Triggers小记 - 简书 WPF中，样式模板中如果定义EventTrigger事件方式实现动画。那么需要注意两点： 1、对于绑定的属性的EventTrigger，绑定...
wpf入门第三篇 ControlTemplate、Trigger与Storyboard
wf824284257的博客
03-24 5621
前言 本文是wpf入门系列第二篇，面向有winform或者web前端基础的、并且也有C#基础的同学。 本文通过简单的例子，介绍了wpf的ControlTemplate、Trigger与Storyboard的使用方法。 本文使用了 Visual Studio 2017 进行演示讲解。 wpf入门系列导航页面： https://blog.youkuaiyun.com/wf824284257/article/de...
ControlTemplate.Triggers和Style.Triggers在WPF中有不同的作用
m0_59115955的博客
12-25 896
ControlTemplate.Triggers允许我们在控件模板内部定义触发器，当特定条件满足时，触发器可以改变控件的外观或行为。与ControlTemplate.Trigger不同，Style.Triggers用于在控件的外观样式中定义触发器，以根据特定条件修改控件的外观属性。ControlTemplate.Triggers用于自定义控件模板中的触发器定义，而Style.Triggers用于控件外观样式中的触发器定义。两者都是WPF中用于响应条件并改变控件行为或外观的重要机制。
WPF 深入理解六、ControlTemplate控件模板
weixin_43847546的博客
06-21 849
ControlTemplate 详细理解 原理 过程
深入理解WPF：ControlTemplate、Trigger与Storyboard
在WPF（Windows Presentation Foundation）中，ControlTemplate、Trigger与Storyboard是构建界面和实现交互效果的核心组件。以下是对这些概念的详细解释以及如何通过代码示例来理解它们的应用。 ### ...
wpf入门第四篇 VisualState
wf824284257的博客
04-03 5545
前言 本文是wpf入门系列第二篇，面向有winform或者web前端基础的、并且也有C#基础的同学。 在WPF中，View（Window,UserControl等）常常会根据不同的状态来显示不同的内容，比如消息的未读和已读是两种状态，这两种状态下View的表现形式会有所差别。本文将从头开始一个的示例项目，来简单的介绍VisualState的用法。 本文使用了 Visual Studio 2017...
wpf进阶教程（一）：创建控件模板ControlTemplate
qq_43511299的博客
12-02 1688
控件模板可对控件的内容和样式均做出改变。 项目源码 防止两个按钮，第一个为普通按钮，第二个应用了控件模板： <Window.Resources> <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"> <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="2" Background="Red" Tex
如何在WPF中创建动态故事板Storyboard
09-18
Todd Miranda演示了如何在运行时创建和执行一个故事板（Storyboard）。
Wpf跑马灯——Storyboard运用
weixin_30412013的博客
03-09 431
本文将建立一个wpf项目中运用Storyboard描述出一个跑马灯效果的简单实例，以下是详细步骤： 新建一个wpf项目，添加演示用图片，修改图片属性为"如果较新则复制"。 在MainWindow.xaml中，为系统自动创建的Grid容器命名，这样可以在后台操作的到它。 <Window x:Class="WpfRollPic.MainWindow" xmln...
WPF之 使用Storyboard故事板做动画效果
qq_40131199的博客
10-10 2617
通过Storyboard实现位移和透明度变化动画效果
【WPF学习】第五十章 故事板
imherer的博客
04-13 2414
　　正如上一章介绍，WPF动画通过一组动画类(Animation类)表示。使用少数几个熟悉设置相关信息，如开始值、结束值以及持续时间。这显然使得它们非常适合于XAML。不是很清晰的时：如何为特定的事件和属性关联动画，以及如何在正确的时间触发动画。 　　在所有声明式动画中都会用到如下两个要素： 　　故事板。故事板是BeginAnimation()方法的XAML等价物。通过故事板将动画指定到合适的元素和属性。 　　事件触发器。事件触发器响应属性变化或事件(如按钮的Click事件)，并控制故事板。例如，为了开始.
WPF的触发器(Trigger)
最新发布
去追随使你安宁的东西，去做你觉得有用的事情
10-26 2464
WPF（Windows Presentation Foundation）是微软.NET框架的一部分，用于构建Windows客户端应用程序。在WPF中，触发器（Triggers）是一种强大的功能，允许开发者根据控件的状态或属性值来动态改变控件的外观和行为。触发器通常用于样式（Styles）和模板（Templates）中。触发器，是指在既定条件或者特殊场景下被触发，从而去执行一个操作。在WPF中，触发器可以分为以下几类：基本触发器(Trigger)；事件触发器(EventTrigger)；
WPF控件模板(6)
weixin_30952535的博客
08-27 191
什么是ControlTemplate? ControlTemplate(控件模板)不仅是用于来定义控件的外观、样式, 还可通过控件模板的触发器(ControlTemplate.Triggers)修改控件的行为、响应动画等。 通过剖析控件了解ControlTemplate的组成: 首先,创建一个WPF项目, 创建一个Button按钮, 然后选中该按钮, 右键选择编辑模板>编辑副本:...
(WPF)Storyboard
ilipan的专栏
07-25 4900
Storyboard是一个为其所包含的动画提供目标信息的容器。除非动画放在Storyboard中，负责不能在XMAL中被实例化。 BeginStoryboard通过将Storyboard添加到触发器上，指定了什么时候动画开始。 <DoubleAn
ControlTemplate和DataTemplate Trigger，EventTrigger和DataTrigger
My Code Library
02-21 982
ControlTemplate 和 DataTemplate 1. ControlTemplate用来指定 Control 的可在其多个实例之间共享的可视结构，行为，和Trigger等方面。和创建自定义控件不同，在许多情况下，您都不需要编写自己的控件，您只是希望更改控件的可视化或替换现有控件的 ControlTemplate。使用ControlTemplate很简单，只需要设定它，然后赋值到T...
wpf的storyboard
Lyulf的专栏
06-16 838
因为工作需要，最近在研究wpf了。看msdn看的头疼。。英语不好干这行还真是困难。发现wpf里的storyboard是个好东西。。大家来讨论下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值