前端 | （ 九）尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新

news2024/11/27 12:38:04

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频

文章目录

  • 📚顶部导航条
  • 📚头部
  • 📚主导航
  • 📚内容区_侧边导航
  • 📚内容区_侧边二级菜单⭐️
  • 📚内容区_右侧尚品快报
  • 📚内容区_右侧图标导航（关注精灵图）
  • 📚秒杀
  • 📚楼层_顶部
  • 📚楼层_底部
  • 📚页脚

⭐️前文回顾：前端 | （ 八）定位与布局 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p139-p147，本文对应p148-p159
⭐️补充网站：W3school，MDN

📚顶部导航条

在这里插入图片描述

<!-- 顶部导航条 -->
<div class="topbar">
    <!-- 版心 -->
    <div class="container clearfix">
        <!-- 左侧的欢迎区 -->
        <div class="welcome leftfix">
            <span class="hello">尚品汇欢迎您</span>
            <span>请</span>
            <a href="#" class="login">登录</a>
            <a href="#" class="register">免费注册</a>
        </div>
        <!-- 右侧的导航区 -->
        <div class="topbar-nav rightfix">
            <ul class="list clearfix">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的购物车</a></li>
                <li><a href="#">我的尚品汇</a></li>
                <li><a href="#">尚品汇会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">关注尚品汇</a></li>
                <li><a href="#">合作招商</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
        </div>
    </div> 
</div>

/* 基础设置——版心 */
.container{
    width: 1190px;
    margin: 0 auto;
    /* 临时加背景色和高度观察 */
    /* height: 300px;
    background-color: orange; */
}

/* #region顶部导航条start */
.topbar{
    height: 30px;
    background-color: #ECECEC;
}
.welcome{
    height: 30px;
    line-height: 30px;
    font-size: 0px;
    color: #666;
}
.welcome span,.welcome a{
    font-size: 12px;
}
.welcome .hello{
    margin-right: 28px;
}
.welcome .login{
    padding-right: 10px;
    border-right: 1px solid #666;
}
.welcome .register{
    padding-left: 10px;
}
.topbar-nav .list{
    height: 30px;
    line-height: 30px;
}
.topbar-nav .list li{
    float: left;
}
.topbar-nav .list li a{
    padding: 0 15px;
    border-right: 1px solid #666;
}
.topbar-nav .list li:first-child a{
    padding-left: 0;
}
.topbar-nav .list li:last-child a{
    padding-right: 0;
    border: 0;
}
/* #endregion顶部导航条end */

在这里插入图片描述

#region和#endregion搭配就可以实现css样式强制折叠

📚头部

在这里插入图片描述

<!-- 头部 -->
<div class="header">
    <div class="container clearfix">
        <!-- 左侧的logo区 -->
        <div class="logo leftfix">
            <img src="./image/logo.png" alt="尚品汇">
        </div>
        <!-- 右侧的搜索区 -->
        <div class="search rightfix">
            <form action="#">
                <input type="text">
                <button></button>
            </form>
        </div>
    </div>
</div>

/* #region头部start */
.header{
    height: 120px;
    /* 先带着背景色，画下边部分同样更便于观察 */
    background-color: skyblue;
}
.header .search form{
    margin-top: 42px;
    font-size: 0;
}
.header .search input{
    width: 508px;
    height: 34px;
    border: 1px solid #DD302D;
}
.header .search button{
    width: 80px;
    height: 36px;
    background-color: #DD302D;
    /* 解决文字基线问题造成的不对齐 */
    vertical-align: top;
    background-image: url('../image/serch_icon.png');
    background-repeat: no-repeat;
    background-position: 28px 6px;
}
/* #endregion头部end */

在这里插入图片描述

📚主导航

在这里插入图片描述

<!-- 主导航区 -->
<div class="main-nav">
    <div class="container clearfix">
        <div class="all-types leftfix">全部商品分类</div>
        <ul class="main-nav-list leftfix clearfix">
            <li><a href="#">尚品超市</a></li>
            <li><a href="#">优惠券</a></li>
            <li><a href="#">买啥</a></li>
            <li><a href="#">尚品家电</a></li>
            <li><a href="#">尚品生鲜</a></li>
            <li><a href="#">plus会员</a></li>
            <li><a href="#">进口好物</a></li>
            <li><a href="#">品牌闪购</a></li>
            <li><a href="#">拍卖</a></li>
            <li><a href="#">五金店</a></li>
        </ul>
    </div>
