样式demo

于 2022-08-14 14:50:52 发布
阅读量180 收藏
点赞数
分类专栏： html 文章标签： servlet html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fivestar2009/article/details/126331576
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        #tobar{

            width: 100%;

            height: 40px;

            background-color: #3d95d5;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        #jlbhandtxm{

            width: 100%;

            height: 40px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin: 0 auto;

        }

        #querybtn{

            width: 100%;

            height: 50px;

            margin-left: 20px;

            margin-right: 20px;

            margin-top: 20px;

            background-color: #3d95d5;

            color:white;

            border-radius: 5px;

            border-color: #38c !important;

            color: #fff !important;

            text-shadow: 0 1px 0 #059 !important;

        }

       

        #zsxxtable{

            width: 100%;

            margin-top: 20px;

            padding: 0;

            border: 1px solid #ddd;

            border-collapse: collapse;

            border-spacing: 0px;

            padding-left: 20px;

            padding-right: 20px;

        }

        #zsxxtable tr{

            height: 35px;

        }

        .lefttd{

            width: 40%;

            background-color: #9fd4f5;

            text-align: center;

            border: 1px solid #ddd;

            font-family: 微软雅黑;

            font-size: 15px;

        }

        .righttd{

            width: 60%;

            border: 1px solid #ddd;

            padding-left: 10px;

        }

        #querybh{

            height: 40px;

            border: 1px solid #ccc;

            border-radius: 2px;

            padding:0px;

            margin-top:20px;

            margin-bottom: 20px;

            margin-left: 20px;

            margin-right: 20px;

            width: 100%;

        }

        #querybh:focus{

            /* border: 3px solid red; */

            /* outline: 3px solid red; */

            outline: 0; border: 1px solid red;

        }

        #querybh:active{

            /* border: 3px solid red; */

            /* outline: 3px solid red; */

            outline: 0; border: 1px solid red;/* textbox focus的时候有样式 */

        }

        .align-center{

            margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */

            width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

            background:red; /* 背景色 */

            text-align:center; /* 文字等内容居中 */

        }

        .my-center{

            width: 300px;

            margin: 0 auto;

        }

        #tobar2{

            display: flex;

            justify-content: space-evenly;

            width: 100%;

            height: 40px;

            background-color: #3d95d5;

            display: flex;

        }

    </style>

</head>

<body>

    <div id="tobar" >

            <!-- 使用just-content:space-between 左中右，中间居中对齐了，使用flex,但是里面的div需要是3个,否则中间那个不能居中对齐 -->

            <div style="margin-left:10px;color:white;">返回</div>

            <div style="width: 100px;color:white;">计量证书查询</div>

            <div></div>

    </div>

    <div id="tobar2" >

        <div style="margin-left:10px;color:white;">返回aaa</div>

        <div style="width: 100px;color:white;">计量证书查询</div>

    </div>

    <div id="jlbhandtxm">

        <div></div>

        <div>请输入计量证书编号或证书条码</div>

        <div></div>

    </div>

    <div style="background-color:#ccc ;width:100%;height:1px;"></div>

    <div style="width: 100%;display: flex;">

        <!-- 这个需要flex否者，否则只能有margin-left，而右边marg-right展示不出来 -->

        <input id="querybh" type="text" >

    </div>

    <div style="background-color:#ccc ;width:100%;height:1px;"></div>

    <div style="width: 100%;display: flex;">

        <input id="querybtn" type="button" value="查询" >

    </div>

    <!-- <div style="margin:0 auto;background-color:red; text-align: center;"> -->

    <div >

        <div style="width: 200px;height:50px;background-color:#ccc;margin: 0 auto; text-align: center;line-height: 50px;">

            dfdfdf

            <!-- 这个是div在中间，居中对齐 ,line-height=height是垂直居中对齐-->

        </div>

        <span style="width: 150px;background-color: blue; margin: 0 auto;">

            <!-- 这个span没有做到水平居中对齐，如果想水平居中对齐，需要把我注掉的div打开 -->

            水平居中对齐

        </span>

    </div>

    <div class="align-center">居中div演示效果</div>

   

    <table id="zsxxtable">

        <tr>

            <td class="lefttd">证书编号</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">送检单位</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">计量器具名称</td>

            <td class="righttd">数字兆欧表</td>

        </tr>

        <tr>

            <td class="lefttd">型号/规格</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">出厂编号</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">制造单位</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">批准人</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">核验员</td>

            <td class="righttd"></td>

        </tr>


 

        <tr>

            <td class="lefttd">检定员</td>

            <td class="righttd"></td>

        </tr>

        <tr>

            <td class="lefttd">管理编号</td>

            <td class="righttd">/</td>

        </tr>

       

    </table>

</body>

</html>

