Web前端(二 - 三)

发布于:2022-11-09 ⋅ 阅读:(12) ⋅ 点赞:(0) ⋅ 评论:(0)

1.电子汇款单

 

<!DOCTYPE html>
<html>
   <head>
	  <title>工商银行电子汇款单</title>
	  <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
	  <h1>工商银行电子汇款单</h1>
      <table border="1" cellpadding="0" cellspacing="0" style="width: 1100px">
             <tr>
             	<td colspan="2"><b>回单类型</b></td>
             	<td >网上转账汇款</td>
             	<td colspan="2"><b>指令序号</b></td>
             	<td >HQH0000000000000013878172</td>
             </tr>
             <tr>
             	<th rowspan="4" style="width: 20px">收款人</th>
             	<td style="width: 80px">户名</td>
             	<td>老牟</td>
             	<th rowspan="4" style="width: 20px">付款人</th>
             	<td style="width: 80px">户名</td>
             	<td>老刘</td>
             </tr>
             <tr>
                 <td><b>卡号</b></td>
                 <td>000000000001</td>
                 <td><b>卡号</b></td>
                 <td>000000000002</td>
             </tr>
             <tr>
                 <td>地区</td>
                 <td>南京</td>
                 <td>地区</td>
                 <td>杭州</td>
             </tr>
             <tr>
                 <td><b>网点</b></td>  
                 <td>工商江苏南京业务处理中心</td>
                 <td><b>网点</b></td>
                 <td>江苏徐州业务中心</td>
             </tr>
             <tr>
                 <td colspan="2"><b>币种</b></td>
                 <td>人民币</td>
                 <td colspan="2"><b>钞汇标志</b></td>
                 <td><u>钞票</u></td>
             </tr>
             <tr>
                 <td colspan="2"><b>金额</b></td>
                 <td>1.00元</td>
                 <td colspan="2"><b>手续费</b></td>
                 <td>0.57元</td>
             </tr>
             <tr>
                 <td colspan="2"><b>合计</b></td>
                 <td colspan="4">人民币(大写)壹元整</td>
             </tr>
             <tr>
                 <td colspan="2"><b>交易时间</b></td>
                 <td><i>2017年6月1日</i></td>
                 <td colspan="2"><b>时间戳</b></td>
                 <td><i>2017-06-01-13.00.0000000</i></td>
             </tr>
      </table>
             <div>票据打印时间:2017-06-01 15:00:12</div> 
             <div><del>票据打印单位:江苏徐州业务中心</del> </div>
             <div>操作员:大曾</div>
    </body>
</html>

2.用户注册页面

<!DOCTYPE html>
<html lang="zh">
<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>用户注册</title>
    <style>
        table{
            border: black 1px solid;
            border-spacing: 0px;
            border-collapse: collapse;
        }
        td{
            border: black 1px solid;
        }
        tr{
            border: black 1px solid;
        }
        label{
            float: right;
        }

    </style>
</head>
<body>
<form action="get" method="post">
    <table border="1" align="center" width="380">
        <tr>
            <td colspan="2" align="center">用户注册</td>
        </tr>

        <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username" size="15" maxlength="20"></td>
        </tr>

        <tr>
            <td><label for="password">密码</label></td>
            <td><input type="password" name="password" id="password" size="15" maxlength="20"></td>
        </tr>

        <tr>
            <td><label>性别</label></td>
            <td><input type="radio" name="gender" value="male"> 男
                <input type="radio" name="gender" value="female"> 女
            </td>
        </tr>

        <tr>
            <td><label for="hobby">爱好</label></td>
            <td><input type="checkbox" name="hobby">写作
                <input type="checkbox" name="hobby">听音乐
                <input type="checkbox" name="hobby">体育
            </td>
        </tr>

        <tr>
            <td><label for="province">省份</label></td>
            <td><select name="province">
                <option value="shanxi" >陕西省</option>
                <option value="sichuan">四川省</option>
                <option value="chongqing">重庆省</option>
            </select></td>
        </tr>

        <tr>
            <td><label for="self-introduction">自我介绍</label></td>
            <td><textarea name="intro"  cols="25" rows="5" >这个家伙什么也没有留下</textarea></td>
        </tr>

        <tr style="color: black;">
            <td colspan="2" align="center"><input type="submit" value="提交">
                <input type="reset" value="重置"></td>
        </tr>
    </table>
</form>
</body>
</html>

 


3.电影海报布局

