正文

前端基础之css

晴天sky  2022-02-13  792

关键词：

前端基础之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:UsersDELLAppDataRoamingTypora ypora-user-images1577354973855.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4lklGbw-1577359342873)(C:UsersDELLAppDataRoamingTypora ypora-user-images1577354913623.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:UsersDELLAppDataRoamingTypora ypora-user-images1577355574199.png)]

技术图片

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seXj9KgE-1577359342877)(C:UsersDELLAppDataRoamingTypora ypora-user-images1577355628903.png)]

指定字段为红色

技术图片

效果

技术图片

div p span 全部为绿色

技术图片

效果

技术图片

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59rexFYO-1577359342880)(C:UsersDELLAppDataRoamingTypora ypora-user-images1577356003963.png)]

技术图片

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzS9iLrz-1577359342880)(C:UsersDELLAppDataRoamingTypora ypora-user-images1577355992480.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

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;...property:value}‘‘‘例如：h1{color:red;font-size:14px;}css的四种引入方式查看详情

前端基础之css

目录：简介选择器（selecttor）常用属性页面布局一、简介 1、CSS定义 CSS是CascadingStyleSheets的简称，中文称为层叠样式表。 CSS规则由两个主要的部分构成：属性和属性值用冒号隔开，以分号结尾。‘‘‘selector{proper... 查看详情

前端基础之css

先前学习了html,今天我们来学习前端基础中的css。一、css的语法css规则主要由两部分组成：选择器，以及一条或者多条申明语句。例如：h1{color:red;font-size:14px}二、css的四种引入方式1.行内式行内式是在标记的style属性中设定CS... 查看详情

前端基础知识之css

前端基础知识之css https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 css就是修饰那些html元素的其主要内容为两大块：找到标签和修查看详情

前端基础之css

　　一、css语法　　CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;......property:value}‘‘‘　　例如：‘‘‘h1{color:red;font-size:14px}‘‘‘　　二、css的四种引入方式　　2.... 查看详情

前端基础之css

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。123456789‘‘‘ selector{ 查看详情

前端基础之css

一、CSS语法　　网址链接：http://www.w3school.com.cn/css 一、语法规则　　css规则由两个主要的部分组成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;...property:value}‘‘‘　　例子：h1{color:red;font-size:14px;}... 查看详情

前端基础之css

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;...property:value}‘‘‘例如：h1{color:red;font-size:14px;} css的四种引入方式 1.行内式行内式是在标记的style属性中设... 查看详情

前端基础之css

CSS介绍CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。CSS语法CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性... 查看详情

前端基础之css

前端基础html基础之css

一、id选择器、class选择器、标签选择器、属性选择器、组合选择器　　设置css样式有三种，第一种是通过在head中style定义选择器，写css样式　　第二种通过在标签中添加属性的方式定义css样式style=“background-color：black”　　第... 查看详情

前端基础之css

CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。CSS语法CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属... 查看详情

前端基础之css

一、CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法1、CSS实例每个CSS样式由两个组成部分：选择器和声明。... 查看详情

前端基础之css

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。selector{property:value;property:value;...property:value}例如：h1{color:red;font-size:14px;}CSS语法说明CSS的四种引入方式1.行内式　　行内式是在标记的style属性中设定CSS样式。... 查看详情

前端基础之css

一、CSS语法css语法包括两部分：选择器、和声明。例：h1{color:red;front-size:14px}二、CSS语法的引入方式1、行内样式：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。<divstyle="width:100px;height:1... 查看详情

正文

前端基础之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 是指定的符号变颜色

前端基础之css

前端基础之css

前端基础之css

前端基础知识之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础html基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

前端基础之css

select标签下拉框

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

类选择器点号 .c1

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