制作前端页面

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

锅炉页面导航栏

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>
相关文章
|
6月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
13天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
19 1
.自定义认证前端页面
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
47 18
|
4月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
149 2
前端JS读取文件内容并展示到页面上
|
3月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
39 1

热门文章

最新文章