首页 > 其他分享 >django学习入门系列之第三点《快速了解 CSS》

django学习入门系列之第三点《快速了解 CSS》

时间:2024-06-18 08:59:39浏览次数:13  
标签:文件 浏览器 登录 标签 用户 django 第三点 CSS

文章目录


CSS

CSS 专门用来"美化"标签

  • 基础CSS,写简单的界面 &能看懂 &会改就行
  • 模块,调整和修改

快速了解

style 这种就叫css样式

<img src"..." style="height: 100px" />
<div style="color:red;">
    内容
</div>

CSS应用方式

在标签上

<img src"..." style="height: 100px" />

<div style="color:red;">
    内容
</div>

在head标签中

   注意一定是有个【点+名字】,例如 .c1,这相当于给这个类取名字,这样后面如果谁使用的话直接用名字就可以进行操作了

在标签上使用的时候要注意是class="内容"

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

    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    
</body>
</html>

写到文件中

css文件中的代码

.c1{
    height:100px;
}

.c2{
    color:red; 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登记</title>
    
    #在static目录下新建的common.css文件
    <link rel="stylesheet" href="/static/common.css"> 
     
</head>
<body>

    <h1 class='c1'>用户登录</h1>
    <h1 class='c2'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>    
</body>
</html>

问题:用Flask框架开发不方便

  • 每次都要重启
  • 规定有些文件必须放特定的文件夹
  • 创建一个界面
    • 函数
    • HTML文件

如何快捷打开内置网站
在这里插入图片描述
在pycharm中打开这个浏览器中就可以看到了

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1:用户注册】
7.【案例2:用户注册改进】

标签:文件,浏览器,登录,标签,用户,django,第三点,CSS
From: https://blog.csdn.net/qq_62548908/article/details/139750674

相关文章

  • HTML和CSS基础知识(3)
    一、标签显示模式(display)    (一)、什么是标签显示模式        顾名思义就是标签以什么样的方式进行显示,比如div会自己显示一行,span一行可以显示多个,那如果我们想把div在一行内显示多个如何去做,那就需要用到display显示模式了。而display显示模式有以......
  • Web框架,Python框架初识,Django框架初识与安装,
    ⅠWeb框架【一】Web框架本质web框架本质上可以看成是一个功能强大的socket服务端,用户的浏览器可以看成是拥有可视化界面的socket客户端。两者通过网络请求实现数据交互,从架构层面上先简单的将Web框架看做是对前端、数据库的全方位整合#TCP服务端与客户端进行交互的过程#......
  • 基于html,css,js,jQuery,ajax实时天气的网页
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"hr......
  • HTML和CSS知识汇总4
    一、背景1、背景简写|属性名|background         ||属性值|colorimage repeatposition||默认值|每个属性的默认值      ||描述 |设置背景图片是否随内容滚动 |CSS3支持背景半透明的写法语法格式是:```cssback......
  • HTML和CSS基础(二)
    四、HTML布局4.1文档流HTML文档流(DocumentFlow)是网页布局的基础,它决定了元素如何在页面上排列。文档流可以分为两大类:正常流(NormalFlow)和脱离正常流(OutOfFlow)。下面详细介绍这两大类以及它们的子分类:1.正常流(NormalFlow)正常流是文档流的默认布局方式,元素按照它们在H......
  • Sass和传统CSS有什么区别?
    Sass(SyntacticallyAwesomeStylesheets)与传统CSS在功能和语法上有一些显著的区别。以下是Sass相比传统CSS的一些关键优势和区别:变量(Variables):Sass允许使用变量存储信息,如颜色、字体大小等,以便在样式表中重复使用。这在传统CSS中是不可能的。$primary-color:#3498db;$......
  • VScode配置 Django项目 使用应用下的tests.py测试
    文件目录tests.pyimportosimportsysfrompathlibimportPath#AddbasedirectorytoPYTHONPATHif__name__=="__main__":os.environ.setdefault("DJANGO_SETTINGS_MODULE","MyshopBack.settings")BASE_DIR=Path(__file......
  • 4种CSS实现全屏背景图片铺满自适应的方式,最后一种尤其简单
    在Web设计中,背景图片是提升页面视觉效果的重要元素。实现背景图片全屏铺满且自适应是常见的需求。本文将介绍三种CSS技术,用以确保背景图片能够优雅地填充整个屏幕并适应不同设备。方式一:使用background-size属性CSS的background-size属性可以设置背景图片的尺寸,使其覆盖整个......
  • 在Web项目中使用Sass:提升CSS效率的指南
    Sass(SyntacticallyAwesomeStylesheets)是一种CSS预处理器,它为CSS增加了变量、嵌套规则、混合(mixins)、函数等高级功能,极大地提高了CSS的编写效率和可维护性。本文将详细介绍如何在Web项目中集成和使用Sass。1.理解Sass的优势变量:使用变量存储颜色、字体等,易于统一管理和......
  • 如何在Sass中使用CSS模块?
    CSS模块是CSS的一个特性,它允许你将CSS样式封装在局部作用域中,从而避免样式冲突。Sass本身并不直接支持CSS模块,但是可以通过一些方法来实现类似的效果。以下是如何在Sass中使用CSS模块的一些步骤和概念。1.理解CSS模块CSS模块是一种封装CSS的方法,它使得样式只作用于特定的......