前端基础之CSS

时间：2020-01-04 20:34:36 阅读：107 评论：0 收藏：0 [点我收藏+]

标签：mtk user set 样式 box http 个人简介 chm put

前端基础之CSS
- form表
  - 以注册功能为例
  - 验证form表单提交数据
- CSS
  - css注释
  - css学习流程

前端基础之CSS

form表

以注册功能为例

label标签配合input一起使用的

input标签

input标签
    type属性
        text  文本
        password  密文
        date     日期
        radio    多选一
        checkbox  多选多
        checked默认选中
        file     文件

按钮组标签

按钮组
        reset   重置
        button  普通按钮
        submit  触发form表单提交的动作

select标签下拉框

默认是单选的 也可以变成多选 mutiple
option就是一个个的选项

textarea  获取大段文本

注意事项

1.获取用户输入的标签 都是用value属性来存放用户的输入
获取用户输入的标签都应该有name属性  就类似于字典的key
value属性就类似于字典的value
2.如何给input设置默认
可以直接给input标签加value属性
3.input框如何设置提示信息
username:<input type="text" value="jason" placeholder="用户名">

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://127.0.0.1:8881/index"method="post" enctype="multipart/form-data">
    <p>username:<input type="text" placeholder="用户名" name = "username" ></p>
    <p>password:<input type="password" placeholder="password" name="password"></p>
    <p>date :<input type="date" placeholder="日期" name="birth"></p>
    <p>e
        gender:
        男<input type="radio" name="gender" value="male" >
        女<input type="radio" name="gender" value="female">
    </p>
    <p>hobby:
        篮球<input type="checkbox" name="hobby" value="basketball">
        足球<input type="checkbox" name="hobby" value="soccerball">
        双色球<input type="checkbox" name="hobby" value="doublecolorball">
    </p>
    <p>女友:
        <select name="lj" id="" multiple>
            <option value="ming">明老师</option>
            <option value="c">苍老师</option>
            <option value="t">tank老师</option>
            <option value="s">sean老师</option>
        </select>


    </p>
    <p>省份:
        <select name="province" id="">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </p>
    <p>个人简介:
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>
    <p>文件:
        <input type="file" name="myfile">
    </p>
    <input type="submit" value="提交">
</form>
</body>
</html>

效果：

技术图片

分解：

技术图片

验证form表单提交数据

代码

from flask import Flask, request

app = Flask(__name__)

@app.route('/index',methods=['GET','POST'])
def xxx():
    print(request.form)  # 获取普通数据
    print(request.files)
    file_obj = request.files.get('myfile')
    file_obj.save('xxx.png')
    return "OK"


app.run()

后端框架

后端框架
            Django
            
            Flask
            
            Tornado

Flask框架

pip3 install Flask

get请求能够携带参数 但是参数的携带方式是直接跟在url后面的
        url?xxx=ooo&yyy=bbb&lll=ccc

特点

            1.数据全是明文
            2.数据大小有限制   大概应该可能在4KB左右吧...
            3.get请求不应该携带隐私信息

CSS

层叠样式表   就是用来调节标签的样式

css注释

        /*注释*/
        /*
        注释1
        注释2
        注释3
        */

css语法结构

选择器 {属性名:属性值;属性名1:属性值1;属性名2:属性值2;}

css三种引入方式

    1.外部css文件(最正规的书写方式)
    2.head内style标签内部直接书写css代码(为了教学方便可以使用这种)
    3.标签内部通过style属性直接书写对应的样式(不推荐)

第一种

技术图片

效果：

技术图片

第二种

技术图片

效果

技术图片

第三种

技术图片

效果

技术图片

css学习流程

如何查找标签

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 元素选择器*/
        /*div {  !*将页面上所有的div标签内部的文本变成红色*!*/
        /*    color: red;*/
        /*}*/

        /*类选择器     点号*/
        /*.c1 {  !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
        /*    color:blue;*/
        /*}*/

        /*id选择器     #号*/
        /*#d1 {  !*将id为d1的标签内部文本内容改成绿色*!*/
        /*    color: green;*/
        /*}*/


        /*通用选择器   *号*/
        * {  /*页面上所有的标签统一修改样式*/
            color: aqua;
        }
    </style>
