当前位置: 首页 > news >正文

【从零开始的Java开发】2-9-3 油画商城静态网页案例

文章目录

    • 项目展示
    • 项目:
    • 0.准备工作
    • 1.页眉区的制作
      • 1-1.logo和menu位置的摆放
      • 1-2.menu功能的实现
      • 1-3.menu功能的样式
      • 1-4.登录与注册
      • 1-5.小结
    • 2.正文区的制作
      • 2-1.页眉和banner区
      • 2-2.商品展示区
      • 2-3.分页区
      • 2-4.小结
    • 3.页脚区的制作
    • 项目总结
    • 总体代码
      • html
      • css
      • js
    • 总体效果

项目展示

页眉区,banner区
在这里插入图片描述
正文区
在这里插入图片描述
页脚区
在这里插入图片描述
总体效果
在这里插入图片描述

页面布局相关技术
在这里插入图片描述

项目:

0.准备工作

文件夹:
在这里插入图片描述

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js"></script>
</head>

<body>
</body>

</html>

image:
在这里插入图片描述

1.页眉区的制作

功能介绍:
在这里插入图片描述
实现思路:

  1. 制作左上方的logo:注意上边距、左边距的距离
  2. 制作菜单:注意菜单的位置、间距、打开效果
  3. 右侧的用户交互区:注意右边距的位置、水平位置
  4. 页眉区的尺寸和距离,注意要和下方banner区域的大
    小、位置相应一致

1-1.logo和menu位置的摆放

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js"></script>
</head>

<body>
    <!-- 页眉 -->
    <div class="header">
        <!-- logo -->
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!-- 菜单跟目录 -->
        <div class="menu">
            <div class="menu_title"><a href="">内容分类</div>
            <ul>
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
    </div>
    <!-- 正文 -->
    <div class="content"></div>
    <!-- 页脚 -->
    <div class="footer"></div>
</body>

</html>

css:

/*整体无间距*/
* {
    padding: 0px;
    margin: 0px;
}

/*logo离左、上的距离*/
.header {
    margin: 25px 0px 0px 50px;
}

/*子菜单不显示*/
.header .menu ul {
    display: none;
}

/*子菜单在logo右边:浮动*/
.header .logo {
    float: left;
    position: relative;
}

.header .menu {
    float: left;
    position: relative;
    /*让menu对齐*/
    margin-top: 12px;
    margin-left: 16px;
}

效果:
在这里插入图片描述

1-2.menu功能的实现

让鼠标浮动在菜单上时显示的css:

/*鼠标浮动在菜单上就让ul显示*/
.header .menu:hover ul {
    display: block;
}

让鼠标点击菜单时显示的js:

var flag = true;

//鼠标放到菜单上时就显示
function show_menu() {
    var menu1 = document.getElementById("menu1");
    if (flag) {
        //块状显示
        menu1.style.display = "block";
        flag = false;
    } else {
        menu1.style.display = "none";
        flag = true;
    }
}

让鼠标挪走时菜单自动关闭的js:

//鼠标离开则菜单隐藏
function show_menu1() {
    var menu1 = document.getElementById("menu1");
    menu1.style.display = "none";
    //要改变开关按钮
    flag = true;
}

html如下(主要是看事件添加在哪里):

<!-- 菜单跟目录 -->
<div class="menu" onmouseleave="show_menu1()">
     <!-- #表示当前页面但不刷新页面 -->
     <div class="menu_title"><a href="#" onclick="show_menu()">内容分类</div>
     <ul id="menu1">
         <li>现实主义</li>
         <li>抽象主义</li>
     </ul>
 </div>

1-3.menu功能的样式

主要是:

  • 菜单的间距
  • 菜单前的原点符号要去掉
  • 菜单的边框

菜单前的原点符号要去掉css:

.header .menu ul {
    display: none;
    /*1-3*/
    /*去掉列表小圆点*/
    list-style: none;
}

菜单间距css:

/*1-3*/
/*菜单间距加大*/
.header .menu ul li {
    margin-top: 20px;
}

菜单的边框css:

.header .menu ul li {
    margin-top: 20px;
    /*文本居中*/
    width: 80px;
    text-align: center;
}

/*菜单边框*/
.header .menu .menu_title {
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}

/*去掉超级链接的下划线*/
a {
    text-decoration: none;
}

效果:
在这里插入图片描述

1-4.登录与注册

有两种方法:

  • 标签里加超级链接
  • div+列表

我们用后者。

关于#:

  • #:不刷新页面,依然停留在当前页面
  • ###:锚点

html:

<!-- 登陆与注册 -->
<div class="auth">
     <ul>
         <li><a href="#">注册</li>
         <li><a href="#">登录</li>
     </ul>
 </div>

