Python Web开发记录 Day2：CSS

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

      • 二、CSS
        • 1、CSS-初始入门
          • ①快速了解
          • ②CSS应用方式
          • ③选择器
          • ④样式
        • 2、CSS-常见样式和案例
          • ①浮动
          • ②内边距
          • ③外边距
        • 3、CSS-样式和小米商城
          • ①CSS案例
          • ②小结
        • 4、CSS-案例：小米商城新品部分
          • ①案例：推荐区域
          • ②案例实现
        • 5、CSS-边框和背景色
          • ①:hover（伪类）
          • ②:after（伪元素）
          • ③position属性
          • ④relative和absolute定位
          • ⑤border属性
          • ⑥background-color属性

二、CSS

1、CSS-初始入门

HTML vs CSS

1️⃣ 超文本标记语言HTML，使用多种“标签”来描述网页的结构和内容。(网页扩展名为.html)

在这里插入图片描述

2️⃣ 层叠样式表CSS，从审美角度来描述网页的样式。(文件扩展名为.css)
在这里插入图片描述

CSS，专门用来”美化“标签，HTML如果是"身体"，CSS就是在身体外的各种装饰，可以美化HTML写出来的"身体"。

  • 基础CSS，写简单页面 & 看懂 & 修改；
  • 模块，调整和修改。
①快速了解

CSS是一种用于描述HTML或XML（包括各种XML语言，如SVG或XHTML）文档的样式的语言。CSS描述了这些文档在屏幕、纸张、语音阅读器等媒介上的呈现方式。

1.基础概念

  • 选择器（Selectors）：用于选择你想要样式化的HTML元素。
  • 属性（Properties）：定义了如何样式化元素。
  • 值（Values）：属性的具体设置。
  • 声明（Declarations）：由属性和值组成，如 color: red;。
  • 声明块（Declaration Blocks）：用大括号 {} 包围的一系列声明。
  • 规则集（Rule Sets）：由选择器和声明块组成。

2.基本语法

selector {property: value;
}

示例

p {color: red;font-size: 14px;
}

这个示例会将所有 <p>（段落）元素的文字颜色设置为红色，并且字体大小为14像素。

3.常用属性

  • color: 文本颜色
  • background-color: 背景色
  • font-size: 字体大小
  • border: 边框
  • margin: 外边距
  • padding: 内边距
  • width 和 height: 宽度和高度
<img src="..." style="height:100px"/><div style="color:red;">中国联通</div>

4.响应式设计

  • 媒体查询（Media Queries）：允许你根据不同的屏幕尺寸或设备特性应用不同的样式。

示例

@media screen and (max-width: 600px) {body {background-color: lightblue;}
}
②CSS应用方式

1.在标签上应用

直接在标签里进行添加。

<img src="..." style="height:100px"/><div style="color:red;">中国联通</div>

2.在head标签中写style标签( * )

在头部head标签中添加style标签，在style标签中来进行添加CSS样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color:red;}</style>
</head>
<body><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1><form method="post" action="/login">用户名：<input type="text" name="username">密码：<input type="text" name="password"><input type="submit" value="提交"></form>
</body>
</html>

3.写到文件中( * )

写到文件里，直接使用文件里的样式。

.c1{height:100px; 
}.c2{color:red;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="common.css" />
</head>
<body><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/commons.css">
</head>
<body><h1 class="xx">用户注册</h1><form action="/register" method="post"><div>用户名: <input type="text" name="user"></div><div>密码: <input type="password" name="pwd"></div><div><input type="submit" value="注册"></div></form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/commons.css">
</head>
<body><h1 class="xx">用户注册</h1><form action="/register" method="post"><div>用户名: <input type="text" name="user"></div><div>密码: <input type="password" name="pwd"></div><div><input type="submit" value="注册"></div></form>
</body>
</html>

.xx{color: green;
}

问题：用Flask框架开发有些不便之处：

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

有没有一种方式，可以快速编写前端代码及查看响应效果，最后将页面集成到Flask中？

Pycharm为我们提供了一种非常便捷开发前端页面的工具，鼠标滑到界面右侧即可显示，打开此处页面可以实时地看到代码更新所带来的页面变化。

image-20240220170546380

③选择器

在CSS中，选择器用于定位一个或多个元素，以便应用样式。

1.ID选择器

通过HTML元素的id属性选择特定元素。ID是唯一的，在一个HTML页面中，每个ID只能出现一次。ID选择器在CSS中以#字符开始，后跟ID的名称。例如，#navbar选择具有id="navbar"的元素。

#c1{}<div id='c1'></div>

2.类选择器（使用较多）

通过HTML元素的class属性选择一个或多个元素。同一类可以应用于页面上的多个元素，一个元素也可以有多个类。类选择器在CSS中以.字符开始，后跟类的名称。例如，.button选择所有具有class="button"的元素。

.c1{}<div class='c1'></div>

3.标签选择器（使用较多）

又称为元素选择器，通过元素名称选择所有特定类型的元素。例如，div选择页面上的所有div元素。

div{}<div>xxx
</div>

4.属性选择器

根据元素的属性及属性值来选择元素。它们用方括号[]表示，内部可以指定属性名，也可以指定属性名和值。例如，[type=“text”]选择所有type属性值为text的元素。

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

<input type="text">
<input type="password"><div class="v1" xx="123">s
</div><div class="v1" xx="456">f
</div><div class="v1" xx="999">a
</div>

在这里插入图片描述

5.后代选择器（使用较多）

用于选择一个元素的后代元素，即位于指定元素内部的元素，不论是直接还是间接后代。后代选择器通过空格分隔父元素和子元素的选择器来表示。例如，div p选择所有位于div元素内部的p元素。

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

<div class="yy"><a>百度</a><div><a>谷歌</a></div><ul><li>美国</li><li>日本</li><li>韩国</li></ul></div>

在这里插入图片描述

关于选择器：

日常使用多少：
多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

关于多个样式和覆盖的问题：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: red !important;border: 1px solid red;}.c2{font-size: 28px;color: green;}</style>
</head>
<body><div class="c1 c2">中国联通</div>
</body>
</html>