fivestar2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端样式布局Demo练习
想飞的小菜鸡
09-28 2612
给定Demo： 于是乎开始了我的第一次前端Demo制作练习... 虽然写的时候意识到把布局写死了... 以后多用% 少用px Demo.html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>&...
Axure集合多个Demo样式案例
05-25
Axure集合多个Demo样式案例／Axure集合多个Demo样式案例Axure集合多个Demo样式案例／Axure集合多个Demo样式案例Axure集合多个Demo样式案例
demo样式.css
12-19
这是一个demo.css
HTML的Demo实例
二木成林
10-31 4335
Demo1 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo1</title> <style type="text/css"> * { margin: 0; pa...
css样式demo随记
weixin_34250434的博客
01-28 89
code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { ...
一款好用的html5样式demo
05-24
一款好用，好看的html5样式及代码的demo，建议在谷歌等有开发者模式的浏览器上面查看
bootstrap-select 下拉框demo（含多种样式）
12-09
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demo
QSS样式Demo.zip
08-22
在"QSS样式Demo.zip"这个压缩包中，包含了一个QSS样式的实际应用示例。"作者原帖地址.txt"可能是原始发布者提供的链接或相关信息，指向了讨论QSS样式的论坛帖子（http://www.qtcn.org/bbs/read-htm-tid-63012.html）...
WPF 样式 Demo
10-19
**WPF（Windows Presentation Foundation）样式 Demo** WPF 是微软推出的.NET Framework的一部分，它提供了一种强大的用户界面框架，用于构建美观且功能丰富的桌面应用程序。样式在WPF中扮演着至关重要的角色，它们...
后台前端样式DEMO
04-24
【标题】"后台前端样式DEMO"所涉及的知识点主要集中在网页设计和开发领域，特别是前端界面的呈现和交互。这个DEMO很可能是为了展示如何在后台系统中应用美观且功能丰富的前端样式，以提升用户体验。 【前端样式】...
QT各种样式demo.zip
04-28
在这个"QT各种样式demo.zip"压缩包中，我们很显然会看到一个关于QT的QWidgetDemo示例，这将帮助我们深入理解QT中的样式和模板应用。 QWidget是QT GUI编程中最基础的类，它是所有可视化用户界面组件的基类。在...
jqgriddemo,样式漂亮，可以直接使用
01-09
jqgriddemo,样式漂亮，可以直接使用，满足多种复杂的前端表格操作功能，有需要的小伙伴可以学习学习
Java 23种设计模式Demo案例大全 ☞ 【已完结】
热门推荐
Appleyk的专栏
11-06 11万+
注：已经延期好久好久了，从去年11月份到今年8月份，卧槽，不敢想啊，博主真是没时间整啊，太忙没时间？那都是借口，主要是坚持很难，我尽量有时间续更下！这个必须完成，太TM经典了，必须完成！！！ 俗话说，古有<孙子兵法>，掌握之，能打胜仗也，今有<23种设计模式代码案列大全>，学习之，能敲出骇世惊俗的代码；不信吗，若不信的话，那是你没有真正掌握其中的思想精髓； ...
产品经理 demo html,18个UI demo设计实例，深挖让用户愉悦的小惊喜
weixin_35740545的博客
06-10 605
文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例，希望对大家有所启发。CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西，也有实验性的概念——是个激发灵感的宝库。我们在其中做了一些挖掘，发现了一些有趣的UI demo和概念图，包括对话框和模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关，可供你欣赏和再设计。...
div中文字超过长度，自动换行
fivestar2009的博客
12-21 1万+
white-space:normal; word-break:break-all;overflow:hidden;
使用pageoffice进行在线预览
fivestar2009的博客
06-21 1万+
1）首先pageoffice不能跨域访问2）使用的是PageOffice_4.4.0.4_Java.zip3）使用pageoffice不能随页面直接打开文件，只能通过前一个html打开4）由于使用的是2个服务，因此pageoffice单独一个服务，只能通过磁盘路径访问5）对路径进行了base64加密6）var croFilePath = "C:\\\\aaa"+filePath;    croFi...
火狐 Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the plat
fivestar2009的博客
10-13 6124
今天遇到声音播放不能自动播放问题 火狐Uncaught(inpromise)DOMException:Theplaymethodisnotallowedbytheuseragentortheplatform 解决办法 火狐--选项--隐私与安全--自动播放--允许音频和视频即可 Google的问题，网上这样说的，但是我没找到，只是做个记录 google 在浏览器输入chrome://flags/#autoplay-policy ...
GetMapping 与PostMapping 传递参数
fivestar2009的博客
03-16 4429
// @PostMapping("/teststudent") // public Student showStudent(String studentName, String studentAge){ //{"studentName":"hahaha","studentAge":"10"} 请求体这个，传递过来的都是null // public Student showStudent(@RequestBody String studentName, String studentAge).
div 在body中水平 垂直居中
fivestar2009的博客
06-19 4423
&lt;script type="text/javascript"&gt;                   $(window).resize(function(){                     $(".mydiv").css({                         position: "absolute",                         left: (...
echarts大数据图表样式demo
最新发布
08-03
总结起来，echarts大数据图表样式demo提供了丰富的图表类型和样式配置选项，可以满足不同需求的数据可视化需求。我们可以根据自己的需求选择合适的图表类型和样式，使用echarts来展示大数据图表，并通过调整样式使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值