CSS练习实例

最新推荐文章于 2024-02-27 20:14:14 发布
最新推荐文章于 2024-02-27 20:14:14 发布
阅读量530 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzl980111/article/details/108843743
版权 
<!DOCTYPE html>



<!--[if IE 9 ]><html class="ie9"><![endif]-->



<head>
    <!-- bootstrap是一个响应式布局，分辨率做自适应 
        initial-scale=1  缩放比例，完全不缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <meta name="format-detection" content="telephone=no">


    <meta charset="UTF-8">


    <meta name="description" content="Violate Responsive Admin Template">

    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="./bootstrap-editable.css" rel="stylesheet">
    <link href="./bootstrap-table.css" rel="stylesheet">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>

    <script src="./bootstrap-editable.js"></script>
    <script type="text/javascript" src="./bootstrap-table.min.js"></script>
    <script type="text/javascript" src="./bootstrap-table-zh-CN.min.js"></script>
    <script src="./bootstrap-table-editable.js"></script>



    <script>
        window.sessionStorage.setItem("rwid", "login_token");
        var a = window.sessionStorage.getItem("rwid");
    </script>
    <style>
        p[text-value] {
            /* 含有text-value属性的p标签 */
            color: red;
        }

        p[text-value~='1'] {
            /* 含有text-value属性求，且值含有'1'单词的p标签 */
            color: green;
        }

        p[text-value='123'] {
            /* 选择带有text-value属性且等于'123'的p标签 */
            color: blue;
        }

        :link {
            /* 选择所有未访问过得连接 */
            /* background-color: wheat; */
        }

        a:active {
            /* 选择活动链接 */
            /* color: red; */
        }

        p:hover {
            /* 鼠标掠过标签会触发 */
            color: seagreen;
        }

        p:first-letter {
            color: black;
        }

        #donghua {
            width: 200px;
            height: 200px;
            background-color: red;

        }

        @-webkit-keyframes mymove {
            100% {
                background: blue bottom right/50px 50px;
            }
        }

        #tishi {
            background-color: #ddffff !important;
            padding: 18px;

            border-left: 6px solid blue !important;

            /* solid实线    dotted点状  double双线  dashed虚线 */
            /* background-color: #ddffff !important;
            padding: 14px;
            border-left: 6px solid #ccc !important;
                border-left-color: rgb(204, 204, 204);
            border-color: #2196F3 !important; */
        }

        #yuanjiao {
            border-radius: 16px;
            border: solid black 1px;
            padding: 17px;
        }

        #threed {
            border: 5px groove #98bf21;
            padding: 18px;
        }

        #threed2 {
            border: ridge 5px blueviolet;
            padding: 18px;
        }

        #bottom {
            position: fixed;
            bottom: 0px;
            padding: 18px;
            border: cadetblue 5px solid;
            width: 100%;
        }

        #niantie {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 18px;
            border: cadetblue 5px solid;
            width: 100%;
        }

        label>i:first-child {
            color: blue;
        }

        label::first-letter {
            /* ::first-letter实现对文本的首个字符获取 */
            color: #ff0000;
            font-size: xx-large;
        }

        label::before {
            content: 'lable前插入的内容';
        }

        label::after {
            content: 'lable后插入的内容';
        }

        .main {
            height: 1800px;
        }
        .daohang{
            list-style: none;
            width: 200px;
            background:#f1f1f1;
            padding: 0px;
            margin:0px
        }
        .daohang li{
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        .daohang li a{
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        .daohang li:hover{
            background-color: #555;
            color: white;
        }
        .tip{
            float: left;
        }
        .tipshow{
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* 定位 */
            position: absolute;
            z-index: 1;
        }
        .tip:hover .tipshow{
            visibility: visible;
        }
        .username1{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid rgb(92, 233, 92);
        }
        .password1{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid rgb(92, 233, 92);
        }
        .username2{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid slategrey;
            border-radius: 4px;
        }
        .password2{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid slategrey;
            border-radius: 4px;
        }
    </style>
</head>

<body id="skin-blur-violate">
    <title>CSS</title>
    <div id="niantie">
        黏贴定位 position: -webkit-sticky; position: sticky;
    </div>
    <div class="main">
        <button onclick="go_up()">向上</button>
        <button onclick="go_down()">向下</button>
        <button onclick="go_left()">向左</button>
        <button onclick="go_right()">向右</button>
        <h3>选择器</h3>
        <p text-value>p[text-value]选择带有text-value属性的p标签</p>
        <p text-value="1 34">p[text-value~='1']选择带有text-value属性值含有'1'单词的p标签</p>
        <p text-value="123">p[text-value='123']选择带有text-value属性且等于'123'的p标签</p>
        <a href="#">测试</a>
        <a href="#">测试</a>

        <hr>
        <h3>动画</h3>
        <div id="donghua">
        </div>
        <hr>

        <div id="tishi">
            div提示框效果
        </div>
        <div id="yuanjiao">
            div曲线边框效果 border-radius
        </div>
        <div id="threed">
            div3d曲线边槽效果 groove
        </div>
        <div id="threed2">
            div3d脊边框 ridge
        </div>

        <hr>
        <label>标签<i>标签</i>1</label>
        <label>标签2</label>
        <label>标签3</label>
        <hr>

        <ul class="daohang">
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <div class="tip">鼠标移动到此
            <span class="tipshow">让你移动你就移动啊，你咋这听话呢</span>
        </div>
        <hr>
        <div style="width: 50%; float: left;padding: 40px;">
            <form action="">
                <input class="username2" type="text" placeholder="请输入用户名">
                <input class="password2" type="password" placeholder="请输入密码">
            </form>
        </div>
        <div style="width: 50%; float: left;padding: 40px;">
            <form action="">
                <input class="username1" type="text" placeholder="请输入用户名">
                <input class="password1" type="password" placeholder="请输入密码">
            </form>
        </div>
        <div>
            
        </div>
    </div>
    <div id="bottom">
        底部说明部分
    </div>

</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="./adapter_core.js"></script>
<script>
    function go_up() {
        $("#donghua").css("-webkit-animation:", "mymove 5s forwards");
    }

    function go_down() {

    }

    function go_left() {

    }

    function go_right() {

    }
</script>

</html>

在这里插入图片描述
在这里插入图片描述

黑胡子大叔的小屋
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java 操作斑马打印机写rfid_RFID高精度利器，斑马技术新型ATR7000 RTLS读取器提升资产智能化...
weixin_39681486的博客
12-07 262
通常来说，技术重要的并不只是技术本身，还有它的落地和应用价值。2020第十四届国际物联网博览会上，斑马技术公司携其一系列广泛的物联网解决方案亮相，覆盖医疗保健、行政、制造、运输物流与零售等领域，可实现各个行业的企业资产智能化，对于公司应用和行业水准的提升都发挥着积极作用。其中，全新推出的ATR7000 RTLS读取器更是全场的焦点，而MC3390R手持式RFID读取器则荣获了博览会“IOTE金奖”...
css练习例子
一虹的博客
08-04 546
Css练习1.1 小米导航栏1.2 新浪导航栏 1.1 小米导航栏 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/xiaomi.css"> </head> <body> <div id="blue"&g
斑马打印机(zebraZT410R-203dpi)打印RFID标签流程
qq_43568790的博客
07-31 4973
1.首先连接到打印机 下面代码为连接打印机的代码，其中ip为打印机ip地址， "TcpConnection.DEFAULT_CPCL_TCP_PORT"的值为6101。 public Zt410Util(String ip) throws ConnectionException { Connection con = new TcpConnection(ip, TcpConnection.DEFAULT_CPCL_TCP_PORT); con.open(); } 2.接着利用
斑马打印机-RFID打印机 ZT411R最全攻略，从0上手 通过【JAVA生成ZPL指令+ts24.lib+ip：端口】的方式调用打印，无须安装驱动
qq_40114983的博客
06-28 5943
前言：本文如标题所言，主要分享如何通过JAVA调用斑马的RFID进行打印 首先得准备好你的RFID打印机、本文实例用得是斑马ZT411 RFID版。根据打印机操作手册完成打印机得安装，其中包括标签和色带安装、以及打印机得配网（推荐配置固定IP）。下载 斑马打印机连接工具，方便配置打印机，以及测试ZPL指令 下载后根据打印机具体型号选择安装相应的驱动方便测试（说明：java中连接打印机是不需要安装驱动的）下载 ZebraDesigner for Developers 3 条码标签编
RFID智能仓储管理解决方案,你get到了吗-新导智能
Xindoo2020的博客
07-31 367
系统背景　　企业竞争优势的建立和保持必须以高效率和可靠的物流运作为保证。采取有效的物流仓储管理，建立全智能、自动化的现代物流仓储系统能事半功倍地提高企业核心竞争力。 苏州新导为企业有效应用信息化手段提升管理水平和工作效率，满足“统一指挥、反应迅速、运转高效”的物资供应体系的需求，按照现代物流管理的要求，坚持立足高标准、高起点，从整体物流供应链最优化出发，打造了一套利用物联网技术来全力推进物流仓储工作智能化的RFID智能仓储管理系统。采用此系统将对企业各个物流环节进行优化和智能化管理， 可以十分可...
CSS案例练习
srnmwj99的博客
10-11 158
01-表格斑马线 代码: <html > <head> <title>练习-表格斑马线</title> <style type = "text/css"> td{ text-align:center; width:25%; } .tr1{ background:#e8e8e8; } table{ border-collapse:collapse; } tr{ border-bottom:
css3.0 图形构成实例练习二
09-25
css3.0 的出现给我们带来了很大的影响，本文主要知识点 transform属性/animate的应用，感兴趣的朋友可以参考并学习下实例，希望对你学习图形构成有所帮助
CSS布局实例代码 两列布局实例
09-25
CSS布局实例代码详解 在前端开发中，布局是非常重要的一部分，CSS布局实例代码是开发者们经常使用的布局方式之一。下面我们将详细讲解CSS两列布局、CSS三列布局、CSS等高布局等多种布局方式。 一、CSS两列布局 ...
css3.0 图形构成实例练习一
09-25
在本实例中，我们将探讨CSS3如何用于创建图形构成，特别是通过边框半径、绝对定位以及背景颜色等属性来制作一个卡通头像。 首先，我们来看HTML结构。这里有一个`.header`类作为头部容器，包含三个子元素：`.eye_...
zebra标签打印
05-20
使用java语言开发，zebra斑马固定打印机利用zpl指令给打印机发送命令，有无驱和有驱打印两种方式，能打印中文（前提是需要下载一个中文字体包放到打印机里面），数据能写入RFID芯片……
bootstrap入门练习实例
03-09
这个"bootstrap入门练习实例"提供了一套教程，旨在帮助初学者掌握Bootstrap的基础知识，并通过实际操作来提升技能。以下是对这些知识点的详细解释： 1. **响应式设计**: Bootstrap的核心特性是响应式布局，意味着...
前端练习实例，js+jq+css+html
12-30
适合新手练习前端整体，实现各种页面动态功能
java打印标签（机型TOSHIBA条码打印机B-EX4T）
weixin_44174685的博客
11-19 2021
java打印标签（机型TOSHIBA条码打印机B-EX4T） 实现方式： 打印机设置网络ip java获取socket连接，调用TPCL指令 标签效果：
java连接斑马打印机--最简单的方法
最新发布
qq_48050838的博客
02-27 889
之前接到一个任务，要利用斑马打印机打印，在网上找了好多种方式，包括利用官方jdk，还有各种复杂的方式。^CI17^F8^FO40,200^A1N,30,20^FD数量:｛数量｝ 产线: LPN:｛LPN｝^FS。^CI17^F8^FO40,230^A1N,30,20^FD供应商代码:｛供应商代码｝ ｛公司｝^FS。^CI17^F8^FO40,260^A1N,30,20^FD订单号:｛订单号｝ ｛开放数量｝^FS。^CI17^F8^FO40,140^A1N,30,20^FD物料编码:｛物料编码｝^FS。
Java调用Zebra条码打印机打印条码、中英文数字条码混合标签，可自由控制格式和排版
热门推荐
逸轩
12-12 1万+
最近公司要做一个条码标签打印的软件，故特此研究了一下Zebra条码打印机，粗略了解了一下ZPL语言，Download了几个Demo，但始终觉得这些Demo不规范、不全面，问题很多，于是自己抽时间整理了一下。代码注释我写得比较清楚，无需太多解释，一看便知。如果要对元素格式进行修改，需要对zpl语言有所了解。 功能要点： 1.Java调用打印机 2.打印单个条码 3.打印中文字符 4.打
java调用zebra斑马打印条码+英文+数字+中文
偏执的博客
10-28 5962
打印的具体样式如下所示：有引用其他文章的打印方式，但是不通用，而且中文这块，打印出来是反的，并且我需要一次性打印两张一样的，参考的链接百度都是那篇文章，如下：这是原博主的，百度很多都是抄这个一模一样，我在zpl语言那边有改进，具体看下面代码 先贴上整个类的代码，其中有一个ts24.lib文件我放在网盘，那玩意老费劲不好找， 网盘地址：链接：https://pan.baidu.com/s/1hsPz0F1uBBgg0hlRQDbIfw 提取码：o00d package com.lims.common.cor
斑马射频打印机同时操作打印、写入EPC、读TID
qq_31520717的博客
05-07 1442
java连接斑马射频打印机发送一个命令同时执行三个操作（打印、写入、读取）
Vue练手项目
黑胡子大叔的博客
09-03 4039
小记 笔记 一、项目初始化 1、初始化 首先使用vscode快捷键打开当前文件夹下的命令行 Ctrl + ` 运行 npm init -y 生成package.json文件 在项目中需要用到webpack进行打包，下面安装webpack 2、安装webpack 执行 npm install webpack webpack-cli -D 其中-D是 --save-dev的简写，表示开发环境依赖 3、引入并使用vue 首先对项目进行基本配置 创建index.html、main.js等 配
CSS样式的高级应用
07-17
除了上述几个知识点，CSS样式的高级应用中还包括一些小实例和习题，通过这些实例和习题的练习，我们可以更加深入地理解和掌握CSS样式的高级应用技巧。这些实例和习题可以帮助我们在实际开发中灵活应用CSS样式，实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值