HTML中的盒子模型（内置练习及答案）

努力变厉害的小超超2024-09-26 8:03

一、什么是盒子模型

1.概述

HTML中的盒子模型（Box Model）是CSS布局的基础概念之一，它描述了如何对文档中的元素进行布局和计算大小。每个盒子模型都包括以下几个部分：

  1. 内容（Content） ：这是盒子模型的中心，包含了元素的实际内容，比如文本、图片等。内容区域的大小可以通过设置width和height属性来指定。
  2. 内边距（Padding） ：内边距位于内容区域的外围，将内容与边框隔开。内边距是透明的，其大小可以通过padding属性（包括padding-top、padding-right、padding-bottom、padding-left）来设置。
  3. 边框（Border） ：边框环绕在内边距和内容之外，是可见的。边框的大小、样式和颜色可以通过border属性（如border-width、border-style、border-color）来设置。
  4. 外边距（Margin） ：外边距位于边框的外围，是盒子与其他元素之间的空间。外边距是透明的，其大小可以通过margin属性（包括margin-top、margin-right、margin-bottom、margin-left）来设置。外边距还涉及到元素的定位和其他元素之间的相互作用，比如边距合并（Margin Collapsing）等。

2.盒子模型的总宽度和总高度

盒子的总宽度和总高度由内容区域、内边距、边框和外边距共同决定。具体计算方式如下：

  • 总宽度 = 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距
  • 总高度 = 上外边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下外边距

3.IE盒子模型（怪异模式）与标准盒子模型

需要注意的是，早期的Internet Explorer浏览器实现了一个不同的盒子模型，即IE盒子模型（有时也称为怪异模式）。在这个模型中，元素的width和height属性只包括内容区域，而不包括内边距、边框和外边距。不过，现代的浏览器默认使用标准的盒子模型，即width和height属性包括了内容、内边距和边框，但不包括外边距。

如果你需要在标准模式下模拟IE盒子模型的行为，可以通过设置CSS属性box-sizing: border-box;来实现。这样，元素的width和height属性就会包括内容、内边距和边框，但不包括外边距

二、边框

border

1.边框的属性

1.1border-color

属性 说明
border-top-color 上边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-right-color 右边框颜色
border-color:颜色1 颜色2； 上下边框为颜色1，左右边框为颜色2
border-color:颜色1 颜色2 颜色3 ； 上边框为颜色1，左右边框为颜色2，下边框为颜色3
border-color：颜色1 颜色2 颜色3 颜色4； 颜色顺序：上、右、下、左
bordder-color:颜色; 所有边框同色

如果背景是白色，则可以通过设置边框颜色为白色#fff实现隐藏效果

1.2border-width

边框宽度

thin、medium、thick、具体像素值

1.3border-style

边框样式

dashed:虚线

solid：实线

dotted：圆点虚线

double：两条线

2.border简写

html 复制代码 
#语法（顺序不是固定的）
border:边框粗细 线条样式 颜色；
如：
border：1px solid red；

三、外边距

margin：border和外面的距离