在这里插入图片描述

④样式

1.高度和宽度

.c1{/*height高度 width宽度*/height:300px;width:500px;
}

注意：

  • 宽度，支持百分比。
  • 行内标签：默认无效
  • 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）

2.块级和行内标签

  • 块级
  • 行内
  • CSS样式：标签-> display:inline-block

示例1：行内+块级特性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;}</style>
</head>
<body><span class="c1">中国</span><span class="c1">联通</span><span class="c1">联通</span><span class="c1">联通</span>
</body>
</html>

在这里插入图片描述

示例2：块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body><div style="display: inline;">中国</div><span style="display: block;">联通</span>
</body>
</html>

在这里插入图片描述

注意：块级+跨级和行内

3.字体设置

  • 颜色 color
  • 大小 font-size
  • 加粗 font-weight
  • 字体格式 font-family
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: #66CDAA;font-size: 50px;font-weight: 500;font-family:"Microsoft Yahei";}</style>
</head>
<body><div class="c1">中国联通</div><div>中国移动</div>
</body>
</html>

在这里插入图片描述

4.文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 59px;width: 300px;border: 1px solid red;text-align: center; /*水平方向居中*/line-height: 59px; /*垂直方向居中*/}</style>
</head>
<body><div class="c1">张三</div>
</body>
</html>

在这里插入图片描述

2、CSS-常见样式和案例
①浮动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div><span>左边</span><span style="float: right">右边</span></div>
</body>
</html>

在这里插入图片描述

div默认块级标签（比较霸道），如果浮动起来，就不一样了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.item{float: left;width: 280px;height: 170px;border: 1px solid red;}</style>
</head>
<body><div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>

在这里插入图片描述

可是如果你让标签浮动起来之后，就会脱离文档流，那该怎么解决呢？

可以通过添加这个语句<div style="clear: both"></div>解决。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.item{float: left;width: 280px;height: 170px;border: 1px solid red;}</style>
</head>
<body><div style="background-color: dodgerblue"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div style="clear: both"></div></div><div>你好</div></body>
</html>

在这里插入图片描述

为什么添加<div style="clear: both"></div>能够解决呢？

在HTML中，<div style="clear: both"></div> 用于控制布局，特别是在使用浮动（float）元素时。浮动元素会脱离文档流的正常排列，可能导致布局混乱。clear 属性用来清除元素的左侧、右侧或两侧的浮动，确保不会有浮动元素影响到它的布局。

具体来说，clear: both; 表示清除前面元素的左右浮动，使得接下来的内容显示在浮动元素的下方，而不是旁边或者覆盖浮动元素。这个技术常用于确保父容器能够包含其内部浮动的子元素，防止布局错乱。

例如，如果你有几个浮动的 <div> 元素用于创建并排的布局，之后你希望接下来的内容不受这些浮动元素的影响，显示在它们下面，那么可以在浮动元素之后使用 <div style="clear: both"></div> 来实现这个布局需求。这样，它会创建一个不可见的分界线，确保浮动不会影响到后续的内容布局。

②内边距

内部距离，自己内部的距离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{border: 1px solid red;height: 200px;width: 200px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}</style>
</head>
<body><div class="outer"><div style="background-color: gold">听妈妈的话</div><div>小朋友你是否有很多问号？</div></div>
</body>
</html>
③外边距

外部距离，自己与别人之间的距离

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

综合案例：小米商城

案例1 小米商城顶部

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

image-20240221141612522

小结

  • body标签，默认有一个边距，会造成页面四周有白色间隙，如何去除？