css:

/*1-4*/
/*登陆与注册*/
.header .auth {
    float: right;
    /*position: relative;*/
}

/*对齐方式与去掉原点*/
.header .auth ul li {
    float: left;
    list-style: none;
    margin-right: 70px;
    margin-top: 12px;
}

效果:
在这里插入图片描述

1-5.小结

  • 菜单的制作,要注意菜单的位置、利用js实现的弹出效
    果、菜单的外观样式。
  • 位置、对齐方式等细节设置

小技巧:

  • 可以在设置页面区域的同时,将banner图进行设置,方便
    进行位置参照
  • div逐层设置,仔细观察样式所选择的对象以及实现的效果
  • JS菜单效果设置

2.正文区的制作

2-1.页眉和banner区

html:

<!-- 正文 -->
    <div class="content">
        <div class="banner">
            <img src="image/welcome.png" class="banner_img">
        </div>
    </div>

相关的css:

/*子菜单不显示*/
.header .menu ul {
    display: none;
    /*1-3*/
    /*去掉列表小圆点*/
    list-style: none;

    /*单击目录后子菜单的显示:浮在图片上面*/
    position: absolute;
    width: 80px;
    background-color: white;
    /*半透明效果*/
    opacity: 0.5;
    color: black;
}

/*2-1.页眉和banner区制作*/
.content {
    width: 1200px;
    margin: 25px auto;
}

.content .banner .banner_img {
    margin-top: 30px;
}

效果:
在这里插入图片描述

2-2.商品展示区

一个粗略的商品展示:
html:

<li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>

显示:
在这里插入图片描述
加一点css:

/*2-2.商品展示区*/
.content .img_content ul {
    width: 1280px;
}

.content .img_content ul li {
    width: 361px;
    float: left;

    /*图片之间的左右间距*/
    margin: 0px 58px 60px 0px;

    list-style: none;
}

效果:
在这里插入图片描述
加上购物车css:

/*购物车*/
.img_content .info .img_btn {
    width: 300px;
}

.img_content .info .img_btn .btn {
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px;
    float: right;
}

.img_content .info .img_btn .cart img {
    /*background-color: white;*/
    width: 25px;
    height: 20px;
    margin-top: 5px;

}

.img_content .info .img_btn .price {
    float: left;
}

效果:
在这里插入图片描述
再加一点细节:

.content .img_content ul li {
    width: 361px;
    height: 500px;
    float: left;

    /*图片之间的左右间距*/
    margin: 0px 58px 60px 0px;

    list-style: none;

    /*边框与阴影*/
    margin-top: 20px;
    box-shadow: 2px 2px 5px 3px grey;
    /*谷歌浏览器兼容*/
    -webkit-box-shadow: 2px 2px 5px 3px grey;
    /*火狐浏览器兼容*/
    -moz-box-shadow: 2px 2px 5px 3px grey;

    /*背景色*/
    background-color: white;

}

.info {
    margin-left: 30px;
    margin-right: 30px;

}