1.margin属性

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • margin 个数归规律同border-color
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03margin外边距</title>
    <style>
        p{
            border: 1px solid red;
            margin-top: 30px;  /*距离上面的距离*/
            margin-left: 30px; /*距离左边的距离*/
            margin-right: 30px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <p>厉害了，美国失业率还在增加</p>
    <h1>厉害了</h1>
</body>
</html>

2.margin简写

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03margin外边距</title>
    <style>
        p{
            border: 1px solid red;
            /* 
            写一个：表示上下左右
            写两个：表示上下和左右
            写三个：表示上，左右和下
            写四个：表示上右下左
            */
            margin: 50px 30px 0px 0px;
        }
    </style>
</head>
<body>
    <p>厉害了，美国失业率还在增加</p>
    <h1>厉害了</h1>
</body>
</html>

3.外边距-网页居中对齐

margin:0px auto;

其中第一个像素表示距离上面的外边距

四、内边距

padding：表示内边距

1.属性

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
  • padding

2.案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员登录</title>
    <style>
        /* 第一步 */
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 真个宽位置等 */
        .box{
            width: 298px;
            border: 1px solid #4D7794;
            margin: 0px auto;
        }
        /* 标题 */
        .box h1{
            font-size: 16px;
            background-color: #3A6587;
            line-height: 35px;
            color: #fff;
            text-indent: 1em;
        }
        /* 表单 */
        form{
            background-color: #C8ECE3;
            padding: 30px 10px;
        }
        div{
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>会员登录</h1>
        <form action="#" method="get">
            <div>
                <strong>姓名：</strong>
                <input type="text" name="name" id="">
            </div>
            <div>
                <strong>邮箱：</strong>
                <input type="text" name="name" id="">
            </div>
            <div>
                <strong>电话：</strong>
                <input type="text" name="name" id="">
            </div>
        </form>
    </div>
</body>
</html>

五、盒子模型的尺寸

1.box-sizing

css 复制代码 
/*
语法：
box-sizing:默认值，盒子的总尺寸 | 盒子的宽度或高度等元素内容的宽度或高度 | 元素继承父元素的盒子模型模式
*/
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08.box-sizing</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            padding: 5px;
            margin: 10px;
            /* 默认值content-box */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

六、练习

1.练习1

  • 需求：
  • 整个宽度220px，边框1px 实线 #aacbee，背景颜色：#f5f9fc ，相对于网页居中
  • 标题：有背景图片，字体大小14px，行高30像素
  • 内容项：每一个li高度为30px，padding-left：5px，上边框：1px #cfe2f5 solid，向右边箭头是背景图片
  • 每个li鼠标放在上面字的颜色变为#ff6215 （没有下划线）
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程导航</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        ul li{
            list-style: none;
        }
        /* 整个div */
        #course_list{
            width: 220px;
            border: 1px #aacbee solid;
            margin: 0px auto;
            padding: 0px 0px 10px 0px;
            background-color: #f5f9fc;
        }
        /* 标题 */
        #course_list .title{
            color: #1f376d;
            font-size: 14px;
            line-height: 30px;
            padding-left: 25px;
            background: url(image/title_icon.gif) no-repeat 5px 8px;
        }
        /* ul */
        #course_list ul {
            padding: 0px 5px;
        }
        /* ul li */
        #course_list ul li{
            line-height: 30px;
            background: url(image/submenu.gif) no-repeat right center;
            border-top: 1px #cfe2f5 solid;
        }
        /* a标签 */
        #course_list ul li a{
            text-decoration: none;
            color: #000;
        }
        /* 鼠标放上去a标签的样式 */
        #course_list ul li a:hover{
            text-decoration: none;
            color: #ff6215;
        }
        
    </style>
</head>
<body>
    <div id="course_list">
        <h1 class="title">课程导航</h1>
        <ul>
            <li>
                <a href="#">ACCP 软件工程师</a>
            </li>
            <li>
                <a href="#">BTEST 软件测试工程师</a>
            </li>
            <li>
                <a href="#">ACCP 软件工程师</a>
            </li>
            <li>
                <a href="#">ACCP 软件工程师</a>
            </li>
            <li>
                <a href="#">BTEST 软件测试工程师</a>
            </li>
            <li>
                <a href="#">ACCP 软件工程师</a>
            </li>
        </ul>
    </div>
</body>
</html>

2.练习2

需求：

  • 整个body的背景颜色：#D5D5D5
  • 整个div的宽度230px，背景颜色：#fff
  • 标题标签：字体大小16px 、加粗、字体颜色为#fff、背景颜色为#000，首航缩进1em，行高35px
  • dt：左边内边距（padding-left）：27px，行高35px、字体大小14px，加粗
  • dd：字体大小12px，颜色#666，行高20，下边框：1px #666 dashed；，并且padding-left：27px
  • dd前面背景图片 0px 2px
css 复制代码 
*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #D5D5D5;
}
/* div盒子 */
#product{
    width: 230px;
    background-color: #fff;
    margin: 5px 10px 10px 10px;
}
/* 标题 */
#product h1{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #000;
    line-height: 35px;
    text-indent: 1em;
}
/* dt：副标题 */
#product dt{
    padding-left: 27px;
    line-height: 35px;
    font-size: 14px;
    font-weight: bold;
}
/* dd */
#product dd {
    font-size: 12px;
    color: #666;
    line-height: 20px;
    padding-left: 27px;
    border-bottom: 1px #666 dashed;
}
/* 最后一个dd没有下划线 */
#product dd:last-child{
    border-bottom: 0px;
}