<!DOCTYPE html>
<html lang="zh">
<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>爱影~影视</title>
    <style>
        #top{
            width: 700px;
            height: 50px;
        }
        #start{
            width: 700px;
            height: 50px;
            border-bottom: 1px solid gray;
            border-top: 1px solid gray;
        }
        li{
            display: inline-block;
        }
        ul{
            padding: 0;
            list-style-type: none;
            text-align: left;
        }
        #container{
            height: 450px;
            width: 700px;
        }
        #container div{
            padding-bottom: 30px;
            width: 170px;
            height: 200px;
            padding-top: 10px;;
            float: left;
        }
        span{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="top"><h2>热门电影板块</h2></div>
    <div id="start">
        <ul>
            <li><b>最近热门电影</b></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li>热门</li>&nbsp;&nbsp;
            <li>最新</li>&nbsp;&nbsp;
            <li>豆瓣高分</li>
            <li>冷门佳片</li>
            <li>华语</li>&nbsp;&nbsp;
            <li>欧美</li>&nbsp;&nbsp;
            <li>韩国</li>&nbsp;&nbsp;
            <li>日本</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li>更多>></li>
        </ul>
    </div>
    <div id="container">
        <div><a href="https://v.qq.com/x/cover/0acsv42yu5qvrz2/n0021e9iekg.html"><img src=".\img\1.png">猜火车</a></div>
        <div><a href="https://www.tvccc.org/play/149506_1_1.html"><img src=".\img\2.png">贝尔科实验</a></div>
        <div><a href="http://dilidili.in/mov/17026/1.html"><img src=".\img\3.png">加州公路巡警</a></div>
        <div><a href="https://www.tvccc.org/play/149547_1_1.html"><img src=".\img\4.png">歌声不绝</a></div>
        <div><a href="https://www.hanjudvd.com/5602/#"><img src=".\img\5.png">明日的我与昨日的你约会</a></div>
        <div><a href="http://dilidili.in/mov/15654/1.html"><img src=".\img\6.png">速度与激情8</a></div>
        <div><a href="https://v.qq.com/x/cover/nev83hz5bdaldok/u0022qbkp8o.html"><img src=".\img\7.png">极限特工</a></div>
        <div><a href="http://dilidili.in/mov/15765/1.html"><img src=".\img\8.png">金刚狼3:殊死一战</a></div>
    </div>
</body>
</html>

 


最近笔记整理:

alt:当图片不能正常显示时,现实的文本内容

title:当鼠标悬停在图片上会弹出的文字提示,如果alt本身没有赋值的话,那么alt=title

  • 音频标签和视频标签(audio,video)

    语法结构

    <audio src="资源路径" autoplay muted controls>
    <video src="资源路径" autoplay="autoplay" muted="muted" controls="muted">
    ​
    autoplay 自动播放 muted静音 controls显示操作页面

    audio和video在主流浏览器上不支持自动播放,video想要自动播放的话需要添加静音muted。

    布尔型属性:只要你将属性写出来,MAME它就默认为true,并且无法修改,除非移除属性。

3.5表格标签

表格通过table标签创建。其中包含的子标签有thead tbody tfoot tr tb

  • thead tbody tfoot:这三个属性可以进行分批显示表格 不至于完全加载才能显示。

  • 无论这三个标签的书写顺序如何,都会按照 头 躯干 尾 的顺序进行输出

table支持的属性有:

width/height:用于告知表格的宽高,可以具体像素输入,也能百分比输入

align:控制表格在页面中的位置,可以是center right left

  • 表格的合并

    rowspan:所填数字为要合并的单元格个数,并且是至上到下进行合并

    colspan:所填数字为要合并的单元格个数,并且是至左到右进行合并

3.6超链接标签

超链接标签是h5的重要组成部分之一,它通过超链接实现跳转其他网页的目的,超链接标签是a。

  • 文字超链接

    语法结构

    <a href="跳转的URL" target="跳转方式">显示的文字</a>

    target:如果不写,默认为self,将会通过自身选项卡进行加载页面,target如果是_blank将是一个新选项卡进行加载。

  • 锚链接

    制作网页时,如果网页巨长,可在顶部位置创建一个a标签让他绑定底部标签的id(#id)

    <a href="#foot">直达底部</a>
            <div align="center">
                <a href="https://www.baidu.com" target="_blank">点击跳转</a>
            </div>
            <div style="height: 2000px;border: 1px solid red;" id="top">
                
            </div>
            <div style="height: 2000px;border: 1px dotted blue;">
                
            </div>
            <div style="height: 2000px;border: 1px solid green;" id="foot">
                
            </div>
            <a href="#top">直达顶部</a>

  • 图片超链接

    <a href="https:\\www.baidu.com\" target="_blank">
                <img src="./img/李白.png" alt="李白">
    </a>

  • 热区超链接

    将一个图片分割为多个区域,这些区域可以使矩形,圆形,多边形等,通过点击不同位置进行跳转

    <a href="#">
                <img src="./img/李白.png" usemap="#map">
                <map name="" id="map">
                    <area shape="rect" coords="0,0,100,100" href="https:\\www.baidu.com\" alt="">
                    <area shape="circle" coords="100,50,50" href="https:\\www.baidu.com\" alt="">
                    <area shape="poly" coords="200,100,300,0,400,100" href="https:\\www.baidu.com\" alt="">
                </map>
    </a>

3.7表单标签

列表标签是用来进行数据提交的标签,是一种交互标签,这里我们学习三个表单标签

通过form标签可以创建一个表单,他有三个较重要的属性,

action它需要填入一个指向哪个服务器的URL,这个URL指向处理表单的接口函数

method:也就是http的请求方式,这里主要使用post与get。

input:最常用的输入标签,它有多种输入类型,详见代码

select:下拉框,multiple存在是,他是一个列表

textarea

<form action="#" method="get" enctype="multipart/form-data">
            用户注册<br/>
            用户名称:<input type="text" name="username"><br />
            用户密码:<input type="password" name="password" id="" value=""><br />
            用户性别:<input type="radio" name="sex" id="" value="1">男
            <input type="radio" name="sex" id="" value="2">女
            <input type="radio" name="sex" id="" value="0">跨性别<br />
            用户爱好:<input type="checkbox" name="fav" id="" value="">LOL
            <input type="checkbox" name="fav" id="" value="">王者荣耀
            <input type="checkbox" name="fav" id="" value="">PLMM/SQGG
            <input type="checkbox" name="fav" id="" value="">唱跳rap<br />
            用户邮箱:<input type="email"><br>
            头像:<input type="file"><br>
            <!-- <button>注册</button> -->
            <input type="submit">
            <br><hr>
            <input type="date">
            <input type="datetime-local"><br>
            <input type="url"><br>
            <input type="range" min="20" max="40" value="30"><br>
            <input type="color">
            <br><hr>
            <select name="爱好" id="" multiple>
                <option value="">LOL</option>
                <option value="">唱</option>
                <option value="">跳</option>
                <option value="">RAP</option>
            </select><br />
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </form>

第四章 层叠样式表css

Cascading style sheet 层叠样式表

语法结构

element/class/id{
​
    样式属性:值
}

4.1 CSS的几种写法

  • 行内样式(标签样式):写在标签内部

  • 内嵌样式(页面样式):他是写在style标签中的

  • 外部链接样式:他是通过link标签将已经写好的css文档引入当前网页中

  • import式:他是通过css提供的import功能进行导入的

import和link的区别

1.归属性区别:import属于css提供的,link是html自带的标签

2.加载顺序的区别:link会在页面加载时同时进行加载,而import会在页面加载完毕后进行加载。

3.兼容性区别:link是html自带的,所以不存在兼容性问题,而import是css2.1版本才提供的,对应IE 5.0以上的浏览器才能使用

4.使用DOM控制的区别:如果使用的是import,js代码是没有办法获取到css的相关数据,而link不存在此问题。

4.2 css的选择器

  • 基本选择器

    • 标签选择器

      标签 {
          css内容
      }
    • id选择器

      #id{
          样式内容
      }

    • class选择器

      .class{
          样式内容
      }

    • 通配符选择器

  • 包含选择器

    • 子代选择器:他只修饰某标签的下一级标签

      ol > li{样式内容}
      ​
      (标签/.类名/#id ...) > 标签 (当然,你也可以使用 标签/.类名/#id ... 但是没有必要)
      {样式内容}

    • 后代选择器:他修饰某标签的所有子标签

      ol li {样式内容}
      (标签/.类名/#id ...) (空格) 标签

    • 分组选择器:通过“,”可以同时创建多种选择器

      标签,.类名,#id ... {
      样式内容
      }
  • 属性选择器:属性选择可以根据元素的属性或者属性值来进行选取要修饰的元素

    [属性=值]
    [属性*=值]
    [属性^=值] 如果 属性的值 是以“值”开头的,那么
  • 伪类选择器

  • 他可以修饰同一个标签不同那个状态的样式

    :link 常规的链接样式
    :visited 点击过后的样式
    :hover 鼠标悬停的样式
    :active 鼠标点击中的样式