Django+Vue 快速开发网站 CSS篇（已完结）

已于 2024-09-18 21:36:23 修改
阅读量423 收藏 5
点赞数 5
分类专栏： web 文章标签： django vue.js css
于 2024-09-13 10:25:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80851925/article/details/142199754
版权

简单介绍：

css，专门用来‘美化’标签

1.快速了解

<img src="/static/a1.jpg" style="width: 50px">
<span style="color:red;">时间：</span>

2.CSS应用方式

1.在标签上：将格式直接写在标签上

<img src="/static/a1.jpg" style="width: 50px">

2.在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxxxx</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class="c1">用户登录</h1>
    <h1 class="c1">用户登录</h1>
    <h1 class="c1">用户登录</h1>
    <h1 class="c1">用户登录</h1>
</body>
</html>

3.写在文件中，css文件必须放在static文件夹里面

1.在static文件夹中创建css文件

.c1{
    height: 100px;
}

.c2{
    color:red;
}

2.通过在head头部中加入link标签，来找到对应的css文件

<link rel="stylesheet" href="/static/common.css">

案例：flask中的应用（登录注册）

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/common.css">
</head>
<body>
<h1 class="xx">用户注册</h1>
<div>
    用户名：<input type="text"/>
</div>
<div>
    密码：<input type="password">
</div>

<div>
    性别：
    <input type="radio" name="n1">男
    <input type="radio" name="n1">女
</div>

<div>
    擅长领域:
    <select multiple>
        <option>打游戏</option>
        <option>睡觉</option>
        <option>吃饭</option>
        <option>刷抖音</option>
    </select>
</div>

<div>
    备注：<textarea name="" id="" cols="30" rows="3"></textarea>
</div>

<input type="submit">submit按钮
</body>
</html>

CSS

.c1{
    height: 100px;
}

.c2{
    color:red;
}

.xx{
    color:green;
}

3.选择器

1.ID选择器

定义为#开头，对应标签的id

 #c2{
            color:gold;
        }

2.类选择器（用的最多）

定义为.开头，对应标签的class

  .c1{
            color:red;
        }

3.标签选择器

在head头部的style标签中定义body中的标签

同样的标签都会被渲染上css效果

li{
            color:pink;
        }
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>

4.属性选择器

同时，为了区分相同的标签，给他们渲染上不同的效果，可以在标签上再添加单独的属性type，适用于以上三种选择器

        input[type='text']{
            border: 1px solid red;
        }
        .v1[xx='456']{
            color: gold;
        }

5.后代选择器

在同一个标签下有多个后代标签，为了区分这些标签，可以通过后代选择器，精准定位到每一个后代标签上

CSS：

 .yy li{
            color: aqua;
        }
 .yy > a{
            color: dodgerblue;
        }

HTML：

    <div class="yy">
        <a href="https://www.baidu.com/">百度</a>
        <div>
            <a href="https://www.360.cn/">360</a>
            <a href="https://www.sogou.com/">搜狗</a>
        </div>
        <ul>
            <li>四川</li>
            <li>重庆</li>
            <li>云南</li>
        </ul>
    </div>

以上三种选择器全部示例：

python：

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/choose')
def choose():
    return render_template('选择器.html')


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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
        #c2{
            color:gold;
        }
        li{
            color:pink;
        }
        input[type='text']{
            border: 1px solid red;
        }
        .v1[xx='456']{
            color: gold;
        }
        .yy li{
            color: aqua;
        }
        .yy > a{
            color: dodgerblue;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
    <div id="c2">广西</div>
    <div>联通</div>

    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>

    <input type="text">
    <input type="password">

    <div class="v1" xx="123">a</div>
    <div class="v1" xx="456">b</div>
    <div class="v1" xx="789">c</div>

    <div class="yy">
        <a href="https://www.baidu.com/">百度</a>
        <div>
            <a href="https://www.360.cn/">360</a>
            <a href="https://www.sogou.com/">搜狗</a>
        </div>
        <ul>
            <li>四川</li>
            <li>重庆</li>
            <li>云南</li>
        </ul>
    </div>
</body>
</html>

浏览器上渲染效果如下：

总结（关于选择器）

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

4.多个和覆盖

多个样式的时候，下面的会把上面的覆盖掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }

        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

不想被覆盖 -> !important

        .c1{
            color: red !important;
            border: 1px solid red;
        }

5.样式

1.高度和宽度

        .c1{
            height: 300px;
            width: 500px;
            background-color: green;
        }
        .c2{
            height: 10%;
            width: 20%;
            background-color: dodgerblue;
        }

注意事项：

  • 宽度，支持百分比
  • 对块级标签无效，就算剩在那里也不给行内标签用，后面会解决

2.块级和行内标签

  • 块级
  • 行内
  • css样式：标签 -> display:inline-block使标签既是块级标签又是行内标签
        .c1{
            display: inline-block;
            height: 100px;
            width: 300px;
            background-color: red;
        }
        .c2{
            display: inline-block;
            height: 100px;
            width: 300px;
            background-color: green;
        }

解决了块级标签占用一整行的问题

3.字体和颜色

  • 颜色
  • 大小
  • 加粗
  • 字体格式

字体可以在font-family - CSS：层叠样式表 | MDN (mozilla.org)这个网站里面copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            font-size: 100px;
            font-weight: bolder;
            font-family: cursive;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
    <div>联通</div>
</body>
</html>

4.文字对齐方式

      .c1{
        height: 59px;
        width: 300px;
        border: 1px solid red;

        text-align: center; /* 水平方向居中 */
        line-height: 59px; /* 垂直方向居中 行高是59，告诉它，就会自动居中，但只能在一行使用，多行不行*/
      }

5.浮动

style="float: right"

div默认是一个块级标签，如果浮动起来就不一样了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            font-size: 200px;
        }
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
            background-color: aqua;
        }
        .c2{
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span class="c1">左边</span>
        <span class="c1" style="float: right">右边</span>
    </div>

    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

不过有一个小问题，如果让标签浮动起来，就会脱离文档流，会把父标签覆盖掉

我的理解就是，本来子标签是装在父标签里面，只会占用父标签一部分，而加上浮动后会直接把父标签给覆盖掉，没有父标签了

解决方法：

style="clear: both"
    <div style="background-color: green">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both"></div>
    </div>

6.内边距

内部设置距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .inter{
        border: 1px solid red;
        height: 200px;
        width: 200px;


        /*padding-top: 20px;*/
        /*padding-bottom: 20px;*/
        /*padding-left: 20px;*/
        /*padding-right: 20px;*/
        /* 简写，上下左右都有20距离 */
        /*padding: 20px; */
        /* 上 右 下 左 */
        padding: 20px 10px 5px 20px;
      }
    </style>
</head>
<body>
  <div class="inter">
    <div style="background-color: gold">上文</div>
    <div>
      下文
    </div>
  </div>
</body>
</html>

7.外边距

margin-top/right/left/bottom

在外面隔出距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;background-color: aqua"></div>
    <div style="height: 100px;background-color: green;margin-top: 10px"></div>
</body>
</html>

8.区域居中

margin: 0 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 980px;
            background-color: gold;
            height: 1000px;
            /*0是上下 auto是左右*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

案例1：小米顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 38px;
            background-color: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
        }
        .header .account{
            float: right;
            color: white;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="">小米商城</a>
                <a href="">MIUI</a>
                <a href="">云服务</a>
                <a href="">有品</a>
                <a href="">开放平台</a>
            </div>
            <div class="account">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">消息通知</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

小旷爷
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值