JAVA学习总结十八_java uma图-CSDN博客

本文链接：https://blog.csdn.net/m19851117/article/details/51713190

第二章表单及CSS应用

meta标签

<meta name="KEYWords" content+"">向搜索引擎说明你的网页的关键词；
-<meta name="DEscription" content="">告诉搜索引擎你的站点的主要内容；
<meta charset="UTF-8"/>设置网页编码集
<meta http-equiv="Refresh" content="n;url=http://yourlink">定时让网页在制定的时间n内，跳转到页面http://yourlink；

表单元素

input

text 文本框
password 密码框
radio 单选框
checkbox 复选框
hidden 隐藏表单
file 文件表单
submit 提交按钮
reset 重置按钮
image 图片提交按钮
button 命令按钮

select

下拉框，列表框（multiple）

textArea 多行文本

什么是CSS

CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种个格式化网页内容的技术。

添加样式表

内联式：直接在元素中加入style属性，只能用于网页中的一个元素
<div style="border:1px solid #000;width:300px;height:200px"></div>
嵌入式：书写style标签，在标签中指明样式。可以用于网页中的不同元素。
<style> div{ width:300px; height:200px; background-color:yellow; border:2px solid #000; } </style>
外联式：将样式规则书写到文件中，可以用于不同的网页，重用度最好。
<link rel="stylesheet"href="abc.css">

注意：层叠样式表的含义是：如果有多个规则来描述同一个元素，那么会根据样式表的优先级，来决定最终显示什么样式。

对于导入css方式的优先级：内联式>嵌入式>外联式(嵌入式和外联式由所在行数越大的那个覆盖所在位置行数较小的那个)

css选择器

元素选择器 div：利用元素的标签名称作用选择范围。div{}表示所有div元素均采用该样式。h1,h2{}表示所有的h1标签和h2标签均采用该样式。
类选择器 .：利用元素的class属性来引入类选择器的样式。可以用于多种元素。同一种元素也可以选择性使用。
.mm{} <div class="mm"></div>
ID选择器 #：让拥有该ID属性的元素采用该样式。
<p id="p1"></p> #p1{} id号位p1的元素采用该样式
包含选择器：元素内的子元素采用该样式。
div id="mydiv"></div> #mydiv span{} id号为mydiv元素中所有的span标签采用该样式 div .aaa{}表示所有的div中，class属性为aaa的元素采用该样式
通配符 *：所有的元素均采用该样式。
#oneDiv *{} 表示id为oneDiv中，所有的元素均采用该样式。
伪类选择器：执行完某个动作的元素采用该样式。
`#data tr:hover{} 表示鼠标悬停在id为data下的tr元素时，采用该样式。

CSS属性单位

颜色单位：
使用0-255之间的整数值来设置，如 color：rgb（128,0,128）；
使用十六进制数组定义颜色，如 #fc0eab；
为颜色取名：aqua，black，blue，fuchsia，gray，green等。

布局属性

margin属性：

margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性，分别表示盒模型里内容里边框的距离。
水平盒子的间距为两个盒子间距的和；
垂直盒子的间距为两个盒子间距的较大值；
margin值可以设置为负值

padding属性：

padding属性用来描述和模型的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，属性名称包括padding-top、padding-right、padding-bottom、padding-left、padding；
margin是当前元素和border的距离；padding是内容和border的距离
margin是对外的，padding是对内的；
margin只对块级元素有效。padding对所有元素都有效。

理解CSS 盒模型

在盒模型中，我们可以控制四个不同的分层属性：

内容：元素中的内容；
外边距：代表元素外边的空间，这个控件将元素相互分开。
边框：位于元素的边距内和元素的边框距外之间的可配置的线；
内边距：元素内容和元素边框之间的空间。

注意：盒模型均可以用“上右下左”方式设置。如果仅给出两个或三个值，那么缺失边的属性值取与对边相同的值

标准文档流

所谓标准流，就是指在不使用其他与排列和定位相关的特殊css规则时，各种元素的排列规则。

文本元素按照从上到下、从左到右的格式布局；
块级元素按照从上到下依次排列；
内嵌元素按照从左到右依次排列。

定位属性

display:none和visibility:hidden的区别

这两个样式都可以隐藏元素。
display:none元素看不见，同时元素不占用位置。
visibility:hidden元素看不见，但元素会占用位置。

内嵌元素和块级元素的相互转换

内嵌元素—->块级元素 display：block
块级元素—->内嵌元素 float:left

表单代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单测试</title>
</head>
<body>
    <h1>注册</h1>
    <!--action表示表单提交后，处理该表单信息服务器的URL地址-->
    <form action="http://www.baidu.com" method="get" style="width: 500px;height: 400px">
        <fieldset>
            <legend>注册用户</legend>
            <!--文本框 placeholder表示文本框提示消息-->
            姓名：<input type="text"name="userName"id="abc" placeholder="请输入姓名"><br>
            小名：<input type="text"name="myName" readonly><br>
            <!--密码框-->
            密码：<input type="password"name="pwd" placeholder="请输入密码"><br>
            <!--单选框 name属性要一致，才能完成互斥.男和女只是显示文本，而提交给服务器的是value选中的哪个单选框，就提交哪个单选框的值。checked设置默认选中的单选框-->
            性别：<input type="radio" name="sex" value="man" checked>男
                 <input type="radio" name="sex" value="women">女<br>
            <!--复选框，提交时，会将多个选中复选框的value值提交给服务器-->
            爱好：<input type="checkbox"name="like"value="sport" checked>体育
                 <input type="checkbox"name="like"value="draw" >美术
                 <input type="checkbox"name="like"value="music">音乐<br>
            <!--隐藏表单，页面上不显示，但表单提交后，隐藏表单的值，会提交给服务器-->
            <input type="hidden"name="id"value="3">
            头像：<input type="file"name="head"><br>
            <!--下拉框，option为选项，option中间的内容为显示文本。value为提交给服务器的数据-->
            学历：<select name="edu">
                   <option value="gz">高中</option>
                   <option value="dz">大专</option>
                   <option value="bk" selected>本科</option>
                 </select> <br> <br>
            <!--列表框，可以同时选中多个选项，提交时，会将选中项的value提交给服务器-->
            参会人员：<select name="man" multiple>
                        <option value="1">张三</option>
                        <option value="2">李四</option>
                        <option value="3">王五</option>
                   </select> <br>
            <!--多行文本-->
            简介:<textarea name="info" cols="20" rows="10"></textarea> <br>



            <!--提交按钮-->
            <input type="submit" value="提交"><br>
            <!--重置按钮，将表单还原成初始值-->
            <input type="reset"value="重置">
            <!--图片表单，作用和提交按钮一致，都可以提交表单。但是图片表单可以以图片方式显示-->
            <input type="image"src="../image/Winter.jpg"width="100"height="90"> <br>
            <!--命令按钮，一般用于执行一段JS脚本代码-->
            <input type="button"value="点击" disabled>



        </fieldset>

    </form>

</body>
</html>

CSS代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   <!--嵌入式样式表的几种样式选择器-->
    <style>
       <!--类选择器-->
     .img{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-size: 200px  200px;
            float: left;/*左漂移*/
        }
    <!--ID选择器的鼠标悬停事件-->
        #gy:hover{
            border: 2px solid red;
            background-image:url("../../image/Blue%20hills.jpg");
            color: fuchsia;
        }
        #zf:hover{
            border: 2px solid red;
            background-image:url("../../image/Sunset.jpg");
            color: fuchsia;
        }
        #cw:hover{
            border: 2px solid red;
            background-image:url("../../image/Water%20lilies.jpg");
            color: fuchsia;
        }
        #testDiv{
            width: 80px;
            height: 20px;
            border: 1px solid #000;
            clear:left;/*清除前一个元素的漂移，对后一个元素的影响*/
            font-style: italic;  /*斜体*/
            font-weight: bold;   /*粗体*/
            font-family: "隶书";  /*字体类型*/
            text-align: center;  /*文字对齐方式，默认居左*/
        }
         #repeatDiv{
             background-image: url("../../image/Sunset.jpg");
             width: 500px;
             height: 400px;
             background-repeat: repeat-y;/*背景图平铺方式*/
             background-position: 100px 100px; /*背景图起始位置*/
             border：1px solid #000;
         }

         #userName{
             background-image: url("../../image/Blue%20hills.jpg");
             background-repeat: no-repeat;
             background-position: 120px 0px;
             background-size: 20px 20px;

         }
            #underDiv{
                border: 2px solid red;
                width:200px;
                height: 200px;
                clear: left;

            }






    </style>
</head>
<body>
    <div class="img" id="gy" style="margin-right: 10px">
        <h1>关羽</h1>

    </div>
    <div class="img" id="zf" style="margin-right: 10px">

        <h1>张飞</h1>

    </div>
    <div class="img" id="cw" style="margin-right: 10px">

        <h1>醇围</h1>
    </div>

    <div id="underDiv">

    </div>







    <div id="testDiv">哈哈哈</div>
    <!--letter-spacing改变字与字之间的间距-->
    <span style="letter-spacing: 10px">北国风光，千里冰封，万里雪飘，望长城内外</span>
    <!--text-decoration: line-through 删除线
    text-decoration: underline 下划线
    text-decoration: overline 上划线-->
    <span style="text-decoration: line-through;text-shadow: 2px 2px 2px red">三姑茅台</span>

    <div id="repeatDiv">

    </div>

    <input type="text"id="userName">
     <!--padding可以为四个方向同时设置值，顺序为：上，右，下，左-->
     <div style="background-color: yellow;width: 500px;height: 500px;
        padding: 20px 0px 0px 0px;border-radius: 20px">
           <div style="background-color: red;width: 200px;height: 200px;
           margin-left: 20px;padding-top: 30px; ">
               fdsafdsa
           </div>
     </div>

      <!--border-radius圆角边框-->
      <div style="border: 1px solid #000;
      border-radius: 30px;width: 30px;height:30px;text-algn:center"></div>

      <div style="width: 200px;height: 200px;background-color: yellow">
          <!--相对于元素现在位置，定位元素-->
          <span style="position: relative;left: 30px;top: -20px">abc</span>
          <span>cde</span>

      </div>
       <!--position:absolute;绝对定位，如果父元素没有定位，那么相对浏览器定位。会脱离文档流-->
       <div style="background-color: #ffd700;position: fixed;left: 10px;
       top: 30px;width: 100px;height: 100px">浮动DIV</div>