利用CSS完成测试平台前端页面开发

已于 2022-07-19 23:47:21 修改
阅读量646 收藏
点赞数 1
分类专栏： 前端 文章标签： css html 前端
于 2022-02-17 19:03:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40132294/article/details/122981452
版权

1.内联式

标签的style属性来设置

2.嵌入式（百度的首页就采用这种嵌入式，可以加快响应效率）

在<head></head>标签中通过style属性来设置

3.外链式(通用）

<link>标签引入（css写在一个.css结尾的文件中）

4.css文字样式

color        文字颜色： color : red;

font-size        文字大小：font-size:12px;

font-family        文字字体：font-family:"微软雅黑“;

font-style        文字是否倾斜：

                不倾斜：font-style:'normal';

                倾斜：font-style:'italic';

font-weight        文字是否加粗：

                不加粗：font-weight:normal

                加粗：font-weight:bold

line-height        文字的行高：line-height:30px

连续设置文字的属性：

        font:normal 12px/36px '微软雅黑’

text-indent        文字首行缩进：text-indent:24px

text-align        文字水平对齐方式：text-align:center 设置文字水平居中

页面效果：

 htm代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <link rel="stylesheet" href="./css/index.css" type="text/css">
    <link rel="stylesheet" href="./css/reset.css" type="text/css">
    <style>
        .body{
            background:#fff;
        }
    
    </style>

    <!--使用jquery-->
    <script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        <!--使用jquery-->
        $(function(){
            // 选择节点时触发的js操作
            // 功能：点击+号时能弹出悬浮框
            $('#add').click(function(){
                // 上面add节点触发后需要做的事情
                $('.back_ground').addClass('show');
            });

            // 功能：弹出悬浮框后，点击'取消'和'确认'按钮，隐藏悬浮框
            $('#no').click(function(){
                // 触发后将悬浮框再removeClass掉
                $('add_window').removeClass('show');
            })
            $('#yes').click(function(){
                // 触发后将悬浮框再removeClass掉
                $('add_window').removeClass('show');
            })

            // 利用toggleClass()隐藏并展开左侧菜单栏
            // 反复点击<h3>标签，能够反复打开与关闭其对应子菜单
            $('h3').click(function(){
                $(this).next().toggleClass('show').parent().siblings().children('ul').removeClass("show");
            })
        })
    
    </script>


</head>
<body class="body">

<!--顶部区域-->
<div class="top_menu">
    <div class="title">自动化测试平台</div>
    <div class="menu_list">
        <ul>
            <a href="跳转的url">
                <li>首页</li>
            </a>
            <a href="">
                <li>接口列表</li>
            </a>
            <a href="">
                <li>用例列表</li>
            </a>
            <a href="">
                <li>套件列表</li>
            </a>
            <a href="">
                <li>测试报告</li>
            </a>
        </ul>
    </div>
    <a href="">
        <div class="user_logout">用户注销</div>
    </a>
</div>
<!--左边区域-->
<div class="left_menu">
    <div class="project_manage">项目管理</div>
    <div class="left_menu_list">
        <ul>
            <li>
                <h3>接口管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                </ul>
            </li>
            <li>
                <h3>用例管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加用例</a></li>
                    <li><a href="">用例列表</a></li>
                </ul>
            </li>
            <li>
                <h3>测试计划</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加计划</a></li>
                    <li><a href="">计划管理</a></li>
                </ul>
            </li>
            <li>
                <h3>报告管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加报告</a></li>
                    <li><a href="">报告管理</a></li>
                </ul>
            </li>
            <li>
                <h3>套件管理</h3>
                <ul class="hide">   <!--默认先隐藏掉,点击再展开-->
                    <li><a href="">添加套件</a></li>
                    <li><a href="">套件管理</a></li>
                </ul>
            </li>

        </ul>
    </div>
</div>

<!--右边内容区域-->
<div class="content">
    <div class="project_info">
        <div class="pro_info_top">项目A</div>
        <p>接口数量：15</p>
        <p>用例数量：90</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目B</div>
        <p>接口数量：10</p>
        <p>用例数量：98</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目C</div>
        <p>接口数量：6</p>
        <p>用例数量：66</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目D</div>
        <p>接口数量：5</p>
        <p>用例数量：30</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目E</div>
        <p>接口数量：5</p>
        <p>用例数量：54</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目F</div>
        <p>接口数量：9</p>
        <p>用例数量：90</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info">
        <div class="pro_info_top">项目G</div>
        <p>接口数量：7</p>
        <p>用例数量：65</p>
        <div><a href=" ">删除</a></div>
    </div>
    <div class="project_info" id="add">  <!--增加自定义的add属性，通过jquery动态修改add属性-->
        <img src="./images/加号图标.png" alt="">
    </div>

    <!--    增加悬浮表单-->
    <div class="back_ground hide">   <!-- 增加一层透明背景，操作悬浮表单的时候不能操作其他东西-->
        <div class="add_window">  <!--增加自定义的hide属性，初始时时隐藏状态-->
            <div class="add_project">新增项目</div>
            <div>
                <form action="">
                    <div class="alter_input">
                        <label for="pro_name">项 目 名 称：</label>
                        <input type="text" id="pro_name">
                    </div>
                    <div class="alter_input">
                        <label for="pro_addr">项 目 地 址：</label>
                        <input type="text" id="pro_addr">
                    </div>
                    <div class="alter_input">
                        <label for="tester">测 试 人 员：</label>
                        <input type="text" id="tester">
                    </div>

                    <div class="pro_desc">
                        <label for="pro_desc2">项 目 描 述：</label>
                        <br>
                        <textarea name="" id="pro_desc2" cols="60" rows="8"></textarea>
                    </div>


                    <div class="confirm">
                        <input type="submit" value="取消" id="no">
                        <input type="submit" value="确认" id="yes">
                    </div>

                </form>
            </div>


        </div>
    </div>
    
</div>


</body>
</html>

        css文件代码：



.top_menu{
    height:100px;
    /*background:grey*/
    /*background: rgba(255,122,111,0.5)  /*raga()第四个参数0.5表示透明度，透明度在0-1之间*/
    background: #0033cc
}

/*类选择器*/
.title{
    /*background:cyan;*/   /* 标签背景色*/
    width:350px;    /*设置标签宽度 */
    color:#fff;     /* 设置字体颜色*/
    font:normal 32px/100px 微软雅黑;    /* 设置字体是否加粗，字体宽度，字体高度（字体高度同标签高度时，字体自动居中），字体类型*/
    text-align: center;     /* 文字水平对齐方式为居中*/
    float:left;     /*自动左浮动 */
}

/*层级选择器*/
.menu_list li{
    /*background:pink;*/
    list-style-type:none;       /* 取消list前面的原点。*/
    width:210px;
    height:100px;
    color:#fff;
    font:normal 20px/100px 微软雅黑;
    text-align:center;
    float:left;
}
.menu_list li:hover{
    background:#6392ed;
}

.user_logout{
    float:right;
    width:100px;
    height:50px;
    font: normal 15px/50px 微软雅黑;
    color:#fff;
    margin-top:45px;
    margin-right:10px;
    text-align:center;
}

/*侧边栏样式*/
.left_menu{

    position:absolute;
    top:140px;
    left:10px;
    height:500px;
    width:300px;
    background:#fff;

}

.project_manage{
    background:#03c;
    width:300px;
    height:100px;
    font:25px/100px 微软雅黑;
    /*text-align:center;*/
    float:left;
    text-indent:100px;
}


.left_menu_list{

    width:300px;
    height:500px;
    font:25px/50px 微软雅黑;
    list-style-type:none;       /* 取消list前面的原点。*/
    text-align:center;
    float:left;
}

.left_menu_list li h3{
    width:100%;
    height:60px;

    border-bottom:solid 1px #e3e2ed;
    font:normal 20px/60px 微软雅黑;
    text-align:center;
    float:left;
    color:rgba(51,62,82,0.73);
    background-image: url(../images/下伸展图标.png);
    background-repeat: no-repeat;
    background-position: 240px;
    background-size: 18px;
}

.left_menu_list li ul a{
    width:100%;
    height:30px;
   /* border-bottom:solid 1px #e3e2ed;  /*添加下划线*/
    color:#2c60ed;
    background:#eef2ff;
    font:normal 15px/30px 微软雅黑;
    text-align:center;
    float:left;
    text-decoration:none;  /*去掉<a>标签超链接的下划线*/
}



/*主体部分样式*/
.content{
    position:absolute;
    left:320px;
    top:140px;
    width:1400px;
    height:700px;
    background:#fff;
}

.project_info{

    margin:50px;

    width:220px;
    height:250px;
    border:solid 1px #9297a2;
    float:left;
    border-radius:10px; /*圆角处理*/
    text-align:center;
}

.pro_info_top{
    background:#9ad2ed;
    width:100%;
    height:60px;
    font: normal 30px/60px 微软雅黑;
    color:black;
    text-align:center;
    border-top-left-radius:10px;    /*圆角*/
    border-top-right-radius:10px;
}

.project_info p{
    text-align:center;
    font:normal 20px/35px 微软雅黑;
}

.project_info a{

    position:relative;
    top:50px;
    font:normal 25px/40px 微软雅黑;
    color:#fff;
    background:grey;
    border-radius:5px;
    text-decoration:none;  /*去掉<a>标签超链接的下划线*/

}

.project_info img{
    margin-top:75px;
}

/*悬浮表单*/
.add_window{
    position:fixed;
    left:40%;
    top:25%;
    width:400px;
    height:450px;
    border:solid 2px #9297a2;
    background-color:#fff; /*白色背景*/
    border-radius:10px; /*圆角处理*/
    padding: 0 60px;  /*,上下0，左右20，padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。*/
}

.add_project{
    font:normal 25px/45px 微软雅黑;
    text-align:center; /*字体文本居中*/
    color:#0033cc; /*蓝色字体*/
    margin-bottom:20px; /*底部间距*/
}

.alter_input{
    width:100%;
    height:40px;
    font:normal 22px/50px 微软雅黑;
    color:#03c;
}
.alter_input input{
    width:50%;
    height:25px;
    font:normal 15px/30px 微软雅黑;

}


.alter_input label{
    width:0px;
    height:40px;
    font:normal 22px/40px 微软雅黑;
    color:#03c;

}



.pro_desc{
    padding:20px 0;
    width:100%;
    height:40px;
    font:normal 20px/50px 微软雅黑;
    color:#03c;
}
.pro_desc textarea{
    width:100%;
    height:100px;
    font:normal 10px/50px 微软雅黑;
    color:#03c;
}



.confirm{
    position:relative;
    width:100%;
    height:40px;
    top:120px;
    left:300px;
}
.confirm input{
    width:40px;
    height:30px;
    font:normal 25px/30px;
    background-color:#9ad2ed;
    color:#03;
     border-radius:10px; /*圆角处理*/
}

 /*弹出增加新项目悬浮窗后，增加一层div,让其他操作不可用*/
.back_ground{
    width:100%;
    height:900px;
    top:0;   /*相对于整个基层页面边框设置边距*/
    left:0;
    background:rgba(146,151,162,0.5);
    position:fixed;
}

浏览器调试样式：

将调试好的样式放入项目代码中即可 

chuntian_tester
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
测试平台(三)前端开发(1)前端框架搭建
Mikasa的博客
07-11 462
本章主要讲述【测试平台】的前端实现，前端框架用的是Vue环境前端框架：Vuenode.js V16.15.0 下载地址：https://nodejs.org/dist/VSCode：https://code.visualstudio.com/Download 二、前端框架搭建 1、VSCode常用插件下载 这里是vscode常用的一些插件，按需下载即可.........
07 接口测试平台 前端页面布局
最好的状态是未来可期
09-24 569
本节主要是进行前端页面布局的确定，后面章节就可以直接向框架中填写具体的内容了。
前端页面测试
MichaelAn的博客
02-13 545
前端页面测试 关于函数测试，比如有一些固定的输入输出，可以使用mocha来进行测试，参考 Mocha测试基本使用。 关于页面功能的测试，推荐nightmare。 var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: true }...
前端CSS样式篇（一）-- 页面布局
isLTH的博客
11-06 291
在编写前端样式时，必须要掌握一些css调整元素适配型的技术，流式布局，弹性盒子，calc属性等等，本文详细的介绍了这几种技术的具体使用方法，包括案例代码等，如果能全都看懂的话，一定会对你页面布局有帮助
用DIV+CSS技术设计的鲜花网站（web前端网页制作课作业）
HTML网页设计
08-07 443
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
CSS前端开发技术视频2.zip
06-11
在本资源"CSS前端开发技术视频2.zip"中，我们主要关注的是CSS（Cascading Style Sheets）这一前端开发核心技术的第二部分学习内容。CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言...
IEtester 0.5.2.7z 测试前端页面各个版本的效果开发
03-01
在IT行业中，前端页面的开发与测试是一项至关重要的任务，因为它直接影响到用户的交互体验和网站的兼容性。本文将深入探讨IEtester 0.5.2这一工具，它是一个专门用于测试前端页面在不同版本的Internet Explorer...
web前端开发计划.rar
05-30
在“web前端开发计划.rar”这个压缩包中，我们可以预见到一份详尽的Web前端开发指南，涵盖了从项目启动到最终实现的整个流程。这份资料不仅教导开发者如何规划和实施Web开发项目，还强调了核心的技术栈，包括HTML、...
前端面试题之Css相关题集.zip
最新发布
06-21
10. **CSS性能优化**：如何减少CSS选择器的复杂度，使用适当的布局策略，以及如何利用CSS缓存来提升页面加载速度。 11. **CSS变量**：CSS自定义属性（Variables）允许在CSS中定义变量并重复使用，提高代码复用。 ...
index_前端页面_
10-01
前端页面的开发流程通常包括设计、编码、测试和优化几个阶段。设计阶段可能涉及线框图或原型图的制作，以规划页面的结构和交互。编码阶段则根据设计将这些概念转化为实际的HTML、CSS和JavaScript代码。测试环节包括...
CSS3特性demo页面
07-30
CSS3特性demo页面 含文字阴影，边框阴影，圆角，选择器，等
css前端页面自适应记录
SpringHASh的博客
05-12 339
1.html页面入口函数加入下一段，获取屏幕宽度/10,得到基数。 window.onresize = function (ev) { $('html').css('fontSize',(document.body.offsetWidth / 10) + 'px') } 2.使用pxCook https://www.fancynode.com.cn/pxcook工具打开psd，使用上面获取到的基数填入到 pxCook工具中，获取对应的width、heigh..
TestNG ExtentReports报告css/js样式加载问题解决方案
程序员小杨哥的博客
12-07 1121
使用testng框架+extentreports生成报告时，碰到css/js样式加载不出来，报告很丑的问题。本文介绍永久解决该问题的方案，再也不用担心报告样式问题~
接口测试平台-3：亲手创造第一个首页
weixin_48435804的博客
01-06 343
初言 1. 一个html网页，是如何通过django展现出到你和你同事的浏览器中的 html模版：相当于树干树枝 具体展现的数据：就是动态的各种树叶 html静态语言：就是形成树干树枝的语言 js脚本语言：就是我们看到页面内的各种动作行为的脚本 css样式：就是美化这些树干树叶的装饰方法 2.用户访问你平台首页的逻辑 用户打开浏览器，输入网址url django服务接到这个网址url django服务去根据这个url 找到对应的后台函数 找到后台函数后，看到这个后台函数要做一件事..
自动化测试平台(五)：搭建前端开发框架并实现前端登录功能
曲鸟
12-08 1万+
一、前言 上一章节我们实现了用户模块的增删改查接口，现在有了接口了就需要开始开发前端页面对其进行展示交互了。这一章节将通过react（Web开发框架）+antd（UI组件库）+ts（Javascript的超集）的技术栈来搭建我们的前端项目。 ......
【毕业设计】《数据库原理及应用技术》课程指导平台的开发
bwwork的博客
02-24 427
文章目录目录系统实现思路源文件 目录 系统实现思路 互联网的出现改变了人类的生活方式，提高了人们的工作效率和生活质量，随着互联网的发展，网络教育应运而生,实现了人类教育的一次革命。如今网上教学已经成为高等教育领域中日益流行的教学模式，它的灵活性和资源共享的优势，受到各国教育界的喜爱。《数据库原理与应用技术》课程指导平台的开发将Internet网络技术与现代教育观念相融合，为教师与学生在教学环节中的交流提供更便捷的方式，实现了个人信息维护、课件上传与下载、教学信息发布、作业发布、评阅作业等，提高了教学成果
菜鸟视觉平台开发（一）：登录界面
y1447027943的博客
10-17 257
WinForm视觉平台
接口测试平台-6：首页的继续开发
weixin_48435804的博客
01-06 297
美化设计： 1. 百度风格 特点：简洁明了，加载飞快，搜索功能强大，很容易被同事作为书签页收藏甚至做成主页。 2.hao123风格 特点：满屏的超链接，花里胡哨，但很实用，全是常用网址，设计公司内测试平台的话也可以用各种内部常用链接作为首页，这样做更容易让同事保存成书签。 3. 数据总结显示 特点：此类页面更加直观的给用户展示必要数据，显得高大上和正规。但是要求技术难度较高，且需要大量的网上去抄第三方控件，首次进入加载会很慢。 4. 广告类页面 特点：通篇的大...
大五人格心理测试网页端实现
热门推荐
weixin_55229531的博客
05-29 1万+
大五人格心理测试网页端实现
CSS与前端元素设计：动态效果与交互技术详解
本篇文章主要介绍了前端开发技术，涵盖了如何利用CSS设置页面和浏览器元素，以及Web前端开发的相关概念和工具。主要内容包括： 1. **CSS功能**： - 丰富的超链接特效：动态超链接、按钮式超链接和浮雕式超链接的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chuntian_tester

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值