</div>

/* #region主导航start */
.main-nav{
    height: 48px;
    border-bottom: 1px solid #DD302D;
}
.main-nav .all-types{
    width: 190px;
    height: 48px;
    line-height: 48px;
    background-color: #DD302D;
    color: white;
    text-align: center;
    font-size: 16px;
}
.main-nav-list{
    height: 48px;
    line-height: 48px;
}
.main-nav-list li{
    float:left;
    margin:0 10px;
}
/* #endregion主导航end */

在这里插入图片描述

📚内容区_侧边导航

在这里插入图片描述

<!-- 主要内容区 -->
<div class="main-content">
     <div class="container clearfix">
         <ul class="slide-nav leftfix">
             <li><a href="#">手机/运营商/数码</a></li>
             <li><a href="#">电脑/办公</a></li>
             <li><a href="#">家具/家居/家装/厨具</a></li>
             <li><a href="#">男装/女装/童装/内衣</a></li>
             <li><a href="#">美妆/个护清洁/宠物</a></li>
             <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
             <li><a href="#">男鞋/运动/户外</a></li>
             <li><a href="#">房产/汽车/汽车用品</a></li>
             <li><a href="#">母婴/玩具乐器</a></li>
             <li><a href="#">食品/酒类/生鲜/特产</a></li>
             <li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
             <li><a href="#">医药保健/计生情趣</a></li>
             <li><a href="#">图书/文娱/教育/电子书</a></li>
             <li><a href="#">机票/酒店/旅游/生活</a></li>
             <li><a href="#">众筹/白条/保险/企业金融</a></li>
             <li><a href="#">安装/维修/清洗/二手</a></li>
         </ul>
         <div class="banner leftfix"></div>
         <div class="slide-other leftfix"></div>
     </div>
 </div>

/* #region主要内容区start */
.main-content{
    margin-top: 10px;
}
.main-content .slide-nav{
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
}
.main-content .slide-nav li{
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    /* 背景色不填充margin，但填充padding */
    padding-left: 16px;
}
.main-content .slide-nav li:hover{
    background-color: #DD302D;
}
.main-content .slide-nav li:hover>a{
    color: white;
}
.main-content .banner{
    width: 690px;
    height: 458px;
    background-color: green;
    margin: 0 10px;
}
.main-content .slide-other{
    width: 290px;
    height: 458px;
    background-color: orange;
}
/* #endregion主要内容区end */

在这里插入图片描述

📚内容区_侧边二级菜单⭐️

在这里插入图片描述

html关键部分：在li里加div二级菜单，采用自定义列表。
在这里插入图片描述

关键css设置：固定定位，并以爷爷元素second-menu为参照。

.main-content{
    margin-top: 10px;
}
.main-content .slide-nav{
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
    position: relative;
}
.main-content .slide-nav li{
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    /* 背景色不填充margin，但填充padding */
    padding-left: 16px;
}
.main-content .slide-nav li:hover{
    background-color: #DD302D;
}
.main-content .slide-nav li:hover>a{
    color: white;
}
.second-menu{
    width: 680px;
    height: 458px;
    background-color: rgb(247, 238, 238);
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;
}
.main-content .slide-nav li:hover .second-menu{
    display: block;
}
.second-menu dl{
    height: 36px;
    line-height: 36px;
}
.second-menu dl:first-child{
    margin-top: 10px;
}
.second-menu dt{
    float: left;
    width: 70px;
    font-weight: bold;
    margin-right: 10px;
}
.second-menu dd{
    float: left;
}
.second-menu dd a{
    padding: 0 10px;
    border-left: 1px solid #666;
}

在这里插入图片描述

中间banner主图咱们先不做轮播，直接放个图

<!-- 中间部分banner主图 -->
<div class="banner leftfix">
    <img src="./image/banner主图.png" alt="主图">
</div>

在这里插入图片描述

📚内容区_右侧尚品快报

在这里插入图片描述