</head>
<body>
<div class="c1">老板你好 我是23号技师 很高兴为您服务
    <span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>老板你好 我是23号技师 很高兴为您服务</div>
<span class="c1">珊珊出来接待一下</span>
<p>来宾三位 楼上请</p>
<span id="d2">珊珊出来接待一下</span>
</body>
</html>

技术图片

效果

技术图片

/标签选择器元素选择器/

 /*标签选择器 元素选择器*/
        /*div {  !*将页面上所有的div标签内部的文本变成红色*!*/
        /*    color: red;*/
        /*}*/

技术图片

效果

技术图片

类选择器点号 .c1

 /*类选择器     点号*/
        /*.c1 {  !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
        /*    color:blue;*/
        /*}*/

技术图片

效果：

技术图片

id选择器 #号*

/*id选择器     #号*/
        /*#d1 {  !*将id为d1的标签内部文本内容改成绿色*!*/
        /*    color: green;*/
        /*}*/

技术图片

效果

技术图片

通用选择器 *号

 /*通用选择器   *号*/
        * {  /*页面上所有的标签统一修改样式*/
            color: aqua;
        }

技术图片

效果

技术图片

组合选择器

技术图片

效果

技术图片

/后代选择器/

/*后代选择器*/
        /*div span {  !*空格表示div内部的span没有层级限制*!*/
        /*    color: red;*/
        /*}*/

技术图片

 <style>
         /*后代选择器*/
        div span {  /*空格表示div内部的span没有层级限制*/
            color: red;
        }

效果

技术图片

/* 儿子选择器 */

/* 儿子选择器 */
div > span {  /*>表示div内部的儿子*/
            color: green;
        }

技术图片

/* 毗邻选择器 */

 /* 毗邻选择器 */
    div + span {  /*紧挨着的下一个标签*/
            color: red;
        }

技术图片

/* 弟弟选择器 */

技术图片

效果：

技术图片

属性选择器

所有的标签都可以有默认的属性
                    id
                    class
标签还可以有自定义的属性 并且可以有多个
                    <input type="text" username="jason" xxx="ooo">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">数据库的刷卡机大卡司</p>
<div username="oscar">奥斯卡件打开拉随机端口两三点</div>
<span username="jason">奥斯卡件打开拉随机端口两三点</span>
</body>
</html>

效果

技术图片

属性选择器 []

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器 [] */
        [username] {  /*找到页面上所有具有username属性名的标签*/
            background-color: deeppink;
        }


    </style>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">数据库的刷卡机大卡司</p>
<div username="oscar">奥斯卡件打开拉随机端口两三点</div>
<span username="jason">奥斯卡件打开拉随机端口两三点</span>
</body>
</html>

技术图片

效果

技术图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBFs1k24-1577359342873)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577354973855.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4lklGbw-1577359342873)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577354913623.png)]

技术图片

分组与嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 元素选择器*/
        /*div {  !*将页面上所有的div标签内部的文本变成红色*!*/
        /*    color: red;*/
        /*}*/

        /*类选择器     点号*/
        /*.c1 {  !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
        /*    color:blue;*/
        /*}*/

        /*id选择器     #号*/
        /*#d1 {  !*将id为d1的标签内部文本内容改成绿色*!*/
        /*    color: green;*/
        /*}*/


        /*通用选择器   *号*/
        /** {  !*页面上所有的标签统一修改样式*!*/
        /*    color: aqua;*/
        /*}*/
    </style>
</head>
<body>
<div class="c1">老板你好 我是23号技师 很高兴为您服务
    <span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>老板你好 我是23号技师 很高兴为您服务</div>
<span class="c1">珊珊出来接待一下</span>
<p>来宾三位 楼上请</p>
<span id="d2">珊珊出来接待一下</span>
</body>
</html>