body{margin:0;
}

  • 内容居中

    • 文本居中

      <div style="width: 200px; background-color:pink; text-align: center">张三</div>

    • 区域居中，自己要有宽度 + margin-left:auto; margin-right:auto;

    .container{width: 980px;margin: 0 auto;
}<div class="container">asddqsadas
</div>

  • 父亲没有高度或没有宽度，被孩子支撑起来。

  • 如果存在浮动，要加上<div style="clear:both"></div>

  • 如果想用别人实现的样式

  • 关于布局，不知道如何下手的话，学会分析页面的布局

image-20240221150848747

3、CSS-样式和小米商城
  • 案例应用（利用之前所学知识）
  • CSS知识点
  • 模版 + CSS + 构建页面
①CSS案例

1.内容回顾

  • HTML标签

    固定格式，记住标签长什么样，例如：
h / div / span / a / img / ul / li / table / input / form

  • CSS样式

    引用CSS：标签、头部、文件

    .xx{...
}<div class='xx xx'></div>

    高度height / 宽度width /块级 or 行内 or 块级行内 / 浮动float / 字体font / 文字对齐方式text-align / 内边距 / 外边距关于边距：- body- 区域居中

  • 页面布局

    根据你看到的页面把他们划分成很多小的区域，再去填充样式。

2.案例：二级菜单

a.分析布局

image-20240221152034178