<div class="slide-other leftfix">
   <div class="message">
        <div class="title clearfix">
            <span class="leftfix">尚品快报</span>
            <a href="#" class="rightfix">更多&nbsp;&gt</a>
        </div>
        <ul class="msg-list">
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
        </ul>
    </div>
    <div class="othernav"></div>
</div>

.slide-other .message{
    width: 260px;
    height: 156px;
    padding: 0 14px;
    border: 1px solid #D9D9D9;
}
.slide-other .message .title{
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #D9D9D9;
}
.slide-other .message .title span{
    font-size: 14px;
}
.slide-other .message .title a{
    font-size: 12px;
}
.slide-other .msg-list li{
    height: 26px;
    line-height: 26px;
}

在这里插入图片描述

📚内容区_右侧图标导航（关注精灵图）

在这里插入图片描述

<!-- 关键部分，每一行开一个ul -->
<ul class="other-nav-list clearfix">
    <li>
        <div class="picture"></div>
        <span>话费</span>
    </li>
    <li>
        <div class="picture"></div>
        <span>话费</span>
    </li>
    <li>
        <div class="picture"></div>
        <span>话费</span>
    </li>
    <li>
        <div class="picture"></div>
        <span>话费</span>
    </li>
</ul>

.slide-other .other-nav{
    margin-top: 10px;
    width: 290px;
    height: 290px;
    /* background-color: gray; */
    overflow: hidden;
}
.other-nav-list:first-child{
    margin-top: 16px;
}
.other-nav-list:nth-child(2){
    margin: 17px 0;
}
.other-nav-list li{
    width: 48px;
    height: 70px;
    /* background-color: rgb(242, 246, 248); */
    float:left;
    margin: 0 11px;
    text-align: center;
    cursor:pointer;
}
.other-nav-list li:first-child{
    margin-left: 16px;
}
.other-nav-list .picture{
    width: 48px;
    height: 48px;
    background-image: url(../image/精灵图-侧边功能.png);
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture {
    background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture {
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture {
    background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture {
    background-position: -144px 0;
}
.other-nav-list:nth-child(2) li:nth-child(1) .picture {
    background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture {
    background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture {
    background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture {
    background-position: -144px -48px;
}
.other-nav-list:nth-child(3) li:nth-child(1) .picture {
    background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture {
    background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture {
    background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture {
    background-position: -144px -96px;
}

在这里插入图片描述

📚秒杀

<!-- 秒杀 -->
    <div class="seckill">
        <div class="container .clearfix">
            <img src="./image/seckill.png" alt="秒杀">
            <img src="./image/banner1.png" alt="秒杀1">
            <img src="./image/banner2.png" alt="秒杀2">
            <img src="./image/banner3.png" alt="秒杀3">
            <img src="./image/baner4.png" alt="秒杀4">
        </div>
    </div>

/* #region秒杀start */
.seckill{
    margin-top: 10px;
}
.seckill img{
    float: left;
    margin-right: 11px;
    cursor: pointer;
}
.seckill img:last-child{
    margin-right: 0;
}
/* #endregion秒杀end */

在这里插入图片描述

📚楼层_顶部

在这里插入图片描述

<!-- 楼层 -->
<div class="floor">
     <div class="container">
         <!-- 上部分 -->
         <div class="floor-nav clearfix">
             <span class="floor-name leftfix">家用电器</span>
             <ul class="floor-nav-list rightfix">
                 <li><a href="#">热门</a></li>
                 <li><a href="#">大家电</a></li>
                 <li><a href="#">生活电器</a></li>
                 <li><a href="#">厨房电器</a></li>
                 <li><a href="#">应季电器</a></li>
                 <li><a href="#">空气/净水</a></li>
                 <li><a href="#">高端电器</a></li>
             </ul>
         </div>
         <!-- 下部分 -->
         <div class="floor-info clearfix">
             <div class="item item1">1</div>
             <div class="item item2">2</div>
             <div class="item item3">3</div>
             <div class="item item4">4</div>
             <div class="item item5">5</div>
         </div>
     </div>
 </div>

.floor{
    margin-top: 48px;
}
.floor-name{
    font-size: 20px;
}
.floor-nav{
    height: 30px;
    padding-bottom: 4px;
    line-height: 30px;
    border-bottom: 2px solid #DD302D;
}
.floor-nav-list li{
    float: left;
    font-size: 14px;
}
.floor-nav-list li a{
    padding: 0 10px;
    border-right: 1px solid #666;
}
.floor-nav-list li:first-child a{
    padding-left: 0;
}
.floor-nav-list li:last-child a{
    padding-right: 0;
    border: 0;
}
.floor-info .item{
    float: left;
}
.floor-info .item1{
    width: 230px;
    height: 432px;
    background-color: pink;
}
.floor-info .item2{
    width: 340px;
    height: 432px;
    background-color: gray;
}
.floor-info .item3{
    width: 206px;
    height: 432px;
    background-color: green;
    border-right: 1px solid #e2e2e2;
}
.floor-info .item4{
    width: 206px;
    height: 432px;
    background-color: skyblue;
    border-right: 1px solid #e2e2e2;
}
.floor-info .item5{
    width: 206px;
    height: 432px;
    background-color: orange;
}

在这里插入图片描述

📚楼层_底部

<!-- 下部分 -->
<div class="floor-info clearfix">
    <div class="item item1">
        <ul class="item1-list clearfix">
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">4K电视</a></li>
            <li><a href="#">空气净化器</a></li>
            <li><a href="#">IH电饭煲</a></li>
            <li><a href="#">滚筒洗衣机</a></li>
            <li><a href="#">电热水器</a></li>
        </ul>
        <img src="./image/编组.png" alt="广告">
    </div>
    <div class="item item2">
        <img src="./image/appliance_banner07.png" alt="广告">
    </div>
    <div class="item item3">
        <img src="./image/微波炉.png" alt="广告">
        <img src="./image/空气炸锅.png" alt="广告">
    </div>
    <div class="item item4">
        <img src="./image/冰箱.png" alt="冰箱">
    </div>
    <div class="item item5">
        <img src="./image/电饭煲.png" alt="广告">
        <img src="./image/电饭煲2.png" alt="广告">
    </div>
</div>

.floor-info .item{
    float: left;
}
.floor-info .item1{
    width: 190px;
    height: 392px;
    background-color: #F4F4F4;
    padding: 20px;
}
.item1-list{
    margin-bottom: 29px;
}
.item1-list li{
    width: 90px;
    height: 22px;
    padding-bottom: 3.5px;
    border-bottom: 1px solid #D9D9D9;
    font-size: 16px;
    text-align: center;
}
.item1-list li:nth-child(2n-1){
    float: left;
}
.item1-list li:nth-child(2n){
    float: right;
}
.item1-list li:nth-child(3),
.item1-list li:nth-child(4){
    margin: 14.4px 0;
}
.floor-info .item2{
    width: 340px;
    height: 432px;
    /* background-color: gray; */
}
.floor-info .item3,
.floor-info .item4,
.floor-info .item5{
    width: 206px;
    height: 432px;
    /* background-color: green; */
    border-right: 1px solid #e2e2e2;
}
.floor-info .item5{
    border: 0;
}
.floor-info .item3 img,
.floor-info .item4 img,
.floor-info .item5 img
{
    border-bottom: 1px solid #E2E2E2;
}

在这里插入图片描述

📚页脚

在这里插入图片描述

<!-- 页脚 -->
<div class="footer">
    <div class="container">
         <!-- 顶部链接 -->
         <div class="top-links clearfix">
             <ul class="links-list">
                 <li><a href="#">购物指南</a></li>
                 <li><a href="#">购物流程</a></li>
                 <li><a href="#">会员介绍</a></li>
                 <li><a href="#">生活旅行</a></li>
                 <li><a href="#">常见问题</a></li>
                 <li><a href="#">大家电</a></li>
                 <li><a href="#">联系客服</a></li>
             </ul>
             <ul class="links-list">
                 <li><a href="#">配送方式</a></li>
                 <li><a href="#">上门自提</a></li>
                 <li><a href="#">211限时达</a></li>
                 <li><a href="#">配送服务查询</a></li>
                 <li><a href="#">配送费收取标准</a></li>
             </ul>
             <ul class="links-list">
                 <li><a href="#">支付方式</a></li>
                 <li><a href="#">货到付款</a></li>
                 <li><a href="#">在线支付</a></li>
                 <li><a href="#">生活旅行</a></li>
                 <li><a href="#">分期付款</a></li>
                 <li><a href="#">公司转账</a></li>
             </ul>
             <ul class="links-list">
                 <li><a href="#">售后服务</a></li>
                 <li><a href="#">售后政策</a></li>
                 <li><a href="#">价格保护</a></li>
                 <li><a href="#">退款说明</a></li>
                 <li><a href="#">返修/退换货</a></li>
                 <li><a href="#">取消订单</a></li>
             </ul>
             <ul class="links-list">
                 <li><a href="#">特色服务</a></li>
                 <li><a href="#">夺宝岛</a></li>
                 <li><a href="#">DIY装机</a></li>
                 <li><a href="#">延保服务</a></li>
                 <li><a href="#">尚品汇E卡</a></li>
                 <li><a href="#">尚品汇通信</a></li>
                 <li><a href="#">尚品鱼座智能</a></li>
             </ul>
             <ul class="links-list">
                 <li><a href="#">自营覆盖区县</a></li>
                 <li><a href="#">尚品汇已向全国2661个区县</a></li>
                 <li><a href="#">提供自 营配送服务，支持货到</a></li>
                 <li><a href="#">付款、POS 机刷卡和售后上门</a></li>
                 <li><a href="#">常见问题</a></li>
                 <li><a href="#">服务</a></li>
                 <li><a href="#">查看详情</a></li>
             </ul>
         </div>
         <!-- 分隔线 -->
         <div class="line"></div>
         <!-- 底部链接 -->
         <div class="bottom-links">
             <ul class="bottom-links-list clearfix">
                 <li><a href="#">关于我们</a></li>
                 <li><a href="#">联系我们</a></li>
                 <li><a href="#">联系客服</a></li>
                 <li><a href="#">合作招商</a></li>
                 <li><a href="#">商家帮助</a></li>
                 <li><a href="#">营销中心</a></li>
                 <li><a href="#">手机尚品</a></li>
                 <li><a href="#">友情链接</a></li>
                 <li><a href="#">销售联盟</a></li>
                 <li><a href="#">隐私政策</a></li>
             </ul>
             <div class="copyright">京ICP备12345678901</div>
         </div>
     </div>
 </div>

/* #region页脚start */
.footer{
    height: 440px;
    background-color: #483E3E;
    margin-top: 48px;
}
.links-list{
    float: left;
    width: 190px;
    height: 176px;
    margin-top: 48px;
    margin-right: 10px;
}
.links-list:last-child{
    margin-right: 0;
}
.links-list a{
    color: white;
    font-size: 14px;
}
.line{
    height: 1px;
    margin-top: 22px;
    background-color: #584D4D;
}
.bottom-links{
    text-align: center;
    margin-top: 47px;
}
.bottom-links-list{
    display: inline-block;
}
.bottom-links-list li{
    float: left;
}
.bottom-links-list li a{
    padding: 0 20px;
    border-right: 1px solid white;
    color: white;
}
.bottom-links-list li:first-child a{
    padding-left: 0;
}
.bottom-links-list li:last-child a{
    padding-right: 0;
    border: 0;
}
.copyright{
    color: white;
    margin-top: 10px;
}
/* #endregion页脚end */

在这里插入图片描述

⭐️最后效果
在这里插入图片描述

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

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

相关文章

docker安装mysql8.0+

docker安装mysql8.0+

文章目录 1.docker仓库找到需要的镜像版本2.安装Mysql镜像3.创建mysql配置文件4.创建mysql容器并运行5.建立软连接6.开放3306端口7.登录mysql8.修改mysql密码9.查看mysql日志10.重启mysql10.外部如何访问mysql 1.docker仓库找到需要的镜像版本 镜像仓库 2.安装Mysql镜像 找到所…
阅读更多...
Redis九种数据类型及其持久化机制：探索数据存储的奇妙世界

Redis九种数据类型及其持久化机制：探索数据存储的奇妙世界

目录 一、9种数据类型 3.1 Key操作 3.1.1 相关命令 练习&#xff1a; 3.2 String 3.2.1 结构图 3.2.2 相关命令 练习&#xff1a; 3.3 List(双向的链表) 3.3.1 结构图 3.3.2 相关命令 练习&#xff1a; 3.4 Set&#xff08;无序集合&#xff09; 3.4.1 结构图 3.4…
阅读更多...
【GeoDa实用技巧100例】010：制作平滑地图

【GeoDa实用技巧100例】010：制作平滑地图

文章目录 一、平滑地图介绍二、加载实验数据三、平滑地图制作四、注意事项一、平滑地图介绍 平滑地图(Smooth，或称滑动平均地图)是以“平滑”的观测值(简称平滑值)，而非实际的观测值编制的地图。某个地域单位的所谓平滑值是指该地域单位与周围地区观测值的平均值。地图平滑化…
阅读更多...
精通正则表达式 - 打造高效正则表达式

精通正则表达式 - 打造高效正则表达式

目录 一、典型示例 1. 稍加修改——先迈最好使的腿 2. 效率 vs 准确性 3. 继续前进——限制匹配优先的作用范围 4. “指数级”匹配 二、全面考察回溯 1. 传统 NFA 的匹配过程 2. POSIX NFA 需要更多处理 3. 无法匹配时必须进行的工作 4. 看清楚一点 5. 多选结构的代…
阅读更多...
zabbix 企业级监控 (5) Zabbix监控nginx

zabbix 企业级监控 (5) Zabbix监控nginx

目录 简介 配置yum仓库 Web Zabbix端添加主机 启用之前自动发现的规则及动作 简介 nginx在生产环境中的应用越来越广泛&#xff0c;所以需要对nginx的性能状态做一些监控来发现出来出现的问题。zabbix监控nginx&#xff0c;首先确认nginx的监控指标&#xff0c;主要有&#…
阅读更多...
HTML中常用的标签

HTML中常用的标签

注释标签&#xff1a;<!--内容--> 标题标签&#xff1a;<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6> 段落标签&#xff1a;<p></p> 没有<p></p>时…
阅读更多...
数据备份和恢复练习

数据备份和恢复练习

创建数据库db create database db&#xff1b; 创建student和score表并插入数据 mysql> select *from student-> ; --------------------------------------------------------------- | id | name | sex | birth | department | address | ----…
阅读更多...
qt 5.12.6配置 msvc2015 32bit

qt 5.12.6配置 msvc2015 32bit

qt 5.12.6配置 msvc2015 32bit 1.添加临时档案库2.安装 msvc20153. 配置 qmake 环境4.修改系统环境变量5.问题修改1.qt没有被正确的安装,请运行make install2.QT编译出错&#xff1a;rc不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。3.QT License check fai…
阅读更多...
【iOS】—— block，KVC，KVO，Category等问题解答

【iOS】—— block，KVC，KVO，Category等问题解答

文章目录 block1.block的原理是怎样的&#xff1f;本质是什么&#xff1f;2.__block的作用是什么&#xff1f;有什么使用注意点&#xff1f;3.block的属性修饰词为什么是copy&#xff1f;使用block有哪些使用注意&#xff1f;4.block在修改NSMutableArray&#xff0c;需不需要添…
阅读更多...
使用langchain与你自己的数据对话(一)：文档加载与切割

使用langchain与你自己的数据对话(一)：文档加载与切割

LangChain是一个基于大语言模型&#xff08;如ChatGPT&#xff09;用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口&#xff0c;可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…
阅读更多...
简单理解TCP,UDP,HTTP

简单理解TCP,UDP,HTTP

我们都知道TCP、UDP、HTTP内部有很复杂的过程&#xff0c;很多人没办法理解的那么深&#xff0c;只想知道这是个什么鬼。 1、TCP、UDP、HTTP 是什么? TCP/IP是个协议组&#xff0c;可分为三个层次&#xff1a;网络层、传输层和应用层。在网络层有IP协议、ICMP协议、ARP协议、…
阅读更多...
50 Matplotlib Visualizations, Python实现，源码可复现

50 Matplotlib Visualizations, Python实现，源码可复现

详情请参考博客: Top 50 matplotlib Visualizations 因编译更新问题&#xff0c;本文将稍作更改&#xff0c;以便能够顺利运行。 0 Introduction 新建项目文件夹为matplotlib_visualizations&#xff0c;以下所有的.py文件均默认在该位置。 0.2 Setup Setup.py文件内容如下&…
阅读更多...
(双指针) 剑指 Offer 57 - II. 和为s的连续正数序列 ——【Leetcode每日一题】

(双指针) 剑指 Offer 57 - II. 和为s的连续正数序列 ——【Leetcode每日一题】

❓ 剑指 Offer 57 - II. 和为s的连续正数序列 难度&#xff1a;简单 输入一个正整数 target &#xff0c;输出所有和为 target 的连续正整数序列&#xff08;至少含有两个数&#xff09;。 序列内的数字由小到大排列&#xff0c;不同序列按照首个数字从小到大排列。 示例 1…
阅读更多...
zookeeper的应用

zookeeper的应用

Zookeeper的配置文件解析: Zookeeper内部原理: 选举机制 半数机制:在集群环境中半数以上的机器存活,这个集群可用,所以在设计Zookeeper集群系统时&#xff0c;通常会选择 奇数台服务器来搭建Zookeeper的集群 虽然在配置文件中并没有指定Master和Slave。但是&#xff0c;Zookeep…
阅读更多...
【安全狗】linux免费服务器防护软件安全狗详细安装教程

【安全狗】linux免费服务器防护软件安全狗详细安装教程

在费用有限的基础上&#xff0c;复杂密码云服务器基础防护常见端口替换安全软件&#xff0c;可以防护绝大多数攻击 第一步&#xff1a;下载服务器安全狗Linux版&#xff08;下文以64位版本为例&#xff09; 官方提供了两个下载方式&#xff0c;本文采用的是 方式2 wget安装 方…
阅读更多...
09.计算机网络——套接字编程

09.计算机网络——套接字编程

文章目录 网络字节序socket编程socket 常见APIsockaddr结构 UDP编程创建socket绑定socketsendto发送数据recvform接收数据关闭socket TCP编程创建socket绑定socketlisten监听套接字accept服务端接收连接套接字connect客户端连接套接字send发送数据recv接收数据关闭socket 工具n…
阅读更多...
算法训练营第四十六天||● 139.单词拆分 ● 关于多重背包，你该了解这些！ ● 背包问题总结篇！

算法训练营第四十六天||● 139.单词拆分 ● 关于多重背包，你该了解这些！ ● 背包问题总结篇！

● 139.单词拆分 这道题和完全背包一样&#xff0c;求排列数相当于 字符串相当于背包&#xff0c;字串相当于物品 注意find方法的使用 find&#xff08;s.begin(),s.end(),"zichuan") 还有s.substr的使用s.substr(起始位置&#xff0c;截取长度&#xff09; clas…
阅读更多...
Stable Diffusion服务环境搭建（远程服务版）

Stable Diffusion服务环境搭建（远程服务版）

Stable Diffusion服务环境搭建&#xff08;远程服务版&#xff09; Stable Diffusion是什么 Stable diffusion是一个基于Latent Diffusion Models&#xff08;潜在扩散模型&#xff0c;LDMs&#xff09;的文图生成&#xff08;text-to-image&#xff09;模型。具体来说&#…
阅读更多...
ES6基础知识一：说说var、let、const之间的区别

ES6基础知识一：说说var、let、const之间的区别

一、var 在ES5中&#xff0c;顶层对象的属性和全局变量是等价的&#xff0c;用var声明的变量既是全局变量&#xff0c;也是顶层变量 注意&#xff1a;顶层对象&#xff0c;在浏览器环境指的是window对象&#xff0c;在 Node 指的是global对象 var a 10; console.log(window.…
阅读更多...
VUE3----＞基础入门

VUE3----＞基础入门

目录 vue 基础入门 1、解读核心关键词&#xff1a;框架 2、vue 的版本 3、vue 的调试工具 vue 基础入门 vite 的基本使用 1. 创建 vite 的项目 2. 梳理项目的结构 3. vite 项目的运行流程 组件的基本使用 1. 组件的注册 2. 组件之间的样式冲突问题 3. 组件的 props …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023