2021-07-14

最新推荐文章于 2024-10-02 17:15:49 发布

m0_56305452

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量107

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_56305452/article/details/118736754

版权

H5学习的第二天，以下为一天所学内容的总结：

一、form表单

作用：用来收集用户的信息，

常用位置：用户的注册登录界面

语法：<form></form>

文本框：<input type="text">

密码框：<input type="password">

普通按钮：<input type="button" value="">

提交按钮：<input type="submit" value="">

重置按钮：<input type="reset" value="">

图片按钮：<input type="image" src="图片的地址（url）">

属性：

placeholder 提示信息 src 设置图片按钮的路径 value 给一个初始的值

普通按钮、提交按钮、重置按钮以及图片按钮的区别：

普通按钮只是单纯的点击作用；提交按钮可以提交页面的内容；

重置按钮起到清空内容的作用；图片按钮与普通一样，但是多了两个参数（为点击图片的位置）

form表单练习的代码及效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .dl {

            background-color: rgb(18, 34, 253);

            width: 600px;

            height: 50px;

            font-size: 20px;

            color: white;

            margin-left: 40%;

            margin-top: 20px;

        }

        .wj {

            width: 30px;

            margin-left: 40%;

        }

        .bian {

            border: white;

            font-size: 22px;

            margin-left: 25px;

            height: 55px;

            margin-top: 20px;

        }

        hr {

            width: 600px;

            color: snow;

            margin-left: 40%;

        }

        a{

            display: inline;

            font-size: 20px; 

            margin-left: 10px; 

            color: blue;

        }

    </style>

</head>

<body>

    <img src="img/logo.jpg" style="margin-left: 40%; width: 300px;">

    <form action="预习2.html">

        <img src="img/icon1.jpg" class="wj"><input type="text" placeholder="请输入用户名" class="bian"><br>

        <hr>

        <img src="img/icon2.jpg" class="wj"><input type="password" placeholder="请输入密码" class="bian"><br>

        <hr>

        <img src="img/icon3.jpg" class="wj"><input type="text" placeholder="请输入验证码" class="bian"><br>

        <hr>

        <p><img src="img/icon4.jpg" class="wj"><a href="http://www.baidu.com">忘记密码</a></p>

        <input type="submit" value="登录" class="dl">

    </form>

</body>

</html>

二、样式表的创建

1、行内样式语法：<div style="width:200px; height: 200px;">我是div</div>

2、内部样式语法及效果图：

3、外部样式的创建：

三、css样式的选择器

1、类型选择器

语法：标签名{属性：属性值} div{width: 200px;}

当统一改变某个标签的所有显示效果时使用

2、id选择器

语法：<标签名 id="box1"></标签名> #id名{属性（width）: 属性值（200px）;}

注：id选择器有唯一性，属性值只能是一个

3、class选择器

语法：<标签名 class="box"></标签名> .class名{属性（width）: 属性值（200px）;}

4、通配符选择器

语法：*{属性: 属性值;} 例： *{color: red;}

当想让所有的标签同时改变标签样式时使用

5、群组选择器

语法：标签名1，标签名2，标签名3{属性：属性值；}

div,p,h5{
width:500px;
height:500px;
background-color:pinl;
}

当及格元素的样式属性一样时可以使用，使用时元素之间用逗号分隔

四、css字体设置

调节字体大小：font-size

调节字体颜色：color

调节字体：font-family

设置文本水平居中：text-align

当height与line-height属性值相同时，文本垂直居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .top{
            width: 100%;
            height: 300px;
            background-color: pink;
        }
        .kou{
            height: 300px;
            color: blue;
            line-height: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="kou">扣丁学堂</div>
    </div>
</body>
</html>

五、背景颜色的调节：

backound-color: 想要调的颜色名称

六、综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            font-size: 30px;
            color: blue;
        }
        .yi{
            color: red;
        }
    </style>
</head>
<body>
    <img src="img/01.png" width="100%">
    <p>全部</p>
    <img src="img/03.png" width="70px">QQ浏览器
    <a href="预习3.html" class="yi"><img src="img/03.png" width="70px">我的千峰</a>
    <img src="img/03.png" width="70px">网页
    <img src="img/03.png" width="70px">技术
    <img src="img/03.png" width="70px">软件安装包
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            font-size: 30px;
            color: blue;
        }
        .yi{
            font-size: 30px;
            color: blue;
        }
        .two{
            color: red;
        }
    </style>
</head>
<body>
    <img src="img/01.png" width="100%">
    <p>
        <a  href="预习2.html" class="yi">全部</a>
        >
        <a href="#" class="yi">我的千锋</a>
    </p>
    <img src="img/04.png" width="70px">腾讯课堂
    <img src="img/05.png" width="70px">扣丁课堂
    <a href="预习4.html" class="two"><img src="img/06.png" width="70px">视频录制</a>
    <img src="img/07.png" width="70px">页面书写
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            font-size: 30px;
            color: blue;
        }
        .yi{
            font-size: 30px;
            color: blue;
        }
    </style>
</head>
<body>
    <img src="img/01.png" width="100%">
    <p>
        <a href="预习2.html" class="yi">全部</a>
        >
        <a href="预习3.html" class="yi">我的千锋</a>
        >
        <a href="#" class="yi">视频录制</a>
    </p>
    <img src="img/08.png" width="70px">纯CSS实现3D立体式字母切换效果
    <img src="img/09.png" width="70px">纯CSS3立体式3D鼠标悬停效果
    <img src="img/10.png" width="70px">纯CSS3模拟粪车转动效果
    <img src="img/11.png" width="70px">纯CSS抽屉式旺旺克服悬浮窗代码
</body>
</html>