css选择器和python向html传参

斯露德

已于 2023-11-19 23:21:38 修改

阅读量97

点赞数

文章标签： python

于 2023-11-19 22:38:35 首次发布

本文链接：https://blog.csdn.net/2301_76481440/article/details/134497150

版权

1. sss.css文件

.c1 {
    color: rgb(0, 255, 8);
}

.c2 {
    color: green;
}

.c3 {
    color: rgb(32, 26, 26);
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--style一定要在head里面，title下面吗
    
-->
    <style>
        .c1 {
            color: red;
        }

        .c2 {
            color: red;
        }

        .c3 {
            color: blue;
        }

        .c4 {
            color: rgb(40, 40, 54);
        }

        li {
            color: rgb(33, 32, 30)
        }

        input[type="file"] {
            border: 10px solid red;
        }

        .yyyyy li {
            color: rgb(44, 9, 216)
        }

        .yyyyy>a {
            color: rgb(57, 216, 9)
        }
    </style>

    <!--li{}等标签选择器，其他选择器用中括号精确到其他属性（标签不行哦），用其他属性筛选就是 属性选择器了，，类选择器好用-->
    <!-- 如果存在一种标签在整个html文件中由多层不同的结构，
    用标签，类，id，属性都无法精确，就只能用后代选择器，类选择器再精确到标签是一种后代选择器
                                                  .yyyyy>a {
                                                              color: rgb(57, 216, 9)
                                                             }  是精确到.yyyyy下的a儿子 的选择器，不会搞孙子 -->

    <link rel="stylesheet" href="sss.css">
    <style>
        #c2 {
            color: gold;
        }
    </style>

    <!--这是id选择器-->
    <!--不论是几个style，还是几个link，只要是同一种选择器的同名选择器，就先用head里面最下面的，当一个class（或者其他种类选择器）引用多个style里面的类选择器时
    如果里面的样式修改没由重合，就都会由用，如果重了，就会按照最下面的修改,（文件中如果有同类型同名选择器还是算最下面的那个）-->
    <!--注意要用网络路径或者相对路径，这个css文件在flask里面必须放在同目录层次的static目录包里面，stylesheet
    并且写相对路径的时候也要    /static/xxxx.css-->

</head>

<body>
    <h1 class="c1 c2 c3">美女姐姐在线发牌</h1>
    <img style="height: 100px;" src="https://.com/2020/3/.jpeg" alt="怎末办">

    <div style="color: red;">中国联通</div>
    <div id="c2">中国电信</div>
    <div id="c2">中国电信</div>
    <!--我们平时开发的时候id属性值一般会尽量不同，所以用id选择器一般只能精确修改一个标签的样式，不太方便-->
    <a href="C:\Users\86193\Desktop\图片\屏幕截图 2023-10-02 212817.png">本地美女

    </a>
    <div> <input type="file"></div>

    <ul>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
    </ul>
    <div class="yyyyy">
        <a href="">baidu</a>
        <div>
            <a href="">明天</a>
        </div>
        <ul>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>

        </ul>
    </div>


</body>

</html>

2.html传参

1.向里面传入普通参数

from flask import Flask,render_template
app=Flask(__name__)
@app.route('/')
def hello_world():
        content = 'hello world'
        return render_template("helloworld.html", content=content)

if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{content}}</h1>
    <!--这里一定要是两层大括号，一层就只是输出{centent}，这个应该是要双大括号才能实现插入的功能-->
</body>
</html>

2.传入对象参数

from flask import Flask,render_template
from models import User
app=Flask(__name__)

@app.route('/user')
def user_index():
    user = User(1,"星空")
    return render_template("user_index.html", user=user)
    #这样就是在python文件里对函数返回的html文件进行传参操作，可以传递普通参数，也可以传递对象等
if __name__ == '__main__':
    app.run()

models.py文件如下，后面也一样，html文件就是后面的

class User:
    def __init__(self,user_id,user_name):
        self.user_id = user_id
        self.user_name = user_name

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

</head>
<body>
<h1>hello {{user.user_name}}</h1>


</body>
</html>

3.条件语句加对象参数传入，除了在puthon主文件中操作实现判断并返回不同网页效果，还可以让这个“python语法判断”在返回的html文件，参数由主py选择性传递过去

from flask import Flask, render_template
from models import User

app = Flask(__name__)


@app.route('/<user_id>')
def info(user_id):
    user = None
    if (int)(user_id) == 1:
        user = User(1, "星空")
    return render_template('info.html', user=user)


if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据选择性传入的参数选择性显示不同的网页效果</title>
    <style>
        .c1{
            color: blue;
        }
        .c2{
            color:brown;
        }
    </style>
</head>
<body>
    {% if user.user_id==1 %}
    <h1 class="c1">Hello {{user.user_name}}</h1>
    {% else %}
    <h1 class ="c2 c1 ">There is no user!</h1>
    {% endif %}
</body>
</html>

4.实现循环

from flask import Flask, render_template
from models import User

app = Flask(__name__)


@app.route('/')
def list_range():
    users = []
    for i in range(3):
        user = User(i, '学' + str(i))
        users.append(user)
    return render_template('list_range.html', users=users)


if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List_range循环语句和对象列表传入Html文件</title>
    <style>
        .c1{
            color: blue;
        }
        .c2{
            color:brown;
        }
    </style>
</head>
<body>
    {% for user in users %}
    <h3 class ="c1 c2">{{user.user_id}}------{{user.user.name}}</h3><br />
    {% endfor %}
</body>
</html>

但是不知道为啥，跑不起来，，，，，，