制作前端页面

简介: 前端页面锅炉页面导航栏轮播图

锅炉页面导航栏

1.css部分

.header2 li {
             float: left;
            list-style-type: none;
        }
        .header2 li a{
            display: block;
            text-align: center;
             width: 281px;
             height: 50px;
            margin: auto;
            color: white;
            font-size: 20px;
            line-height: 50px;
            text-decoration: none;
                background-color: black;
                opacity: 0.6;
        }
        .header2 li a:hover{
            background-color: grey;
        }
        .header2 ul dropdown-menu:hover{
            display: inline-list-item;
            background-color: #fff;
            color: black;
        }


2.HTML部分

<div class="header2">
    <ul class="head">
<!--        <li><a></a></li>-->
        <li><a href="#">网站首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品中心</a></li>
         <li class="dropdown" id="accountmenu">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">客户案例<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li class="divider"></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
</ul></div>


轮播图

1.css部分

.carousel-inner img {
            width: 100%;
            height: 100%;


2.HTML部分

<div id="demo" class="carousel slide" data-ride="carousel">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/img_3.png">
        </div>
        <div class="carousel-item">
            <img src="images/img_4.png">
        </div>
        <div class="carousel-item">
            <img src="images/img_5.png">
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>


3.js部分

<script type="text/javascript">
    $(document).ready(function(){
        $('#myCarousel').carousel()
    })
</script>
相关文章
|
2月前
|
前端开发 数据可视化 JavaScript
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
118 6
|
14天前
|
前端开发 JavaScript Java
基于Vue+ElementUI框架实现学生管理系统前端页面设计
基于Vue+ElementUI框架实现学生管理系统前端页面设计
|
25天前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
1月前
|
缓存 前端开发 jenkins
Serverless 应用引擎产品使用合集之前端的项目部署在镜像里时,页面总是自动刷新,是什么导致的
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
24天前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
36 1
Web前端网站(一) - 登录页面及账号密码验证
|
11天前
|
前端开发
化学元素周期表1.0Vue前端页面版本
化学元素周期表1.0Vue前端页面版本
|
11天前
|
前端开发 开发工具 数据库
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
|
21天前
|
JSON 前端开发 JavaScript
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
22 2
|
21天前
|
缓存 负载均衡 前端开发
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
13 1
|
21天前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
17 1