#product dt:nth-of-type(1){
    background: url(../image2/icon_01.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(2){
    background: url(../image2/icon_02.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(3){
    background: url(../image2/icon_03.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(4){
    background: url(../image2/icon_04.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(5){
    background: url(../image2/icon_05.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(6){
    background: url(../image2/icon_06.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(7){
    background: url(../image2/icon_07.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(8){
    background: url(../image2/icon_08.gif) no-repeat 0px 2px;
}
#product dt:nth-of-type(9){
    background: url(../image2/icon_09.gif) no-repeat 0px 2px;
}
html 复制代码 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品分类</title>
    <link href="css/product.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="product">
    <h1>全部分类</h1>
    <dl>
        <dt>护肤</dt>
        <dd>洁面 化妆水 喷雾 美容液 眼霜<br/>
            眼部精华 眼膜 面膜 面膜贴<br/>
            水洗面膜 免洗面膜 精华 精油<br/>
            凝露 乳液 面霜 日霜 晚霜
        </dd>
        <dt>彩妆</dt>
        <dd>卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
            睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
            底妆 遮瑕 蜜粉 眉笔 美甲
        </dd>
        <dt>香氛</dt>
        <dd>男香 女香 小Q装 中性香水</dd>

        <dt>身体护理</dt>
        <dd>洗发 护发 沐浴 身体乳 手足护理<br/>
            护手霜 纤体 身体精油 颈部护理<br/>
            个人护理 卫生用品 脱毛
        </dd>
        <dt>礼盒套装</dt>
        <dd>护肤套装 身体护理套装 彩妆套装 <br/>
            旅行装 香水套装 男士套装
        </dd>
        <dt>美容工具</dt>
        <dd>护肤 彩妆 美发 美体 美甲 <br/>
            美容仪器 其他美容工具
        </dd>
        <dt>母婴专区</dt>
        <dd>奶粉 尿裤湿巾 母婴洗护</dd>
        <dt>男士专区</dt>
        <dd>洁面 爽肤水 面霜 男香<br/>
            眼霜 凝胶 乳液 精华 沐浴
        </dd>
        <dt>食品保健</dt>
        <dd>瘦身类 保健类 美容类 食品类</dd>
    </dl>
</div>
</body>
</html>

3.练习3

需求：

  • 盒子的宽度是230px，盒子的外边距是30px，边框为1px实线灰色，盒子模型解析方式为border-box
  • 标题背景颜色为线性渐变，文字垂直居中
  • 使用无序列表
    • 制作快报列表
  • 列表的行高26px，左右空隙为26px，鼠标移入列表项文字时候字体颜色变为暗红色
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11京东快报</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            margin: 30px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        /* 盒子 */
        .box{
            border: 1px solid #e4e4e4;
            width: 230px;
            box-sizing: border-box;
        }
        .box h2{
            padding-left: 10px;
            line-height: 43px;
            font-size: 16px;
            border-bottom: 2px #e8e8e7 dotted;
            color: #666;
            font-weight: normal;
            background: linear-gradient(to bottom,#CECEFF,#FDFDFF);
        }
        .box ul {
            list-style: none;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .box ul li{
            line-height: 26px;
            padding-left: 10px;
            padding-right: 10px;
        }
        .box ul li a{
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        .box ul li a:hover{
            color: #B20000;
        }
        .box ul li a span{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>京东快报</h2>
        <ul>
            <li><a href="#"><span>[特惠]</span>海飞丝去屑又去油 超清爽</a></li>
            <li><a href="#"><span>[公告]</span>京东公益支持鲁甸新动作</a></li>
            <li><a href="#"><span>[特惠]</span>4688元抢iPhone 6</a></li>
            <li><a href="#"><span>[公告]</span>小米电视携豪礼高调入驻京东</a></li>
        </ul>
    </div>
</body>
</html>

七、圆角边框

1.语法

css 复制代码 
/*
border-radiuds: 20px 20px 20px 20px
*/
/*这四个属性值按照顺时针排列的*/

2.案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12.圆角边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 四个角都是圆角，值一样 
            border-radius: 20px;*/
            /* 写两个值：第一个是左上和右下，第二个是右上和左下 
            border-radius: 30px 20px;*/
            /* 写三个值：第一个是左上，第二个是右上和左下，第三个是右下 
            border-radius: 30px 10px 50px;*/
            /* 写四个值：分别是左上、右上、左下和右下 */
            border-radius: 10px 30px 50px 60px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.特殊图形

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊图形</title>
    <style>
        div{
            margin-bottom: 20px;
        }
        /* 圆 */
        .div1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
        /* 上半圆 */
        .div2{
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            background-color: red;
        }
        /* 下半圆 */
        .div3{
            width: 100px;
            height: 50px;
            border-radius: 0 0 50px 50px ;
            background-color: red;
        }
        /* 左半圆 */
        .div4{
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px ;
            background-color: red;
        }
        /* 右半圆 */
        .div5{
            width: 50px;
            height: 100px;
            border-radius: 0  50px 50px 0 ;
            background-color: red;
        }
    </style>
</head>
<body class="body">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</body>
</html>

4.练习4

需求：

body：背景颜色是#eee7e1，字体大小12px

  • div宽度：260px，背景颜色为#fff
  • 标题：字体大小14px，加粗，颜色#fff，背景颜色为#e9185a，行高35px，padding-left=10px
  • li：border-bottom：1px #a8a5a5 dashed；行高30px，padding-left=2px
    • a标签color：#666，无下划线，鼠标放上去颜色#e9185a
    • 数字是放在span标签中的，数字字体颜色是#fff，加粗，padding 3px 8px，圆形，
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15.彩妆列表</title>
    <style>
        *{
            margin: 0px;
            padding: 0;
        }
        body{
            background-color: #EEE7E1;
            font-size: 12px;
        }
        /* div盒子 */
        #beauty{
            width: 260px;
            background-color: #fff;
            margin: 10px;
        }
        /* 标题 */
        #beauty p{
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            background-color: #e9185a;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
        }
        /* li */
        #beauty li{
            border-bottom: 1px dashed #a8a5a5;
            height: 30px;
            line-height: 30px;
            padding-left: 2px;
        }
        #beauty a{
            color: #666;
            text-decoration: none;
        }
        #beauty a:hover{
            color: #e9185a;
            text-decoration: none;
        }
        /* span */
        #beauty ul li a span{
            /* padding: 3px 8px; */
            /* 行内元素，可以转换成块级元素(block),也可以将块级变行内元素(inline) ,行内块级元素(inline-block)*/
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #373b3c;
            border-radius: 50%;
            color: #fff;
            font-weight: bold;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        #beauty a:hover span{
            background-color: #e9185a;
        }
    </style>
</head>
<body>
    <div id="beauty">
        <p>大家都喜欢买的美容品</p>
        <ul>
            <li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
            <li><a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a></li>
            <li><a href="#"><span>4</span>巨型一号丝瓜水320ML</a></li>
            <li><a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a></li>
            <li><a href="#"><span>6</span>比度克细肤淡印霜 30g</a></li>
            <li><a href="#"><span>7</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
            <li><a href="#"><span>8</span>SK-II护肤精华露 215ml</a></li>
            <li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li>
        </ul>
    </div>

</body>
</html>

八、盒子阴影

1.语法

html 复制代码 
box-shadow: 阴影的类型 x轴位移 y轴位移  阴影模糊半径 阴影的颜色；

阴影类型：默认值为outset（向外扩散） 可选inset（向内扩散）

x轴位移：指定阴影水平位移量

y轴位移：指定阴影垂直位移量

阴影模糊半径：向外模糊的模糊范围

阴影的颜色：定义绘制阴影时所使用的颜色

2.案例

2.练习5

需求： ul li : display: inline-block;

  • 盒子的宽度为：1000px，水平居中显示 margin:50px auto
  • 标题（热播）文字大小设置为18px，行高40pxr
  • li列表项内边距为10px，外右边距为5px
    • li中的标题，字体大小16px，行高30px
    • 中间的文字，字体大小14px，字体颜色#640000，行高20px
    • 最下面蓝色文字，字体大小12px，字体颜色blue，行高20
  • 给图片添加圆角效果
  • 鼠标移入列表时添加阴影
    • border-color：#dfdfdf，圆角border-radius=10px， box-shadow：0 5px 5px rgba(0,0,0,0.1)
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热播</title>
    <style>
        *{
            margin: 0;
            padding: 0px;
        }
        .box {
            width: 1000px;
            margin: 50px auto;
        }
        .box h3{
            font-size: 18px;
            line-height: 40px;
        }
        .box ul li {
            display: inline-block;
            list-style: none;
            margin-right: 5px;
            padding: 10px;
        }
        
        li img{
            border-radius: 10px;
        }
        .box li h4{
            font-size: 16px;
            color: #4d4d4d;
            line-height: 35px;
        }
        .box li p:nth-of-type(1){
            color: #640000;
            font-size: 14px;
            line-height: 20px;
        }
        .box li p:nth-of-type(2){
            font-size: 12px;
            color: blue;
            line-height: 20px;
        }
        ul li:hover{
            border-color: #dfdfdf;
            border-radius: 10px;
            box-shadow: 0 0px 5px rgba(0, 0, 0,0.3);
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>热播</h3>
        <ul>
            <li>
                <img src="image2/img1.png" alt="">
                <h4>神武赵子龙</h4>
                <p>怒，林更新不抱网红抱女神</p>
                <p>点击次数：242445次</p>
            </li>
            <li>
                <img src="image2/img2.png" alt="">
                <h4>旋风十一人</h4>
                <p>胡歌变教练在撩前女友</p>
                <p>点击次数：242445次</p>
            </li>
            <li>
                <img src="image2/img3.png" alt="">
                <h4>太阳的后裔</h4>
                <p>宋慧乔吃嫩草</p>
                <p>点击次数：242445次</p>
            </li>
            <li>
                <img src="image2/img4.png" alt="">
                <h4>山海经之赤影传说</h4>
                <p>娜扎张翰再度联手</p>
                <p>点击次数：242445次</p>
            </li>
        </ul>
    </div>
</body>
</html>
相关推荐
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE：基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下，循环加不同背景颜色
前端·javascript·html
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic8 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作