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.pswp.cn/news/696956.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/696956.shtml
英文地址，請注明出處：http://en.pswp.cn/news/696956.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【C語言】sizeof()函數

【C語言】sizeof()函數

前言 sizeof函數用于獲取數據類型或變量在內存中所占的字節數。 sizeof函數返回的是編譯時確定的值&#xff0c;不會計算動態分配的內存大小。 sizeof函數可以用于多種類型的數據&#xff0c;包括數組、指針、結構體、枚舉等。 1.數組 int arr[5];printf("%zu ", siz…
閱讀更多...
文件上傳與下載

文件上傳與下載

文件上傳與下載 1. 文件上傳 為了能上傳文件&#xff0c;必須將表單的 method 設置為 POST&#xff0c;并將 enctype 設置為 multipart/form-data 。 有兩種實現文件上傳的方式&#xff1a; 底層使用 Apache Commons FileUpload 包 底層使用 Servlet 3.1 內置的文件上傳功能…
閱讀更多...
如何計算文件哈希值（MD5值）

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

生成文件hash值的用途 哈希值&#xff0c;即HASH值&#xff0c;是通過對文件內容進行加密運算得到的一組二進制值&#xff0c;主要用途是用于文件校驗或簽名。正是因為這樣的特點&#xff0c;它常常用來判斷兩個文件是否相同。 比如&#xff0c;從網絡上下載某個文件&#xff0…
閱讀更多...
MySQL主從同步

MySQL主從同步

MySQL主從同步&#xff08;復制&#xff09;是一種數據復制技術&#xff0c;用于將數據從一個MySQL數據庫&#xff08;稱為“主”&#xff09;復制到另一個或多個MySQL數據庫&#xff08;稱為“從”&#xff09;。這個過程通常用于負載均衡、數據備份、災難恢復和其他類似場景。…
閱讀更多...
C++ Primer Plus 筆記（持續更新）

C++ Primer Plus 筆記（持續更新）

編譯器的正解 數據&#xff0b;算法程序 賦值從右向左進行 cin&#xff0c;cout的本質也是對象 類和對象的解釋
閱讀更多...
centerOS docker搭建flowable，流程引擎

centerOS docker搭建flowable，流程引擎

1、準備一個mysql數據庫&#xff0c;庫名為flowable 2、mysql驅動下載&#xff0c;下載地址為&#xff1a; https://mvnrepository.com/artifact/mysql/mysql-connector-java此處使用的是8.0.22版本的驅動&#xff0c;且數據庫必須使用版本8&#xff0c;否則第二次啟動報錯 3、…
閱讀更多...
OpenAI文生視頻大模型Sora概述

OpenAI文生視頻大模型Sora概述

Sora&#xff0c;美國人工智能研究公司OpenAI發布的人工智能文生視頻大模型&#xff08;但OpenAI并未單純將其視為視頻模型&#xff0c;而是作為“世界模擬器” &#xff09;&#xff0c;于2024年2月15日&#xff08;美國當地時間&#xff09;正式對外發布。 Sora可以根據用戶…
閱讀更多...
samber/lo 庫的使用方法：type

samber/lo 庫的使用方法：type

samber/lo 庫的使用方法&#xff1a;type samber/lo 是一個 Go 語言庫&#xff0c;提供了一些常用的集合操作函數&#xff0c;如 Filter、Map 和 FilterMap。 這個庫函數太多&#xff0c;因此我決定按照功能分別介紹&#xff0c;本文介紹的是 samber/lo 庫中type相關的函數。匯…
閱讀更多...
Redis中的AOF重寫到底是怎么一回事

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

首先我們知道AOF和RDB都是Redis持久化的方法。RDB是Redis DB&#xff0c;一種二進制數據格式&#xff0c;這樣就是相當于全量保存數據快照了。AOF則是保存命令&#xff0c;然后恢復的時候重放命令。 AOF隨著時間推移&#xff0c;會越來越大&#xff0c;因為不斷往里追加命令。…
閱讀更多...
哪些行業適合做小程序？零售電商、餐飲娛樂、旅游酒店、教育生活、醫療保健、金融社交、體育健身、房產汽車、企管等，你的行業在其中么？

哪些行業適合做小程序？零售電商、餐飲娛樂、旅游酒店、教育生活、醫療保健、金融社交、體育健身、房產汽車、企管等，你的行業在其中么？

引言 在當今數字化時代&#xff0c;小程序成為了各行各業快速發展的數字工具之一。它的輕便、靈活的特性使得小程序在多個行業中找到了廣泛的應用。本文將探討哪些行業適合開發小程序&#xff0c;并介紹各行業中小程序的具體應用。 一、零售和電商 在當今數字化的商業環境中&…
閱讀更多...
C++ RAII

C++ RAII

RAII定義 RAII&#xff08;Resource Acquisition Is Initialization&#xff09;是C編程中的一種重要的資源管理技術。它的核心思想是&#xff1a;資源的獲取應該在對象的構造階段進行&#xff0c;而資源的釋放則應該在對象的析構階段進行。通過利用C對象的生命周期和析構函數…
閱讀更多...
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…
閱讀更多...
Android的LiveData

Android的LiveData

LiveData 是一種可觀察的數據存儲器類。與常規的可觀察類不同&#xff0c;LiveData 具有生命周期感知能力&#xff0c;意指它遵循其他應用組件&#xff08;如 activity、fragment 或 service&#xff09;的生命周期。這種感知能力可確保 LiveData 僅更新處于活躍生命周期狀態的…
閱讀更多...
ChatGPT在醫學領域的應用與前景

ChatGPT在醫學領域的應用與前景

標題&#xff1a; ChatGPT在醫學領域的應用與前景 正文&#xff1a; 隨著人工智能技術的不斷進步&#xff0c;ChatGPT等語言模型在醫學領域的應用逐漸深入&#xff0c;展現出其巨大的潛力和廣闊的發展前景。作為一個高級的自然語言處理工具&#xff0c;ChatGPT能夠理解和生成…
閱讀更多...
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…
閱讀更多...
最新文章

Copyright @ 2022~2023