2018-08-14 day02 常用标签和css

2018-08-14 本文已影响0人 Kris_Shin

表单标签

1.可以提交表单中收集的信息

action属性:设置提交信息的位置
method属性：提交方式 - post/get

<form action="" method="get">

input标签（单标签） -- text(文本输入框)

1.是表单标签
2.type属性：
- text - 普通的文本输入框
3.name属性: 必须设置（a.用于提交信息）
4.value属性: 标签内容
5.placeholder属性:占位符（提示信息）
6.maxlength: 输入框最多能输入的字符个数
7.readonly:readonly - 输入框只读(不能往里面输入内容)

    <input type='text' name="username" value="" readonly="readonly" placeholder="请输入手机号" maxlength="11"/>

input标签- 密码输入框

1.type属性: password --- 输入的值是密文显示

    <input type="password" name="password" value=""  placeholder="密码" />

input标签：单选按钮

1.type属性：radio
2.name: 同一类型对应的name值必须一样
3.value：设置选中按钮提交的值
4.checked: 设置为checked，让按钮默认处于选中状态

    <input type="radio" name="sex" id="" value="boy" checked="checked"/><span>男</span>
    <input type="radio" name="sex" id="" value="gril" /><span>女</span>

input标签:多选按钮

1.type：checkbox
2.name：同一类型对应的name值必须一样
3.value：设置选中按钮提交的值
4.checked: 设置为checked，让按钮默认处于选中状态

    <input type="checkbox" name="interest" id="" value="篮球" /><span>篮球</span>
    <input type="checkbox" name="interest" checked="checked" id="" value="乒乓球" /><span>乒乓球</span>
    <input type="checkbox" name="interest" id="" value="看电影" /><span>看电影</span>
    <input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>
    <input type="checkbox" name="interest" id="" value="游泳" /><span>旅游</span>

input标签：普通按钮

disabled:disabled - 让按钮不能点击

    <input type="button" name="" id="" value="登录" disabled="disabled"/>

input标签：重置按钮

让当前所在的form中的所有表单相关标签对应的值，回到最初的状态

    <input type="reset" name="" id="" value="重置全部" />

input标签:文件选择器

<input type="file" name="icon" id="icon" value="" />

<input type="submit" name="" id="" value="提交" />

表单标签

fieldset：

一个fieldset标签对应一个表单分组
legend标签：设置分组名

<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="username" id="username" value="" placeholder="用户名" />
<input type="password" name="username" id="username" value="" placeholder="密码" />
<input type="reset" name="" id="" value="重置1" />

</fieldset>

<fieldset id="">
<legend>反馈信息</legend>

1.下拉菜单

<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="大连">大连</option>

selected:设置默认选中

<option value="青岛" selected="selected">青岛</option>
</select>

2.多行文本域(多行文本输入框)

<textarea name="message" rows="2" cols="100" placeholder="请输入意见..." maxlength="200">上次没有发送信息</textarea>
<input type="reset" name="" id="" value="重置2" />
</fieldset>

<input type="submit" name="" id="" value="提交" />

空白标签

html中标签分为两大类：

1.块级标签：一行只能有一个(不管标签的宽度是多少)h1-h6, p, hr, 列表标签，table, form,
2.行内标签：一行可以有多个a, img, input,下拉列表(select), textarea

div标签，是空白标签，没有任何特殊的意义(无语义标签)

    <div style="background-color: red; width: 100px;">
        我是div1 <br />
        我是div111
    </div>
    <span style="background-color: royalblue;">
        我是span4
    </span>
    <div style="background-color: yellow; width: 90px;">
        我是div2
    </div>
    <div style="background-color: palevioletred; width: 120px;">
        我是div3
    </div>
    
    <span style="background-color: green;">
        我是span
    </span>
    <span style="background-color: gold;">
        我是span2
    </span>
    <span style="background-color: greenyellow;">
        我是span3
    </span>
    <span style="background-color: royalblue;">
        我是span4
    </span>

CSS基础

1.什么是CSS

CSS是web标准中的表现标准，用设置网页上的标签的样式（长什么样，在哪儿）
CSS代码/CSS文件，我们叫样式表
目前我们使用的是CSS3。

2.写在哪儿

内联样式表：将css代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联
优先级: 内联的优先级最高；内部和外部没有绝对优先，主要看同一个属性谁最后赋值，谁就有效

3.怎么写(CSS语法)

