前端全栈学习第八天-H5

ゝ一世哀愁。 2021-09-17 23:54 401阅读 0赞

本来有一个京东项目需要些但是写了一部分，发现太多了，慢慢就学h5c3再单独写一个京东案例

1：html5新标签与特性

兼容性问题(ie9以上的版本)

常用新标签

header：定义文档的头部，页眉

nav：定义导航链接部分

footer：定义文档或节的底部，页脚

section：定义文档中的节（session,时区）

article：定义文章

aside：定义其所处内容之外的内容，侧边

2：新增表单

email：输入邮箱格式

tel ：输入手机号格式

url：输入ur格式

number：输入数字格式

search：搜索框

range：自由拖动滑块

time：小时分钟

date：年月日

datatime：时间

month：月年

week：周年

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>新增表单属性</title>
        <style>
            .box{
    			width: 700px;
    			border: 1px solid #000;
    			/*overflow:hidden;*/
    			margin:0 auto;
    		}
    		.box dl{
    			overflow:hidden;
    			margin:15px 5px;
    		}
    		.box dl dt, .box dl dd{
    			float: left;
    			
    		}
    		.box dl dt{
    width: 100px;			
    
    		}
    		.box dl dd{
    			width: 200px;
    		}
    	</style>
    </head>
    
    <body>
        <form action="">
        	<div class="box">
            <dl>
                <dt>邮箱</dt>
                <dd><input type="email"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt>常住地</dt>
                <dd><input type="text"></dd>
                <dd>*注册后不可更改</dd>
            </dl>
            <dl>
                <dt></dt>
                <dd><input type="submit" value="提交"></dd>
                <dd><input type="reset" value="重置"></dd>
            </dl>
        </div>
        
        </form>
    </body>
    
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

3：插入视屏，音频

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4][]

4：css3新增选择器

结构(位置)伪类选择器（css3）

：first-child:选取属于父元素的首个子元素的指定选择器

:last-chid

nth-child(第n个)  (even奇数，odd偶数，从0开始，但是本身是从1开始，所以这个o没什么卵用，还是从1开始)

属性选择器

div\[class\]  选出带有class属性的，div\[class='demo'\] 选出class=demo  div\[class^='demo'\]以demo开头的，$结束

伪元素选择器

定义：

伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。

## 语法 ##

伪元素以`::`开头。

在CSS1和CSS2中，伪元素和伪类一样，都是用`:`开头。但在CSS3中，伪元素以`::`开头，用以和伪类进行区分。

IE8不支持`::`。因此如果要兼容IE8，只能用`:`。

常见的伪元素

E::first-letter:文本的第一个字或单词

E:first-line:文本第一行

E::first-selection:可改变选中文本的样式

after，before

在当前元素的内容的后面，前面插入一个子元素。插入的元素为内联元素。

需要注意的是，使用::before时， 必须使用`content`来指定子元素的内容。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6][]

说到伪元素，不得不解释一下之前用伪元素清除浮动的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7][]

css3盒模型

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8][]

小米案例

鼠标经过显示三角

before是一个能插入元素的选择器

先看小米案例：

给一个图片，当鼠标经过的时候，会出现一个透明的边框，而且图片的大小不变，这时候图片的大小不变，还要有边框，自然就会出现缩放的效果

a：首先是给定一张图片，并且用盒子装上。

b:用伪元素给盒子插入一个边框。这边框是和图片框框的大小一样的，100%，100%，这个时候图片和边框都是行内快元素，会多行显示。这时候需要用定位把边框放在图片后面。有边框会将原来的的盒子撑开，这时候css3的属性box-sizing：border-box就起作用了，他会自动将边框的内容减去，边框这里有个妙用，可以将边框颜色弄成半透明的rgba().需要注意的是，子元素设置绝对定位，父元素要设置相对定位

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        div {
            width: 632px;
            height: 340px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
    
        div:hover::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 20px solid rgba(255, 255, 255, .5);
            box-sizing: border-box;
        }
        </style>
    </head>
    
    <body>
        <div class="">
            <img src="mi.jpg" alt="">
    	</div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 9][]

鼠标经过显示三角

这个案例就是用before伪元素是可以插入元素的选择器来做的

代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>鼠标经过显示三角</title>
        <style type="text/css">
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot');
            src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
                url('fonts/icomoon.woff') format('woff'),
                url('fonts/icomoon.ttf') format('truetype'),
                url('fonts/icomoon.svg#SofiaProLight') format('svg');
    
        }
    
        div {
            width: 300px;
            height: 20px;
            border: 1px solid black;
            margin: 100px auto;
            position: relative;
            font-family: 'icomoon';
    
            font-weight: normal;
    
        }
    
        div::before {
            content: "\e905";
            position: absolute;
            top: 5px;
            right: 5px;
        }
    
        div:hover {
            border: 1px solid red;
            /*color:red;*/
        }
    
        div:hover::before {
            color: red;
        }
        </style>
    </head>
    
    <body>
        <div>
        </div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 10][]

京东项目，后续会补上

1：轮播模块

2：tab栏切换模块

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/db61c389168043bfa26b3b96f100ae96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/f0ab8b017fdc4b87bb9150b912649cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/03c08facac60406bbd114d8ee97d361b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/9e56102877af49dd88c011088d835cdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210812/43a33430aeaf4e10aa5ae4db2fad080a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5]: /images/20210812/65c24f5d090b4c588ed8e61b8912e0c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6]: /images/20210812/e346ff67ea164d60875e236ca8f93a18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7]: /images/20210812/1d5b741cc99848bab8be90f624607957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8]: /images/20210812/5ac128a52b164200b9997ae2a91bd533.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 9]: /images/20210812/12904b5db75f4d2da93320e6fbbb681b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 10]: /images/20210812/9a2d3eb2b4434be5940d720e03d20de0.png