技术图片

指定字段红色 div

技术图片

效果

技术图片

指定字段 p 为红色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5UinRAc-1577359342876)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577355574199.png)]

技术图片

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seXj9KgE-1577359342877)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577355628903.png)]

指定字段为红色

技术图片

效果

技术图片

div p span 全部为绿色

技术图片

效果

技术图片

指定 .c1 ,#d1,p 为红色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59rexFYO-1577359342880)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577356003963.png)]

技术图片

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzS9iLrz-1577359342880)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577355992480.png)]

指定c1属性值的标签后代的 h1为绿色

技术图片

效果

技术图片

伪装选择器

a链接标签
    a标签默认的颜色是蓝色 但是只要你点过一次 就会变成紫色 浏览器会记住你有没有点过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*a:link {*/
        /*    color: aqua;*/

        /*}*/

        /*a:hover {  !*鼠标悬浮*!*/
        /*    color: black;*/
        /*}*/
        /*a:active {*/
        /*    color: green;*/
        /*}*/
        /*a:visited {*/
        /*    color: gray;*/
        /*}*/
        /*input:focus {*/
        /*    background-color: red;*/
        /*}*/
    </style>
</head>
<body>
<a href="https://www.mzitu.com">点我1</a>
<a href="https://www.luffycity.com">点我2</a>
<a href="https://www.sogo.com">点我2</a>
<a href="https://www.sajdkasd.com">点我2</a>

<input type="text">
</body>
</html>

技术图片

效果

技术图片

a:link

 a:link {
            color: aqua;

        }

技术图片

效果

技术图片

a:hover

 a:hover {  /*鼠标悬浮*/
            color: black;
        }

技术图片

效果

技术图片

a:active

  a:active {
            color: green;
        }

技术图片

a:visited

 a:visited {
            color: gray;
        }

技术图片

效果：

技术图片

input:focus

input:focus {
            background-color: red;
        }

技术图片

效果：

技术图片

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter {
            color: red;
            font-size: 48px;
        }
        p:before {
            content: '你好啊';
            color: red;
        }
        p:after {
            content: '?';
            color: blue;
        }
    </style>
</head>
<body>
<p>大家啊上课登记卡圣诞快乐撒娇的空间sad健身卡大的萨达</p>
</body>
</html>

技术图片

p:first-letter

        p:first-letter {
            color: red;
            font-size: 48px;
        }

分解：

技术图片

p:before

红色的字体选种或点击不了

p:before {
            content: '你好啊';
            color: red;
        }

技术图片

p:after 是指定的符号变颜色

p:after {
            content: '?';
            color: blue;
        }

技术图片

效果

技术图片

前端基础之CSS

标签：mtk user set 样式 box http 个人简介 chm put

原文地址：https://www.cnblogs.com/WQ577098649/p/12150132.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

前端基础之CSS

前端基础之CSS

form表

以注册功能为例

input标签

按钮组标签

select标签 下拉框

注意事项

代码

效果：

分解：

验证form表单提交数据

后端框架

Flask框架

特点

CSS

css注释

css语法结构

css三种引入方式

第一种

第二种

第三种

css学习流程

基本选择器

/标签选择器 元素选择器/

类选择器 点号 .c1

id选择器 #号*

通用选择器 *号

组合选择器

/后代选择器/

/* 儿子选择器 */

/* 毗邻选择器 */

/* 弟弟选择器 */

属性选择器

属性选择器 []

分组与嵌套

指定字段红色 div

指定字段 p 为红色

指定字段为红色

div p span 全部为绿色

指定 .c1 ,#d1,p 为红色

指定c1属性值的标签 后代的 h1为绿色

伪装选择器

a:link

a:hover

a:active

a:visited

input:focus

伪元素选择器

p:first-letter

p:before

p:after 是指定的符号变颜色

select标签下拉框

/标签选择器元素选择器/

类选择器点号 .c1

指定c1属性值的标签后代的 h1为绿色