HTML5 <span>标签单行分割

本文介绍了HTML中<span>和<div>两个标签的基本特性和使用场景。解释了<span>作为行内元素可用于划分同一行的不同区域,而<div>作为块级元素则常用于包含如段落、标题等不同类型的内容,并自动换行。

<span> 标签在CSS定义中属于一个行内元素
一行内可以被<span>划分成好几个区域
<span>本身没有任何属性
<div>在CSS定义中属于一个块级元素
<div> 可以包含段落、标题、表格甚至其它部分
使用<div> 会自动换行,使用 <span>就会保持同行。

{% extends 'layout.html' %} {% block title %}Profile{% endblock %} {% block content %} <title>设备管理界面</title> <style> /* ===== 基础样式 ===== */ body { font-family: "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: bold; background-color: #f5f7fa; margin: 0; padding: 0; color: #333; line-height: 1.5; } /* ===== 容器布局 ===== */ .container { display: flex; min-height: 100vh; } .main-panel { flex: 1; display: flex; flex-direction: column; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin: 10px; } /* ===== 标签页样式 ===== */ .tabs { display: flex; background-color: #f5f7fa; border-bottom: 1px solid #dcdfe6; } .tab { padding: 12px 20px; cursor: pointer; border: none; background-color: transparent; color: #606266; font-size: 14px; font-weight: bold; transition: all 0.3s; position: relative; } .tab:hover { color: #409eff; } .tab.active { color: #409eff; background-color: #fff; border-bottom: 2px solid #409eff; } .tab a { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 5px; } /* ===== 分割面板 ===== */ .split-panel { display: flex; flex: 1; } .split-left { width: 100%; padding: 15px; } /* ===== 内容区域 ===== */ .tab-content { flex: 1; overflow-y: auto; } /* ===== 部分样式 ===== */ .section { margin-bottom: 20px; padding: 15px; border: 1px solid #ebeef5; border-radius: 4px; background-color: #fafafa; } .section-title { font-weight: bold; margin-bottom: 10px; color: #303133; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid #ebeef5; } /* ===== 表单行样式 ===== */ .form-row { display: flex; align-items: center; font-weight: 900; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; } .form-row label { min-width: 120px; color: #606266; font-size: 14px; } /* ===== 输入控件样式 ===== */ input, select { padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; font-weight: bold; color: #606266; transition: border-color 0.3s; background-color: #fff; } input:focus, select:focus { outline: none; border-color: #409eff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); } input:disabled { background-color: #f5f7fa; color: #c0c4cc; cursor: not-allowed; } /* ===== 按钮样式 ===== */ button { padding: 8px 15px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s; background-color: #fff; color: #606266; } button:hover { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } button:active { transform: scale(0.98); } /* ===== 按钮组样式 ===== */ .button-group { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; } .button-group1 { display: flex; justify-content: flex-start; gap: 10px; margin-top: 10px; } /* ===== 控制面板样式 ===== */ .control-panel { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; } .control-item { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #ebeef5; border-radius: 4px; background-color: #fff; } .control-item label { display: flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; } /* ===== 底部信息样式 ===== */ .bottom-info { font-size: 12px; font-weight: bold; color: #909399; margin-top: 10px; padding: 10px 15px; background-color: #f5f7fa; border-top: 1px solid #ebeef5; } /* ===== 响应式设计 ===== */ @media (max-width: 1200px) { .form-row { flex-direction: column; align-items: flex-start; } .form-row label { min-width: auto; margin-bottom: 5px; } .control-panel { flex-direction: column; } } @media (max-width: 768px) { .container { flex-direction: column; } .tabs { flex-wrap: wrap; } .tab { flex: 1; min-width: 120px; text-align: center; } .split-panel { flex-direction: column; } .split-left { width: 100%; } } /* ===== 特定布局调整 ===== */ .form-row > div { display: flex; flex-direction: column; margin-right: 20px; margin-bottom: 10px; } .form-row > div .section-title { margin-bottom: 8px; } .form-row > div .form-row { margin-bottom: 8px; } </style> <body> <div class="container"> <div class="main-panel"> <div class="tabs"> <div class="tab active"><a href="{{ url_for('home') }}"><i class="fas fa-sign-out-alt"></i>基本参数</a></div> <div class="tab"><a href="{{ url_for('act') }}"><i class="fas fa-sign-out-alt"></i>无线参数</a></div> <div class="tab"><a href="{{ url_for('scan') }}"><i class="fas fa-sign-out-alt"></i>扫频结果/参数</a></div> </div> <div class="split-panel"> <div class="split-left"> <div class="tab-content"> <div class="section"> <div class="section-title">状态</div> <div class="button-group"> <button>查询</button> <button>查询全部</button> </div> </div> <div class="section"> <div class="form-row"> <label>版本号:</label> <input type="text" style="width: 245px;"> <button>查询</button> <label>RX衰减:</label> <input type="text"> <button>查询</button> <button>设置</button> </div> <div class="form-row"> <label>4G干扰扫描10MHz时间:</label> <input type="text"> <label>4G干扰不扫描10MHz时间:</label> <input type="text"> <button>查询</button> <button>设置</button> </div> </div> <div class="section"> <div class="section-title">相位差查询设置</div> <div class="form-row"> <label>主频段:</label> <input type="text" style="background-color:#eaeaea;width: 750px;"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band41与主同步频段的相位差:</label> <input type="text"> <label>band78与主同步频段的相位差:</label> <input type="text"> <button>查询</button> </div> <div class="form-row"> <label>band40与主同步频段的相位差:</label> <input type="text"> <label>band79与主同步频段的相位差:</label> <input type="text"> <button>设置</button> </div> </div> <div class="section"> <div class="section-title">设置同步偏移频点</div> <div class="form-row"> <label>Band:</label> <select> <option></option> <option>34</option> <option>39</option> <option>40</option> <option>41</option> <option>78</option> <option>79</option> </select> <label>FRE:</label> <input type="text"> <label>PCI:</label> <input type="text"> <label>TYPE:</label> <select> <option></option> <option>5Gtdd</option> <option>4Gtdd</option> </select> <button>查询</button> <button>设置</button> </div> <div class="form-row"> <label>同步:</label> <select> <option></option> <option>同步成功</option> <option>同步失败</option> </select> <button>查询</button> <label style="justify-content: flex-end;">偷帧失败:</label> <input type="text"> <button>查询</button> </div> </div> <div class="section"> <div class="section-title">其他设置</div> <div class="button-group1"> <button>恢复出厂设置并且复位</button> <button>数据恢复出厂设置并且复位</button> <button>复位</button> <button>中心频点扫频结果自动设置</button> </div> </div> <div class="section"> <div class="form-row"> <div> <div class="section-title">设置单板工作模式</div> <div class="form-row"> <label>当前工作模式:</label> <select> <option></option> <option>全频段屏蔽主板模式</option> <option>全频段屏蔽从板模式</option> <option>纯5g屏蔽模式</option> <option>用户自定义模式</option> <option></option> <option></option> </select> </div> <div class="form-row"> <button>查</button> <button>设置</button> </div> </div> <div> <div class="section-title">设置单板扫频模式</div> <div class="form-row"> <label>当前扫频模式:</label> <select> <option></option> <option>双通道全频段扫频</option> <option>双通道默认频点扫频</option> </select> </div> <div class="form-row"> <button>查</button> <button>设置</button> </div> </div> <div> <div class="section-title">设置单板频点配置模式</div> <div class="form-row"> <label>当前频点配置模式:</label> <select> <option></option> <option>根据扫频结果自动配置</option> <option>用户手动配置</option> <option></option> <option></option> </select> </div> <div class="form-row"> <button>查</button> <button>设置</button> </div> </div> </div> </div> <div class="section"> <div class="form-row"> <div> <div class="section-title">设置单板同步模式</div> <div class="form-row"> <label>当前单板同步模式:</label> <select> <option></option> <option>公网同步</option> <option>gps同步</option> </select> </div> <div class="form-row"> <button>查询</button> <button>设置</button> </div> </div> <div> <div class="section-title">查询配置IP</div> <div class="form-row"> <label>IP:</label> <input type="text"> <button>查询</button> </div> <div class="form-row"> <label>网关:</label> <input type="text"> <button>查询</button> </div> <div class="form-row"> <label>掩码:</label> <input type="text"> <button>设置</button> </div> </div> </div> </div> <div class="section"> <div class="section-title">控制面板</div> <div class="control-panel"> <div class="control-item"> <label>功放电平 <select> <option></option> <option>高开低关</option> <option>低开高关</option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item"> <label>射频状态 <select> <option></option> <option>断电前状态</option> <option>强制开射频</option> <option>强制关射频</option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item"> <label>设备互联 <select> <option></option> <option>dantai</option> <option></option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item" style="display: flex;flex-wrap: wrap;"> <label >WIFI及功放控制 <select> <option></option> <option>输出高</option> <option>输出低</option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item"> <label>所有射频开关状态 <select> <option></option> <option>所有射频通道关闭</option> <option>所有通道射频开启S</option> </select> </label> <button>查询</button> <button>设置</button> </div> </div> </div> </div> </div> </div> <div class="bottom-info"> 查询同步偷帧失败次数 </div> </div> </div> </body> {% endblock %}在源代码不变的情况,点击查询,判断有没有连接设备,如果没有就弹出未选择设备
11-12
提取下面内容的所有中文<template> <a-card> <a-row type="flex" justify="space-between" style="margin-bottom: 10px;"> <a-radio-group v-model:value="detailType"> <a-radio-button value="contrast">{{ $t('community_contribution.contrast') }}</a-radio-button> <a-radio-button value="trend">{{ $t('community_contribution.trend') }}</a-radio-button> </a-radio-group> <span> <span class="tool-style"> <span>仓名:</span> <a-select style="width: 200px;"> </a-select> </span> <span v-if="detailType === 'contrast'" class="tool-style"> <span>{{ $t('community_contribution.dimensions') }}:</span> <a-radio-group v-model:value="orgType"> <a-radio-button value="year_on_year"> <span>{{ $t('community_contribution.year_on_year') }}</span> <a-select style="width: 120px; margin-left: 2px;" size="small" :bordered="false" placeholder="请选择年份"> </a-select> </a-radio-button> <a-radio-button value="month_on_month">{{ $t('community_contribution.month_on_month') }}</a-radio-button> </a-radio-group> </span> <span class="tool-style"> <span v-if="detailType === 'contrast'">区间:</span> <span v-else>{{ $t('community_contribution.creation_date') }}:</span> <a-radio-group v-model:value="timeType"> <a-radio-button value="week">{{ $t('global.week') }}</a-radio-button> <a-radio-button value="month">{{ $t('global.month') }}</a-radio-button> <a-radio-button value="year">{{ $t('global.year') }}</a-radio-button> </a-radio-group> </span> <span v-if="detailType === 'contrast'"> <span>基线日期:</span> <a-date-picker v-model:value="timeBase" ></a-date-picker> </span> <span v-else> <a-range-picker v-model:value="timeRange" ></a-range-picker> </span> </span> </a-row> <div v-if="detailType === 'contrast'"> <a-card size="small" title="项目活跃度度量" :head-style="{ backgroundColor: '#f2f7ff'}"> <a-row> <a-col v-for="item in pieData.active_metric" :key="item" :span="8"> <pieChart :id="item.id" :legend-names="item.legend_name" :title="item.title" :value="item.value"></pieChart> </a-col> </a-row> </a-card> <a-card style="margin-top: 10px;" size="small" title="项目影响力度量" :head-style="{ backgroundColor: '#f2f7ff'}"> <a-row> <a-col v-for="item in pieData.impact_measurement" :key="item" :span="8"> <pieChart :id="item.id" :legend-names="item.legend_name" :title="item.title" :value="item.value"></pieChart> </a-col> </a-row> </a-card> </div> <div v-if="detailType === 'trend'"> <a-card v-for="item in lineData" :key="item" size="small" :title="item.title" :head-style="{ backgroundColor: '#f2f7ff'}" style="margin-top: 10px;"> <lineChart :id="item.id" :title="item.title" :value="item.value"></lineChart> </a-card> </div> </a-card> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue'; import i18n from '@/locales'; import pieChart from './components/pieChart.vue'; import lineChart from './components/lineChart.vue'; const detailType = ref<any>('contrast'); const orgType = ref<any>('year_on_year'); const timeType = ref<any>('week'); const timeRange = ref<any>([]); const timeBase = ref<any>(''); const pieRef = ref<any>(null); const LEGEND_NAME = ['本月', '上月']; const pieData = ref<any>({ active_metric: [ { id: 'chart_requests_merged', title: '合入PR数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_issues', title: 'Issue数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_comments', title: '评审意见数', legend_name: LEGEND_NAME, value: [], }, ], impact_measurement: [ { id: 'chart_watch', title: '仓Watch数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_star', title: '仓Star数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_fork', title: '仓Fork数', legend_name: LEGEND_NAME, value: [], }, ] }); const lineData = ref<any>([ { id: 'chart_pr_trend', title: '合入PR数趋势', value: { xData: [], yData: [], }, }, { id: 'chart_issue_trend', title: 'Issue数趋势', value: { xData: [], yData: [], }, }, { id: 'chart_comment_trend', title: '评审意见数趋势', value: { xData: [], yData: [], }, }, ]); </script> <style lang="less"> .tool-style { margin-right: 20px; } </style>
08-16
<div class="layui-card-body layui-table-body layui-table-main"> <table class="layui-table layui-form" id="demo" lay-data="page:true" lay-filter="test"> <thead> <tr style="height:30px;"> <th lay-data="{field:'return_id',type:'checkbox',fixed:'left'}"><input type="checkbox" lay-filter="checkall" name="" lay-skin="primary"></th> <th lay-data="{field:'id',sort:true,width:80,fixed:'left'}">No.</th> <th lay-data="{field:'plant',fixed:'left'}">厂别</th> <th lay-data="{field:'kubie'}">库别</th> <th lay-data="{field:'category'}">出货类别</th> <th lay-data="{field:'so_number'}">票号</th> <th lay-data="{field:'pallet_number'}">板号</th> <th lay-data="{field:'liaohao'}">料号</th> <th lay-data="{field:'name'}">品名</th> <th lay-data="{field:'demand'}">需求数量</th> <th lay-data="{field:'prepared_qty'}">备料数量</th> <th lay-data="{field:'creator'}">创建人</th> <th lay-data="{field:'create_time',width:160,fixed:'right'}">上传时间</th> </tr> </thead> <tbody> <?php $i=0;$j=$pagenum;foreach($dataArr as $w){$i++;?> <tr> <td><input type="checkbox" name="id" value="<?= $w['id'] ?>" lay-skin="primary"></td> <td><?= $i ?></td> <td><?= $w['plant'] ?></td> <td><?= $w['kubie'] ?></td> <td><?= $w['category'] ?></td> <td><?= $w['so_number'] ?></td> <td><?= $w['pallet_number'] ?></td> <td><?= $w['material'] ?></td> <td><?= $w['name'] ?></td> <td><?= $w['demand'] ?></td> <td><?= $w['prepared_qty'] ?></td> <td><?= $w['creator'] ?></td> <td><?= $w['create_time'] ?></td> </tr> <?php $j++;} ?> </tbody> </table> </div> 需要增加功能项,复选框每次只可以点击一个,点击后会弹出对话框,当category为不良品时,弹出请出入备料数量prepared_qty单行文本框,并将备料数量更新到数据库中;当category为非不良品时,弹出textarea 多行文本框,刷入箱号,一个箱号对应10个机台,刷入多个箱号后,自动记录备料数量,提交时,将备料数量更新到数据库中
最新发布
11-19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值