b.搭建骨架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>二级菜单</title><style>.sub-header{height: 100px;background-color: #b0b0b0;}.container{width: 1128px;margin: 0 auto;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;}.sub-header .menu-list{float: left;}.sub-header .search{float: right;}</style>
</head>
<body><div class="sub-header"><div class="container"><div class="ht logo">1</div><div class="ht menu-list">2</div><div class="ht search">3</div><div style="clear: both"></div></div></div><div><div class="logo"></div></div>
</body>
</html>

image-20240221234224590

c.完善logo区域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>二级菜单</title><style>.sub-header{height: 100px;background-color: #b0b0b0;}.container{width: 1128px;margin: 0 auto;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;border: 1px solid red;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;}.sub-header .search{float: right;}</style>
</head>
<body><div class="sub-header"><div class="container"><div class="ht logo"><!--a,行内标签，默认设置高度、边距无效 解决：转换成块级 OR 行内&块级--><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list">2</div><div class="ht search">3</div><div style="clear: both"></div></div></div><div><div class="logo"></div></div>
</body>
</html>

在这里插入图片描述

d.布置菜单区域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>二级菜单</title><style>.sub-header{height: 100px;}.container{width: 1128px;margin: 0 auto;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search{float: right;}</style>
</head>
<body><div class="sub-header"><div class="container"><div class="ht logo"><!--a,行内标签，默认设置高度、边距无效 解决：转换成块级 OR 行内&块级--><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/shop">Xiaomi手机</a><a href="https://www.mi.com/shop">Redmi手机</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">电笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a><a href="https://www.mi.com/shop">路由器</a></div><div class="ht search">3</div><div style="clear: both"></div></div></div><div><div class="logo"></div></div>
</body>
</html>

在这里插入图片描述

3.综合案例：顶部菜单+二级菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米顶部</title><style>body{margin: 0;}.header{background: #333;}.container{width: 1226px;margin: 0 auto;}.header .menu{float: left;color: white;height: 38px;line-height: 38px;}.header .account{float: right;color: white;height: 38px;line-height: 38px;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header{height: 100px;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block;}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search{float: right;padding-top: 35px; /* Adjust padding to align search box as needed */}.search input[type="text"]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[type="submit"]{right: 0;z-index: 2;width: 52px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;}.search-btn {background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */border: 1px solid;cursor: pointer; /* 鼠标悬停时显示手形图标 */width: 52px;height: 50px;background-size: contain; /* 使背景图像适应按钮大小 */vertical-align: middle;}/*可能需要的额外样式调整*/.search-btn:focus {outline: none; /* 移除聚焦时的轮廓线 */}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米官网</a><a href="https://www.mi.com/shop">小米商城</a><a href="https://www.mi.com/shop">小米澎湃OS</a><a href="https://www.mi.com/shop">云服务</a><a href="https://www.mi.com/shop">小爱开放平台</a><a href="https://www.mi.com/shop">下载app</a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear:both"></div></div></div><div class="sub-header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/shop">Xiaomi手机</a><a href="https://www.mi.com/shop">Redmi手机</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">电笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a><a href="https://www.mi.com/shop">路由器</a></div><div class="ht search"><form action="/search" method="get"><input type="text" name="q" placeholder="搜索产品" required><input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"></form></div><div style="clear: both"></div></div></div>
</body>
</html>

image-20240222010448250

②小结

  • a标签是行内标签，行内标签的高度、内外边距，默认无效。

  • 垂直方向居中

    • 文本 line-height
    • 图片 边距

  • a标签默认有下划线

  • 鼠标放上去之后hover

    .c1:hover{...
}
a:hover{}
4、CSS-案例：小米商城新品部分
①案例：推荐区域

1.划分区域

image-20240222134445323

2.搭建骨架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米顶部</title><style>body{margin: 0;}.header{background: #333;}.container{width: 1226px;margin: 0 auto;}.header .menu{float: left;color: white;height: 38px;line-height: 38px;}.header .account{float: right;color: white;height: 38px;line-height: 38px;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header{height: 100px;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block;}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search{float: right;padding-top: 35px; /* Adjust padding to align search box as needed */}.search input[type="text"]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[type="submit"]{right: 0;z-index: 2;width: 52px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;}.search-btn {background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */border: 1px solid;cursor: pointer; /* 鼠标悬停时显示手形图标 */width: 52px;height: 50px;background-size: contain; /* 使背景图像适应按钮大小 */vertical-align: middle;}/*可能需要的额外样式调整*/.search-btn:focus {outline: none; /* 移除聚焦时的轮廓线 */}.slider img{width: 1226px;height: 460px;text-align: right;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米官网</a><a href="https://www.mi.com/shop">小米商城</a><a href="https://www.mi.com/shop">小米澎湃OS</a><a href="https://www.mi.com/shop">云服务</a><a href="https://www.mi.com/shop">小爱开放平台</a><a href="https://www.mi.com/shop">下载app</a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear:both"></div></div></div><div class="sub-header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/shop">Xiaomi手机</a><a href="https://www.mi.com/shop">Redmi手机</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">电笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a><a href="https://www.mi.com/shop">路由器</a></div><div class="ht search"><form action="/search" method="get"><input type="text" name="q" placeholder="搜索产品" required><input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"></form></div><div style="clear: both"></div></div></div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpg" alt=""></div></div></div><div class="news"><div class="container"><div class="channel"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div></div></div></body>
</html>

在这里插入图片描述

②案例实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米顶部</title><style>body{margin: 0;}.header{background: #333;}.container{width: 1226px;margin: 0 auto;}.left{float: left;}.header .menu{float: left;color: white;height: 38px;line-height: 38px;}.header .account{float: right;color: white;height: 38px;line-height: 38px;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header{height: 100px;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block;}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search{float: right;padding-top: 35px; /* Adjust padding to align search box as needed */}.search input[type="text"]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[type="submit"]{right: 0;z-index: 2;width: 52px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;}.search-btn {background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */border: 1px solid;cursor: pointer; /* 鼠标悬停时显示手形图标 */width: 52px;height: 50px;background-size: contain; /* 使背景图像适应按钮大小 */vertical-align: middle;}/*可能需要的额外样式调整*/.search-btn:focus {outline: none; /* 移除聚焦时的轮廓线 */}.slider img{width: 1226px;height: 460px;text-align: right;}.news{margin-top: 14px;}.news .channel{width: 228px;height: 164px;background-color:#5f5750;padding: 3px;}.news .channel .item img{display: block;width: 24px;height: 24px;margin: 0 auto 4px;}.news .channel .item{height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a{display: inline-block;font-size: 12px;padding-top: 18px;color: #ffffff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover{opacity: 1;}.news .list-item img{width: 316px;height: 170px;display: block;margin: 0 auto 4px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米官网</a><a href="https://www.mi.com/shop">小米商城</a><a href="https://www.mi.com/shop">小米澎湃OS</a><a href="https://www.mi.com/shop">云服务</a><a href="https://www.mi.com/shop">小爱开放平台</a><a href="https://www.mi.com/shop">下载app</a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear:both"></div></div></div><div class="sub-header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/shop">Xiaomi手机</a><a href="https://www.mi.com/shop">Redmi手机</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">电笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a><a href="https://www.mi.com/shop">路由器</a></div><div class="ht search"><form action="/search" method="get"><input type="text" name="q" placeholder="搜索产品" required><input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"></form></div><div style="clear: both"></div></div></div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpg" alt=""></div></div></div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/shop"><img src="images/c1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c2.png" alt=""><span>企业团购</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c3.png" alt=""><span>F码通道</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c4.png" alt=""><span>米粉卡</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c5.png" alt=""><span>以旧换新</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c6.png" alt=""><span>话费充值</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="/images/w1.png" alt=""></div><div class="list-item left" style="margin-left: 15px"><img src="/images/w2.jpg" alt=""></div><div class="list-item left" style="margin-left: 15px"><img src="/images/w3.png" alt=""></div></div></div></body>
</html>

image-20240222155515219

  • 设置透明度
    通过opacity来设置

    opacity:0.5 /* 透明度为0.5 透明度范围：0~1 */

image-20240222155824362

5、CSS-边框和背景色
①:hover（伪类）

用于定义鼠标悬停在元素上时的样式。例如，a:hover { color: red; }会使链接在鼠标悬停时变为红色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: red;font-size: 18px;}.c1:hover{color: green;font-size: 50px;}.c2{height: 300px;width: 500px;border: 3px solid red;}.c2:hover{border: 3px solid green;}.download{display: none;}.app:hover .download{display: block;}.app:hover .title{color: yellowgreen;}</style>
</head>
<body><div class="c1">联通</div><div class="c2">广西</div><div class="app"><div class="title">下载App</div><div class="download"><img src="images/QRcode.png" alt=""></div></div>
</body>
</html>

在这里插入图片描述

②:after（伪元素）

用于在元素的内容之后插入额外的内容。它通常与content属性一起使用。例如，p:after { content: “Read more”; }会在所有p元素的内容后添加"Read more"文本。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1:after{content:"大帅哥";}</style>
</head>
<body><div class="c1">张三</div><div class="c1">李四</div>
</body>
</html>

很重要的应用，可以清除浮动，以免脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content: "";display: block;clear: both;}.item{float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>
③position属性

用于设置元素的定位方式。它的值可以是static、relative、absolute、fixed或sticky，分别对应不同的定位行为。常用的三个方式如下：

  • fixed
  • relative
  • absolute

a.fixed

固定在窗口的某个位置

案例1：返回顶部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米顶部</title><style>body{margin: 0;}.header{background: #333;}.container{width: 1226px;margin: 0 auto;}.left{float: left;}.header .menu{float: left;color: white;height: 38px;line-height: 38px;}.header .account{float: right;color: white;height: 38px;line-height: 38px;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header{height: 100px;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block;}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search{float: right;padding-top: 35px; /* Adjust padding to align search box as needed */}.search input[type="text"]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[type="submit"]{right: 0;z-index: 2;width: 52px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;}.search-btn {background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */border: 1px solid;cursor: pointer; /* 鼠标悬停时显示手形图标 */width: 52px;height: 50px;background-size: contain; /* 使背景图像适应按钮大小 */vertical-align: middle;}/*可能需要的额外样式调整*/.search-btn:focus {outline: none; /* 移除聚焦时的轮廓线 */}.slider img{width: 1226px;height: 460px;text-align: right;}.news{margin-top: 14px;}.news .channel{width: 228px;height: 164px;background-color:#5f5750;padding: 3px;}.news .channel .item img{display: block;width: 24px;height: 24px;margin: 0 auto 4px;}.news .channel .item{height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a{display: inline-block;font-size: 12px;padding-top: 18px;color: #ffffff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover{opacity: 1;}.news .list-item img{width: 316px;height: 170px;display: block;margin: 0 auto 4px;}.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 10px;bottom: 50px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米官网</a><a href="https://www.mi.com/shop">小米商城</a><a href="https://www.mi.com/shop">小米澎湃OS</a><a href="https://www.mi.com/shop">云服务</a><a href="https://www.mi.com/shop">小爱开放平台</a><a href="https://www.mi.com/shop">下载app</a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear:both"></div></div></div><div class="sub-header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/shop">Xiaomi手机</a><a href="https://www.mi.com/shop">Redmi手机</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">电笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a><a href="https://www.mi.com/shop">路由器</a></div><div class="ht search"><form action="/search" method="get"><input type="text" name="q" placeholder="搜索产品" required><input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"></form></div><div style="clear: both"></div></div></div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpg" alt=""></div></div></div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/shop"><img src="images/c1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c2.png" alt=""><span>企业团购</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c3.png" alt=""><span>F码通道</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c4.png" alt=""><span>米粉卡</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c5.png" alt=""><span>以旧换新</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c6.png" alt=""><span>话费充值</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="/images/w1.png" alt=""></div><div class="list-item left" style="margin-left: 15px"><img src="/images/w2.jpg" alt=""></div><div class="list-item left" style="margin-left: 15px"><img src="/images/w3.png" alt=""></div></div></div><div style="height: 1000px;"></div><div class="back"></div>
</body>
</html>

在这里插入图片描述

案例2：对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.dialog{position: fixed;height: 300px;width: 500px;background-color: white;/*left: 50%;*//*margin-left: -250px;*/left: 0;right: 0;margin: 0 auto;top: 200px;z-index: 1000;}.mask{background-color: black;position: fixed;left: 0px;right: 0px;top: 0px;bottom: 0px;opacity: 0.7;z-index: 999;}</style>
</head>
<body><div class="mask"></div><div style="height: 1000px;">qwewqeqw</div><div class="dialog"></div>
</body>
</html>

在这里插入图片描述

④relative和absolute定位

  • relative定位：是position属性的一个值，表示元素将相对于其正常位置进行定位。也就是说，即使你对元素应用了定位，它仍然占据原来的空间，但可以通过top、right、bottom、left属性移动位置。

  • absolute定位：也是position属性的一个值，表示元素相对于最近的已定位的祖先元素（不是static定位的元素）进行定位。如果没有这样的元素，则相对于文档体()元素定位。绝对定位的元素不占据文档流中的空间。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 1px solid red;margin: 100px;position: relative;}.c1 .c2{height: 59px;width: 59px;background-color: #00FF7F;position: absolute;right: 20px;bottom: 10px;}</style>
</head>
<body><div class="c1"><div class="c2"></div></div>
</body>
</html>

案例1：小米商城下载app

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米顶部</title><style>body{margin: 0;}.header{background: #333;}.container{width: 1226px;margin: 0 auto;}.left{float: left;}.header .menu{float: left;color: white;height: 38px;line-height: 38px;}.header .account{float: right;color: white;height: 38px;line-height: 38px;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: white;}.sub-header{height: 100px;}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;float: left;line-height: 100px;}.sub-header .logo a{margin-top: 22px;display: inline-block;}.sub-header .logo a img{height: 56px;width: 56px;}.sub-header .menu-list{float: left;line-height: 100px;}.sub-header .menu-list a{display: inline-block;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .menu-list a:hover{color: #ff6700;}.sub-header .search{float: right;padding-top: 35px; /* Adjust padding to align search box as needed */}.search input[type="text"]{right: 51px;z-index: 1;width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;vertical-align: middle;}.search input[type="submit"]{right: 0;z-index: 2;width: 52px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;}.search-btn {background: url('/images/search.png') no-repeat center center; /* 搜索图标的路径 */border: 1px solid;cursor: pointer; /* 鼠标悬停时显示手形图标 */width: 52px;height: 50px;background-size: contain; /* 使背景图像适应按钮大小 */vertical-align: middle;}/*可能需要的额外样式调整*/.search-btn:focus {outline: none; /* 移除聚焦时的轮廓线 */}.slider img{width: 1226px;height: 460px;text-align: right;}.news{margin-top: 14px;}.news .channel{width: 228px;height: 164px;background-color:#5f5750;padding: 3px;}.news .channel .item img{display: block;width: 24px;height: 24px;margin: 0 auto 4px;}.news .channel .item{height: 82px;width: 76px;float: left;text-align: center;}.news .channel .item a{display: inline-block;font-size: 12px;padding-top: 18px;color: #ffffff;text-decoration: none;opacity: 0.7;}.news .channel .item a:hover{opacity: 1;}.news .list-item img{width: 316px;height: 170px;display: block;margin: 0 auto 4px;}.app .download{position: absolute;height: 100px;width: 100px;display: none;}.app .download img{height: 100px;width: 100px;}.app:hover .download{display: block;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米官网</a><a href="https://www.mi.com/shop">小米商城</a><a href="https://www.mi.com/shop">小米澎湃OS</a><a href="https://www.mi.com/shop">云服务</a><a href="https://www.mi.com/shop">小爱开放平台</a><a href="https://www.mi.com/shop" class="app">下载app<div  class="download"><img src="images/QRcode.png" alt=""></div></a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear:both"></div></div></div><div class="sub-header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/shop" style="margin-top: 22px;display: inline-block"><img src="images/logo-mi2.png" style="height: 56px; width:56px;"alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/shop">Xiaomi手机</a><a href="https://www.mi.com/shop">Redmi手机</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">电笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a><a href="https://www.mi.com/shop">路由器</a></div><div class="ht search"><form action="/search" method="get"><input type="text" name="q" placeholder="搜索产品" required><input type="image" src="/images/search.png" alt="搜索" class="search-btn iconfont"></form></div><div style="clear: both"></div></div></div><div class="slider"><div class="container"><div class="sd-img"><img src="images/b1.jpg" alt=""></div></div></div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="https://www.mi.com/shop"><img src="images/c1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c2.png" alt=""><span>企业团购</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c3.png" alt=""><span>F码通道</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c4.png" alt=""><span>米粉卡</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c5.png" alt=""><span>以旧换新</span></a></div><div class="item"><a href="https://www.mi.com/shop"><img src="images/c6.png" alt=""><span>话费充值</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="/images/w1.png" alt=""></div><div class="list-item left" style="margin-left: 15px"><img src="/images/w2.jpg" alt=""></div><div class="list-item left" style="margin-left: 15px"><img src="/images/w3.png" alt=""></div></div></div></body>
</html>

image-20240222213251562

⑤border属性

用于设置元素边框的样式、宽度和颜色。例如，border: 1px solid black;会给元素添加一条1像素宽、实线、黑色的边框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 500px;/*1、边框粗细3px 2、实线 solid/虚线 dotted 3、边框颜色red*//*border: 3px solid red;*//*border-left: 3px solid transparent;*/margin: 100px;background-color: #5f5750;border-left: 2px solid transparent;/*position: relative;*/}.c1:hover{border-left: 2px solid red;}</style>
</head>
<body><div class="c1">菜单</div>
</body>
</html>

image-20240222214046179

⑥background-color属性

用于设置元素的背景颜色。例如，background-color: blue;会将元素的背景颜色设置为蓝色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 500px;margin: 100px;background-color: #66CDAA;}</style>
</head>
<body><div class="c1">菜单</div>
</body>
</html>

在这里插入图片描述

注意：以上不是所有的CSS样式，上述仅为开发中常用的核心知识点，通过此篇内容可以帮助你大致了解页面的样式和标签：

后续会了解一些模版，内容包括：

  • 模版的基本使用逻辑
  • 模版 + 自己CSS知识点（开发页面）

很感谢你能看到这里，如有相关疑问，还请下方评论留言。
笔记记录来源：B站 python的web开发全家桶（django+前端+数据库）
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
如果对大家有帮助的话，希望大家能多多点赞+关注！这样我的动力会更足！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/696956.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何计算文件哈希值（MD5值）

如何计算文件哈希值（MD5值）

生成文件hash值的用途 哈希值&#xff0c;即HASH值&#xff0c;是通过对文件内容进行加密运算得到的一组二进制值&#xff0c;主要用途是用于文件校验或签名。正是因为这样的特点&#xff0c;它常常用来判断两个文件是否相同。 比如&#xff0c;从网络上下载某个文件&#xff0…
阅读更多...
C++ Primer Plus 笔记（持续更新）

C++ Primer Plus 笔记（持续更新）

编译器的正解 数据&#xff0b;算法程序 赋值从右向左进行 cin&#xff0c;cout的本质也是对象 类和对象的解释
阅读更多...
OpenAI文生视频大模型Sora概述

OpenAI文生视频大模型Sora概述

Sora&#xff0c;美国人工智能研究公司OpenAI发布的人工智能文生视频大模型&#xff08;但OpenAI并未单纯将其视为视频模型&#xff0c;而是作为“世界模拟器” &#xff09;&#xff0c;于2024年2月15日&#xff08;美国当地时间&#xff09;正式对外发布。 Sora可以根据用户…
阅读更多...
Redis中的AOF重写到底是怎么一回事

Redis中的AOF重写到底是怎么一回事

首先我们知道AOF和RDB都是Redis持久化的方法。RDB是Redis DB&#xff0c;一种二进制数据格式&#xff0c;这样就是相当于全量保存数据快照了。AOF则是保存命令&#xff0c;然后恢复的时候重放命令。 AOF随着时间推移&#xff0c;会越来越大&#xff0c;因为不断往里追加命令。…
阅读更多...
哪些行业适合做小程序？零售电商、餐饮娱乐、旅游酒店、教育生活、医疗保健、金融社交、体育健身、房产汽车、企管等，你的行业在其中么？

哪些行业适合做小程序？零售电商、餐饮娱乐、旅游酒店、教育生活、医疗保健、金融社交、体育健身、房产汽车、企管等，你的行业在其中么？

引言 在当今数字化时代&#xff0c;小程序成为了各行各业快速发展的数字工具之一。它的轻便、灵活的特性使得小程序在多个行业中找到了广泛的应用。本文将探讨哪些行业适合开发小程序&#xff0c;并介绍各行业中小程序的具体应用。 一、零售和电商 在当今数字化的商业环境中&…
阅读更多...
C#之WPF学习之路（2）

C#之WPF学习之路（2）

目录 控件的父类 DispatcherObject类 DependencyObject类 DependencyObject 类的关键成员和方法 Visual类 Visual 类的主要成员和方法 UIElement类 UIElement 类的主要成员和功能 FrameworkElement类 FrameworkElement 类的主要成员和功能 控件的父类 在 WPF (Windo…
阅读更多...
谷粒商城篇章9 ---- P248-P261/P292-P294 ---- 消息队列【分布式高级篇六】

谷粒商城篇章9 ---- P248-P261/P292-P294 ---- 消息队列【分布式高级篇六】

目录 1 消息队列(Message Queue)简介 1.1 概述 1.2 消息服务中两个重要概念 1.3 消息队列主要有两种形式的目的地 1.4 JMS和AMQP对比 1.5 应用场景 1.6 Spring支持 1.7 SpringBoot自动配置 1.7 市面上的MQ产品 2 RabbitMQ 2.1 RabbitMQ简介 2.1.1 RabbitMQ简介 2…
阅读更多...
什么是Elasticsearch SQL

什么是Elasticsearch SQL

什么是Elasticsearch SQL 一. 介绍二. SQL 入门 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 介绍 Elasticsearch SQL 是一个 X-Pack 组件&#xff0c;允许针对 Elasticsea…
阅读更多...
通俗易懂理解G-GhostNet轻量级神经网络模型

通俗易懂理解G-GhostNet轻量级神经网络模型

一、参考资料 原始论文&#xff1a;[1] IJCV22 | 已开源 | 华为GhostNet再升级&#xff0c;全系列硬件上最优极简AI网络 二、G-GhostNet相关介绍 G-GhostNet 又称为 GhostNetV1 的升级版&#xff0c;是针对GPU优化的轻量级神经网络。 1. 摘要 GhostNetV1 作为近年来最流行…
阅读更多...
Leetcode 611.有效三角形的个数

Leetcode 611.有效三角形的个数

题目 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输入: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 2) 2,2,3示例 2: 输入: nums [4,2,3,4] 输出: 4提示: 1 < nums…
阅读更多...
WPF 开发调试比较：Visual Studio 原生和Snoop调试控制台

WPF 开发调试比较：Visual Studio 原生和Snoop调试控制台

文章目录 前言运行环境简单的WPF代码实现一个简单的ListBoxVisual Studio自带代码调试热重置功能测试实时可视化树查找窗口元素显示属性 Snoop调试使用Snoop简单使用调试控制台元素追踪结构树Visual/可视化结构树Logical/本地代码可视化树AutoMation/自动识别结构树 WPF元素控制…
阅读更多...
基于springboot+vue的房屋租赁管理系统(前后端分离)

基于springboot+vue的房屋租赁管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS

手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS

技术栈springboot3hutool-alloshi-coreVue3viteTinyVueEchartsTailwindCSS软件版本IDEAIntelliJ IDEA 2022.2.1JDK17Spring Boot3.1hutool-all5.8.18oshi-core6.4.1Vue35.0.10vite5.0.10axios1.6.7echarts5.4.3 ECharts是一个使用 JavaScript 实现的开源可视化库&#xff0c;可…
阅读更多...
go-zero微服务入门教程

go-zero微服务入门教程

go-zero微服务入门教程 本教程主要模拟实现用户注册和用户信息查询两个接口。 准备工作 安装基础环境 安装etcd&#xff0c; mysql&#xff0c;redis&#xff0c;建议采用docker安装。 MySQL安装好之后&#xff0c;新建数据库dsms_admin&#xff0c;并新建表sys_user&#…
阅读更多...
详细分析Python中的unittest测试框架

详细分析Python中的unittest测试框架

目录 1. 基本知识2. API2.1 断言2.2 setUp() 和 tearDown() 3. Demo 1. 基本知识 unittest 是 Python 标准库中的一个单元测试框架&#xff0c;用于编写和执行测试用例以验证代码的正确性 提供了一种结构化的方法来编写测试&#xff0c;使得测试代码更加模块化和易于维护 以…
阅读更多...
【ACW 服务端】页面操作Java增删改查代码生成

【ACW 服务端】页面操作Java增删改查代码生成

版本: 1.2.2-JDK17-SNAPSHOT 项目地址&#xff1a;wu-smart-acw 演示地址&#xff1a;演示地址 admin/admin Java增删改查代码生成 找到对应菜单 选择你需要的数据实例 选择数据库 选择数据库表 选择客户端&#xff08;如果是本地ACW服务代码启动默认注册上的客户端ID是…
阅读更多...
Maven【1】（命令行操作）

Maven【1】（命令行操作）

文章目录 一丶创建maven工程二、理解pom.xml三、maven的构建命令1.编译操作2.清理操作3.测试操作4.打包操作5.安装操作 一丶创建maven工程 首先创建这样一个目录&#xff0c;然后从命令行里进入这个目录&#xff1a; 然后接下来就在这个命令行里进行操作了。 这个命令是&…
阅读更多...
深度学习发展里程碑事件2006-2024

深度学习发展里程碑事件2006-2024

2006-2024年&#xff0c;深度学习发展经历众多的里程碑事件&#xff0c;一次次地刺激着人们的神经&#xff0c;带来巨大的兴奋。电影还在继续&#xff0c;好戏在后面&#xff0c;期待…… 2006年 深度信念网络&#xff08;DBNs&#xff09;&#xff1a;Geoffrey Hinton与他的学…
阅读更多...
计算机组成原理（9）----硬布线控制器

计算机组成原理（9）----硬布线控制器

控制单元CU若想发出对应的控制信号&#xff0c;则需要以下信息&#xff1a;指令操作码&#xff0c;目前的机器周期&#xff0c;节拍信号&#xff0c;机器状态条件&#xff0c;根据这些信息&#xff0c;CU就能确定在这个节拍下应该发出哪些"微命令"&#xff0c;也就是…
阅读更多...
SQL注入：使用预编译防御SQL注入时产生的问题

SQL注入：使用预编译防御SQL注入时产生的问题

目录 前言 模拟预编译 真正的预编译 预编译中存在的SQL注入 宽字节 没有进行参数绑定 无法预编译的位置 前言 相信学习过SQL注入的小伙伴都知道防御SQL注入最好的方法&#xff0c;就是使用预编译也就是PDO是可以非常好的防御SQL注入的&#xff0c;但是如果错误的设置了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023