选择器{属性:属性值; 属性：属性值;}
选择器：用来选中需要设置样式的标签
属性：css属性（css2中的属性有两百多个）
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要使用分号隔开，否则属性无效

补充属性: color: 设置字体颜色 background-color:设置背景颜色 width：标签的宽度 height：标签的高度

伪类选择器

选择器:状态

link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态
visited: 超链接访问后的状态 --- 已经访问成功后的状态
hover: 鼠标悬停在标签上对应的状态
active：鼠标按住的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)
LoVe HAte

<style type="text/css">
    /*同时设置a标签的所有状态*/
    a{
        color: black;
    }
    
    a:link{
        color: green;
    }
    a:visited{
        color: pink;
    }
    
    a:hover{
        color: red;
        font-size: 40px;
    }
    
    
    a:active{
        color: yellow;
    }
    
    
    #d1{
        width: 300px;
        height: 100px;
        background: green;
    }
    
    #d1:hover{
        background-color: greenyellow;
        
    }
    
    
</style>

作业

case.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css.css">
    <title>Case</title>
</head>

<body>
    <div id="loginBox">
        <form action="case.html">
            <img id="qrImg" src="qr.png">
            <h2>密码登录</h2>
            <div class="inputDiv"><img class="inputImg" src="act.png"><input class="inputBox" type="text" placeholder="请输入用户名/手机号/邮箱">                </div>
            <div class="inputDiv"><img class="inputImg" src="pwd.png"><input type="password" class="inputBox" placeholder="请输入密码"></div>
            <div><input id="loginBtn" type="button" value="登 录"></div>
            <div id="wbLogin"><img class="lgImg" src="wb.png"><span>微博登陆</span></div>
            <div id="zhiLogin"><img class="lgImg" src="zhi.png"><span>支付宝登陆</span></div>
            <div id="otherSelect">
                <a href="case.html">忘记密码</a>
                <a href="case.html">忘记会员名</a>
                <a href="case.html">免费注册</a>
            </div>
        </form>
    </div>
</body>

</html>

css.css

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position-y: 150px;
}

#loginBox {
    margin-top: 250px;
    margin-left: 65%;
    height: 400px;
    width: 360px;
    background-color: rgba(255, 255, 255, 0.88);
}

#qrImg {
    float: right;
}

h2 {
    float: left;
    margin-top: 30px;
    margin-left: 40px;
    margin-right: 18px;
}

.inputDiv {
    float: left;
    background-color: rgb(221, 221, 221);
    margin-top: 25px;
    margin-left: 12%;
    margin-right: 10%;
    width: 270px;
    height: 54px;
}

.inputBox {
    float: right;
    border: none;
    margin: 2px 2px 2px 0px;
    width: 220px;
    height: 48px;
    font-size: 16px;
}

.inputImg {
    margin: 14px 10px 0px 15px;
}

#loginBtn {
    border: none;
    border-radius: 8px;
    background-color: rgb(250, 82, 21);
    font-size: 18px;
    color: whitesmoke;
    margin-top: 25px;
    margin-left: 12%;
    width: 270px;
    height: 48px;
    cursor: pointer;
}

#loginBtn:hover{
    background-color: rgb(238, 55, 10)
}

#wbLogin {
    float: left;
    margin: 20px 10px 0px 11%;
}
#zhiLogin{
    margin: 20px 10px 0px 0px;
}
.lgImg{
    margin-bottom:-3px; 
}
span{
    margin-left:3px;
    font-size: 13px;
    color: grey;
}
#otherSelect a{
    text-decoration: none;
    font-size: 13px;
    color: grey;
    float: right;
    margin: 15px 10px 20px 0px;
}
#otherSelect{
    margin-right: 35px;
}

最终效果:

image.png

2018-08-14 day02 常用标签和css

表单标签

1.可以提交表单中收集的信息

input标签（单标签） -- text(文本输入框)

input标签- 密码输入框

input标签：单选按钮

input标签:多选按钮

input标签：普通按钮

input标签：重置按钮

input标签:文件选择器

表单标签

fieldset：

1.下拉菜单

selected:设置默认选中

2.多行文本域(多行文本输入框)

空白标签

html中标签分为两大类：

CSS基础

1.什么是CSS

2.写在哪儿

3.怎么写(CSS语法)

伪类选择器

选择器:状态

作业

最终效果:

猜你喜欢

热点阅读