• 第二课 HTML+CSS


     

    HTML

    滚动字幕标签 <marquee>

    滚动

    属性 描述
    默认属性 字幕从右到左滚动,循环
    滚动
    hight 高度
    direction

    滚动的方向,

    值:left 向右; up 向上; down 向下;

    hspace 滚动的区域 
    width 宽度 
    behavior 

    值:slide 到达目的地后,停止滚动

          alternate  字幕来回循环滚动

    sctollamount 滚动的速度,值越大,滚动越快
    scrolldelay  停顿时间,毫秒

     

    <form></form>  表单

    表单传值(取值)方式:

    get:显性的传值,可在地址看到内容,适合传数据量小,和对安全系数没要求的。

    post:安全性相对get要高,无法在地址栏看到内容,可传数据量多,对安全性有要求的。

     重点:表单元素

    <form action="提交地址URL" method="提交方式:get或post">
      <table>
        <tr><td>button 普通按钮控件</td><td><input type="button" value="普通按钮"/></td></tr>
        <tr><td>reser 重围按钮控件</td><td><input type="reset"/></td></tr>
        <tr><td>submit 提交按钮控件</td><td><input type="submit"/></td></tr>
        <tr><td>image 图像按钮控件</td><td><input type="image" src="1.jpg" width="100" height="100" />用图像做成按钮效果,点击可提交表单。一般情况不建议使用此种方式</td></tr>
        <tr><td>checkbox 复选框控件</td><td><input type="checkbox"/>1<input type="checkbox"/>2<input type="checkbox"/>3</td></tr>
        <tr><td>radio 单选框控件</td><td><input type="radio" name="1"/>A<input type="radio" name="1"/>B</td></tr>
        <tr><td></td><td>请注意name用法,相同的name为一组</td></tr>
        <tr><td>text 文本输入控件</td><td><input type="text"/>这是一个单行的文本输入框</td></tr>
        <tr><td>textarea 多行文本输入标签</td><td><textarea <textarea rows="3" cols="20">这是一个标签,多行输入文本框</textarea>></td></tr>
        <tr><td>password 密码输入控件</td><td><input type="password"/>输入的密码,以●●替代</td></tr>
        <tr><td>file 文件上传控件</td><td><input type="file"/></td></tr>
      </table>
    </form
    >

    效果:

     

    CSS

    1、CSS是什么?

    叠层样式表。通俗的讲,是用来做网页外观的。

    2、样式的控制方法

    2-1、行内样式:

    <div>标签:块级元素

    style 属性:规定元素的行内样式,它的值是CSS属性和值,多个css属性和值用分号来分隔。

    在标签中,通过style 来规定此标签的样式。

     <div style="height:100px; 100px; border:solid 1px #609;"></div> 

    2-2、内嵌式:

    2-2-1、通过标签式的选择器,来定义整个页面内,此标签的样式。

    1.标签选择器:
    此例题用的标签是:div

    <
    head> <title>无标题文档</title> <style type="text/css"> div { width:100px; height:100px; border:solid 1px #F00; } </style> </head> <body> <div></div> </body> </html>

    在body中的div标签,它用的样式通过head中的style来定义,注意写法,它定义的是整个页面的div,都用这个样式。

    2-2-2、class 属性

    规定规定元素的类名,也可规定指向样式表中的类

    <head>
    <title>无标题文档</title>
    <style type="text/css">
    div
    {
        width:100px;
        height:100px;
        border:solid 1px #000;
        color:#30F
    }
    .c1
    {
        color:#F00
    }
    .c2
    {
        color:#F0F
    }
    </style>
    </head>
    
    <body>
    <div>你你你你你</div>
    <div class="c1">你你你你你 C1</div>
    <p class="c2">其它标签同样可以调用 C2</p>
    <p class="c1 c2">C2的颜色把C1给覆盖,C1 C2</p>
    </body>
    </html>

    效果:

    注意:优先级,class要优先于标签选择器。
    在定义时,前面要加上符号"."

     2-2-3、id 属性

    调用方法与CLASS类同,定义时,前面使用符号“#

    注意优先级,ID>CLASS>标签选择器

    并且一个页面中,ID只能有一个,不能重复,也不能多次调用。

    2-3、链接式:

    把HTML与CSS分开不同的文件。

    知识点:标签的继承性(请注意),留意视频视频课程。

    HTML 文件
    注意<link>标签
    通过link来调用css样式文件
    href : CSS 样式文件的路径
    <head>
    <title>无标题文档</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    </head>
    
    <body>
    <div>你你你你你</div>
    <div class="c1">你你你你你 C1</div>
    <p class="c2">其它标签同样可以调用 C2</p>
    <p class="c1 c2">C2的颜色把C1给覆盖,C1 C2</p>
    </body>
    </html>
    CSS文件
    写法与前面相同

    div
    { width:100px; height:100px; border:solid 1px #000; color:#30F } .c1 { color:#F00 } .c2 { color:#F0F }

    3、字体样式

    CSS文字效果

    { font-size:24px; /* 字体大小 */ font-family:"宋体"; /* 字体 留意系统字库*/ font-weight:500; /* 加粗 */ color:"red"; /* 颜色 */ decoration:underline; /* 下划线 */ decoration:overline; /* 顶划线 */ decoration:line-through; /* 删除线 *
    }
    {
    transform:capitalize;              /* 单词首字大写*/
    transform:uppercase;               /* 全部大写*/
    transform:lowercase;               /* 全部小写*/
    letter-spacing:10px;              /* 默认为normal */
    text-align:center;                 /* 文本水平居中 */
    text-align:Left;                   /* 文本水平居右 */
    text-align:right;                  /* 文本居左 */
    line-height:100px;                 /* 文本垂直高度 */
    }

    1111

  • 相关阅读:
    工厂对象模式简介
    (转)HelloWorld CMake CMake中构建静态库与动态库及其使用
    C和C++混合编程
    Google glog 使用
    VS2013 越来越慢
    shell 的语法
    (十二)命令模式详解(故事版)
    (十一)外观模式详解(Service第三者插足,让action与dao分手)
    (十)装饰器模式详解(与IO不解的情缘)
    (九)模板方法模式详解(包含与类加载器不得不说的故事)
  • 原文地址:https://www.cnblogs.com/malagao-facebook/p/4823219.html
Copyright © 2020-2023  润新知