/*图片标题*/
.info h3 {
    color: red;
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*段落*/
.info p {
    /*行间距*/
    line-height: 30px;
    /*下边距*/
    margin-bottom: 10px;
}

/*价格*/
.info .price {
    color: red;
    font-size: 25px;


}

body {
    background-color: #F5F5F5;
}

效果:
在这里插入图片描述

2-3.分页区

关于spandiv

  • div在默认情况下单独占一行,span在默认情况下一起占一行。
  • div里可以加span,但span里不能加div。

html:

<div class="page_nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">上一页</a></li>
                <!-- div在默认情况下单独占一行,span在默认情况下一起占一行 div里可以加span 但span里不能加div -->
                <li><span class="first_page">1</span></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">98</a></li>
                <li><a href="#">99</a></li>
                <li><a href="#">下一页</a></li>
                <li><a href="#">尾页</a></li>
            </ul>
        </div>

css:

/*分页区*/
.content .page_nav ul li {
    float: left;
    margin-right: 15px;
    list-style: none;
}

.content .page_nav {
    /*width: 1200px;*/
    width: 100%;
    /*跟上级的宽度一样*/
    height: 60px;
    line-height: 60px;

    /*border: 1px solid black;*/
    overflow: hidden;

}

.content .page_nav ul {
    /*水平居中*/
    margin: auto;
    overflow: hidden;
    width: 500px;
}

/*给1加圆形阴影*/
.content .page_nav .first_page {
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px;
}

效果:
在这里插入图片描述

2-4.小结

重难点:

  • 两行三列排列方式
  • 商品展示区两端对齐
  • 正文区三部分布局的统一:banner区、商品展示区、分页区

小技巧:

  • 位置:在进行页面布局时,位置和对齐十分重要
  • 什么时候添加div:有改变即添加div

3.页脚区的制作

html:

<!-- 页脚 -->
<div class="footer">
    <p><span>M-GALLARY</span>@2017 POWERED BY IMOOC.INC</p>
</div>

css:

/*页脚*/
.footer {
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    /*用上边框来加线*/
    border-top: 1px solid #ccc;
    /*#ccc就是#cccccc*/
    overflow: hidden;
}

.footer p {
    text-align: center;
    line-height: 80px;
}

.footer span {
    color: deeppink;
}

效果:
在这里插入图片描述

项目总结

  • 整体布局时,各个对象的位置、对齐方式、间距等设置要注意细节,要通过计算的方式获取相互位置的对应关系。

  • ulli的使用频率较高,非常适合于规律性显示的页面效果。

  • overflow:hiddenheightfloat直接的关系:
    在这里插入图片描述

  • 水平居中:margin:xpx auto;

  • 垂直居中:将line-heightheight设置成相等的大小。

总体代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js"></script>
</head>

<body>
    <!-- 页眉 -->
    <div class="header">
        <!-- logo -->
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!-- 菜单跟目录 -->
        <div class="menu" onmouseleave="show_menu1()">
            <!-- #表示当前页面但不刷新页面 -->
            <div class="menu_title"><a href="#" onclick="show_menu()">内容分类</div>
            <ul id="menu1">
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <!-- 登陆与注册 -->
        <div class="auth">
            <ul>
                <li><a href="#">注册</li>
                <li><a href="#">登录</li>
            </ul>
        </div>
    </div>
    <!-- 正文 -->
    <div class="content">
        <div class="banner">
            <img src="image/welcome.png" class="banner_img">
        </div>
        <div class="img_content">
            <ul>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img_li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述</p>
                        <div class="img_btn">
                            <!-- 单价 -->
                            <div class="price">¥5800</div>
                            <!-- 按钮 -->
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="page_nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">上一页</a></li>
                <!-- div在默认情况下单独占一行,span在默认情况下一起占一行 div里可以加span 但span里不能加div -->
                <li><span class="first_page">1</span></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">98</a></li>
                <li><a href="#">99</a></li>
                <li><a href="#">下一页</a></li>
                <li><a href="#">尾页</a></li>
            </ul>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <p><span>M-GALLARY</span>@2017 POWERED BY IMOOC.INC</p>
    </div>
</body>

</html>

css

/*1-1*/

/*整体无间距*/
* {
    padding: 0px;
    margin: 0px;
}

/*logo离左、上的距离*/
.header {
    margin: 25px auto;
    /*上下25 左右auto*/
    width: 1200px;
}

/*子菜单不显示*/
.header .menu ul {
    display: none;
    /*1-3*/
    /*去掉列表小圆点*/
    list-style: none;

    /*单击目录后子菜单的显示:浮在图片上面*/
    position: absolute;
    width: 80px;
    background-color: white;
    /*半透明效果*/
    opacity: 0.5;
    color: black;
}

/*子菜单在logo右边:浮动*/
.header .logo {
    float: left;
    position: relative;
}

.header .menu {
    float: left;
    position: relative;
    /*让menu对齐*/
    margin-top: 12px;
    margin-left: 16px;
}

/*1-2*/
/*鼠标浮动在菜单上就让ul显示*/
/*.header .menu:hover ul {
    display: block;
}*/

/*1-3*/
/*菜单间距加大*/
.header .menu ul li {
    margin-top: 20px;
    /*文本居中*/
    width: 80px;
    text-align: center;

}

/*菜单边框*/
.header .menu .menu_title {
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}

/*去掉超级链接的下划线*/
a {
    text-decoration: none;
}

/*1-4*/
/*登陆与注册*/
.header .auth {
    float: right;
    /*position: relative;*/
}

/*对齐方式与去掉原点*/
.header .auth ul li {
    float: left;
    list-style: none;
    margin-right: 70px;
    margin-top: 12px;

}

/*2-1.页眉和banner区制作*/
.content {
    width: 1200px;
    margin: 25px auto;
}

.content .banner .banner_img {
    margin-top: 30px;
}

/*2-2.商品展示区*/
.content .img_content ul {
    width: 1280px;
}


.content .img_content ul li {
    width: 361px;
    height: 500px;
    float: left;

    /*图片之间的左右间距*/
    margin: 0px 58px 60px 0px;

    list-style: none;

    /*边框与阴影*/
    margin-top: 20px;
    box-shadow: 2px 2px 5px 3px grey;
    /*谷歌浏览器兼容*/
    -webkit-box-shadow: 2px 2px 5px 3px grey;
    /*火狐浏览器兼容*/
    -moz-box-shadow: 2px 2px 5px 3px grey;

    /*背景色*/
    background-color: white;

}

.info {
    margin-left: 30px;
    margin-right: 30px;

}

/*图片标题*/
.info h3 {
    color: red;
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*段落*/
.info p {
    /*行间距*/
    line-height: 30px;
    /*下边距*/
    margin-bottom: 10px;
}

/*价格*/
.info .price {
    color: red;
    font-size: 25px;


}

body {
    background-color: #F5F5F5;
}

/*购物车*/
.img_content .info .img_btn {
    width: 300px;
}

.img_content .info .img_btn .btn {
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px;
    float: right;
}

.img_content .info .img_btn .cart img {
    /*background-color: white;*/
    width: 25px;
    height: 20px;
    margin-top: 5px;

}

.img_content .info .img_btn .price {
    float: left;
}


/*分页区*/
.content .page_nav ul li {
    float: left;
    margin-right: 15px;
    list-style: none;
}

.content .page_nav {
    /*width: 1200px;*/
    width: 100%;
    /*跟上级的宽度一样*/
    height: 60px;
    line-height: 60px;

    /*border: 1px solid black;*/
    overflow: hidden;

}

.content .page_nav ul {
    /*水平居中*/
    margin: auto;
    overflow: hidden;
    width: 500px;
}

/*给1加圆形阴影*/
.content .page_nav .first_page {
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px;
}

/*页脚*/
.footer {
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    /*用上边框来加线*/
    border-top: 1px solid #ccc;
    /*#ccc就是#cccccc*/
    overflow: hidden;
}

.footer p {
    text-align: center;
    line-height: 80px;
}

.footer span {
    color: deeppink;
}

js

var flag = true;

//鼠标放到菜单上时就显示
function show_menu() {
    var menu1 = document.getElementById("menu1");
    if (flag) {
        //块状显示
        menu1.style.display = "block";
        flag = false;
    } else {
        menu1.style.display = "none";
        flag = true;
    }
}

//鼠标离开则菜单隐藏
function show_menu1() {
    var menu1 = document.getElementById("menu1");
    menu1.style.display = "none";
    //要改变开关按钮
    flag = true;
}

总体效果

在这里插入图片描述

相关文章:

  • 计算机毕业设计ssm+vue基本微信小程序的个人健康管理系统
  • 【PTHREAD】线程互斥与同步之互斥锁
  • vscode自动生成testbench
  • 【流放之路-装备制作篇】
  • BLE错误码全面解析连接失败原因错误码解析BLE Disconnect Reason
  • Tensorflow pb模型转tflite,并量化
  • 【PTHREAD】线程状态
  • 网易云音乐项目————项目准备
  • 计算机网络——应用层の选择题整理
  • LabVIEW通过网络传输数据
  • 【PTHREAD】线程属性
  • 如何做好项目管理?项目管理和团队协作是关键
  • 《嵌入式 – GD32开发实战指南》第20章 GD32的存储结构
  • Vue模块语法上(插值指令过滤器计算属性-监听属性)
  • 初识网络
  • 【刷算法】从上往下打印二叉树
  • canvas绘制圆角头像
  • Iterator 和 for...of 循环
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • node-glob通配符
  • rabbitmq延迟消息示例
  • Spring声明式事务管理之一:五大属性分析
  • Webpack入门之遇到的那些坑,系列示例Demo
  • 成为一名优秀的Developer的书单
  • 飞驰在Mesos的涡轮引擎上
  • 实战|智能家居行业移动应用性能分析
  • 思否第一天
  • 想写好前端,先练好内功
  • 一个SAP顾问在美国的这些年
  • Spring第一个helloWorld
  • ​2020 年大前端技术趋势解读
  • # 达梦数据库知识点
  • #在 README.md 中生成项目目录结构
  • (01)ORB-SLAM2源码无死角解析-(66) BA优化(g2o)→闭环线程:Optimizer::GlobalBundleAdjustemnt→全局优化
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (三)mysql_MYSQL(三)
  • (算法)前K大的和
  • (五)关系数据库标准语言SQL
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转)创业家杂志:UCWEB天使第一步
  • (轉貼) 2008 Altera 亞洲創新大賽 台灣學生成果傲視全球 [照片花絮] (SOC) (News)
  • ***测试-HTTP方法
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .NET处理HTTP请求
  • /boot 内存空间不够
  • @Controller和@RestController的区别?
  • @JoinTable会自动删除关联表的数据
  • @param注解什么意思_9000字,通俗易懂的讲解下Java注解
  • [《百万宝贝》观后]To be or not to be?