【Java Web基础】一些网页设计基础（三）

news2024/11/15 13:44:56

文章目录

1. 导航栏样式进一步调整
2. 入驻企业信息展示栏
- 2.1 Title设置
- 2.2 具体信息添加
3. 轮播图
4. 注册登录按钮及其他信息
5. 一些五颜六色的、丰富视觉效果的中间件……

1. 导航栏样式进一步调整

在这里插入图片描述
这种导航栏，选中的时候字体变蓝色，可能还是不够美观，根据Bootstrap提供的效果再调整下：
Bootstrap5 navs-tabs

根据需要修改代码，调整CSS样式如下：

nav { background-color: #56ac69; justify-content: center; }
.nav li a { font-size: 1.3rem; color: white }
.nav li a:hover { color: #1b6d84; background-color: white}

结果如下：
当前active的项是“网站首页”，选中了“名企优录”
在这里插入图片描述

2. 入驻企业信息展示栏

2.1 Title设置

Bootstrap将一行均分为了12栏，我们让信息企业展示栏占3栏，则需要使用类“col-md-3”。同时这里主要使用了Bootstrap的nav-pills，如下：
在这里插入图片描述
写我们自己的
html：

<div class="col-md-3">
   <!--最新入驻企业-->
   <div class="tabbable">
       <ul class="nav nav-pills nav-fill title-bg">
           <li class="nav-item">
               <a class="nav-link " id="new-enterprise-title" aria-current="page" href="#">最新入驻企业</a>
           </li>
       </ul>
   </div>
</div>

设置一些属性：

/*最新入驻企业标题*/
.title-bg { background-color: #b4d5e3; }
#new-enterprise-title { font-size: 1.0rem; color: white; background-color: #337ab7; width: fit-content; text-align: left; }

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

2.2 具体信息添加

就用一个普通的列表就可以：

<!--最新入驻企业-->
<div class="tabbable">
     <ul class="nav nav-pills nav-fill title-bg">
         <li class="nav-item">
             <a class="nav-link " id="new-enterprise-title" aria-current="page" href="#">最新入驻企业</a>
         </li>
     </ul>
     <div class="tab-content">
         <div class="tab-pane active">
             <ul class="info-content">
                 <li>
                     <a href="http://www.hbzhunong.com/home/?uid=1113">莱芜市合盛农产品有限公司</a>
                 </li>
                 <li>
                     <a href="http://www.hbzhunong.com/home/?uid=1112">山东粮能有机食品公司</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>

CSS：

/*内容*/
.tab-pane { border: 1px solid rgba(0, 0, 0, 0.2); padding-top: 5px;}
.info-content li a { text-decoration: none; }

效果大概这样：
在这里插入图片描述
再加一个，照葫芦画瓢就可以：

右侧加一个供求信息，但去掉无序列表的点，并顶格放置，同时利用flex分成两栏，一栏放供，一栏放求：

<!--供求信息-->
            <div class="tabbable">
                <ul class="nav nav-pills nav-fill title-bg">
                    <li class="nav-item" style="width: 50%">
                        <a class="nav-link " id="new-supply-title" aria-current="page" href="#">供求信息</a>
                    </li>
                    <li class="nav-item" style="width: 50%">
                        <a class="nav-link " id="new-need-title" aria-current="page" href="#">求购信息</a>
                    </li>
                </ul>
                <div style="display: flex">
<!--                    供应信息-->
                    <div class="tab-content" style="width: 50%; float: left">
                        <div class="tab-pane active">
                            <ul class="info-content" style="list-style: none; padding-left: 0">
                                <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 class="tab-content" style="width: 50%; float: right">
                        <div class="tab-pane active">
                            <ul class="info-content" style="list-style: none; padding-left: 0">
                                <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>
            </div>

注意使用之前的标题栏样式：

#new-enterprise-title, #new-hot-title, #new-supply-title, #new-need-title { font-size: 1.0rem; color: white; background-color: #337ab7; width: fit-content; text-align: left; }

在这里插入图片描述

3. 轮播图

轮播图对应Bootstrap的Carousel部分：Bootstrap5-Carousel
这里在带前后按钮、123按钮的基础上加上了carousel-dark属性，使按钮颜色变黑色

        <!--轮播图-->
        <div class="col-md-6 carousel carousel-dark slide" id="carouselExampleIndicators" data-bs-ride="carousel">
<!--            底部三个按钮-->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active carousel-button" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="carousel-button" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" class="carousel-button" aria-label="Slide 3"></button>
            </div>
<!--            图片-->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/img/carousel1.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="/img/carousel2.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="/img/carousel3.png" class="d-block w-100" alt="...">
                </div>
            </div>
<!--            左右两个按钮-->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

效果如下：
在这里插入图片描述

4. 注册登录按钮及其他信息

右侧占3栏，使用Bootstrap中的Button来做登录注册按钮：
这里用到了Bootstrap图标库：Bootstrap Icons，以及Buttons中的一些类属性：Bootstrap5 Buttons

由于使用图标库，直接导入了它们的CSS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

HTML代码为：

<div class="col-md-3 column">
   <button type="button" class="btn btn-lg login"><span class="bi bi-person" onclick="javascript:toLogin()">&emsp;登&emsp;录</span></button>
   <button type="button" class="btn btn-lg register"><span class="bi bi-person-add" onclick="javascript:toRegister()">&emsp;注&emsp;册</span></button>
</div>

自己设置一些关于按钮背景色、宽度的CSS：

.login, .register { width: 100%; color: #fff9f8; margin-bottom: 5px; }
.login { background-color: #f0ad4e; }
.register { background-color: #5cb85c; }
.login:hover { background-color: #ec971f; color: #fff9f8; }
.register:hover { background-color: #449d44; color: #fff9f8; }

效果如下：
在这里插入图片描述

5. 一些五颜六色的、丰富视觉效果的中间件……

使用了Bootstrap中的表格插件：Bootstrap5 tables
就是用了一些颜色表格的类，很简单：

<!--首页快捷栏-->
<div class="col-md-12" style="margin-top: 10px">
    <table class="table table-bordered">
        <tbody class="text-center">
        <tr class="table-success">
            <td><a href="#">创建商铺</a></td>
            <td><a href="#">发布产品</a></td>
        </tr>

        <tr class="table-warning">
            <td><a href="#">发布求购信息</a></td>
            <td><a href="#">发布供应信息</a></td>
        </tr>

        <tr class="table-info">
            <td><a href="#">登记品牌</a></td>
            <td><a href="#">关于我们</a></td>
        </tr>
        </tbody>
    </table>
</div>