<div> 横向居中-跨浏览器活动

博客主要涉及HTML和JavaScript相关内容,可能围绕这两种技术在浏览器中的应用等信息技术方面展开,但具体细节未详细给出。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我的录像</title> <!-- 引入实训指定样式表 --> <link href="./css/sx3_1.css" rel="stylesheet"> </head> <!-- 设置页面唯一ID,便于CSS针对性控制样式 --> <body id="video"> <!-- 页面头部 --> <header> <div id="top"> <h1>我的测试录像</h1> </div> </header> <!-- 导航区域:使用无序列表实现横向菜单 --> <nav> <ul class="clearfix"> <!-- 每个菜单项设置独立类名,方便后期添加背景图标 --> <li class="photo"><a href="./sx3_1_photo.html" target="_blank">我的照片</a></li> <li class="video"><a href="./sx3_1_video.html" target="_blank">我的录像</a></li> <li class="blog"><a href="./sx3_1_blog.html" target="_blank">我的实验</a></li> </ul> </nav> <!-- 主体内容区域:包含左栏、主内容、右栏 --> <section> <!-- 左侧导向栏 --> <aside class="aside aside-left"> <h3>网页导向</h3> <a href="#">个人档案</a><br> <a href="#">分类标签</a> </aside> <!-- 主内容区 --> <div class="main"> <h2>钻削测试录像</h2> <p>这里展示一个简单的钻削过程。</p> <!-- 视频播放器 --> <div> <video width="500" height="300" controls> <source src="./videos/钻削测试.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video> </div> </div> <!-- 右侧更新记录栏 --> <aside class="aside aside-right"> <h3>更新记录</h3> <a href="#">2009年1月19日</a><br> <a href="#">2009年1月15日</a><br> <a href="#">2009年1月13日</a><br> <a href="#">2009年1月7日</a><br> <a href="#">2008年</a> </aside> </section> <!-- 页脚信息 --> <footer> <a href="mailto:1113622361@qq.com">请你留言</a> <span>更新日期: 1999年1月19日</span> </footer> </body> </html> 我要再添加一个视频<source src="./videos/相机调试.mp4" type="video/mp4">视频尺寸大小不变,格式尽量好看点
最新发布
11-20
<div class="process-table"> <!-- 表头列宽优化 --> <div class="table-header"> <div class="col">工序名称</div> <div class="col">英语名称</div> <div class="col">流程卡内容</div> <div class="col">工艺等待时间(h)</div> <div class="col">机器运行时间(H)</div> <div class="col">set_up时间</div> <div class="col">人工时间</div> <div class="col">单位</div> <div class="col">数量</div> <div class="col">router状况</div> <div class="col">工序代码</div> <div class="col">操作</div> </div> <!-- 数据行 - 与表头相同的列宽设置 --> <div class="table-body"> <div v-for="(item, index) in formList" :key="index" class="table-row"> <!-- 名称 --> <div class="col"> <el-form-item> <el-input v-model="item.routerName" placeholder="工序名称" /> </el-form-item> </div> <!-- 英语名称 --> <div class="col"> <el-form-item > <el-input v-model="item.englishName" placeholder="English Name" /> </el-form-item> </div> <!-- 流程卡内容 --> <div class="col"> <el-form-item > <el-input v-model="item.routercont" type="textarea" :autosize="{ minRows: 1, maxRows: 3}" class="scrollable-textarea" /> </el-form-item> </div> <!-- 时间参数组 --> <div class="col"> <el-form-item> <el-input v-model="item.processWatitime" /> </el-form-item> </div> <!-- 运行(H) --> <div class="col"> <el-form-item> <el-input v-model="item.machineRuntime" /> </el-form-item> </div> <!-- set_up --> <div class="col"> <el-form-item> <el-input v-model="item.setuptime" placeholder="min/pcs" /> </el-form-item> </div> <!-- 人工 --> <div class="col"> <el-form-item> <el-input v-model="item.labortime" placeholder="min/pcs" /> </el-form-item> </div> <!-- 单位 --> <div class="col"> <el-form-item> <el-input v-model="item.routerUnit" /> </el-form-item> </div> <!-- 数量 --> <div class="col"> <el-form-item> <el-input v-model="item.quantity" /> </el-form-item> </div> <!-- 状况 --> <div class="col"> <el-form-item> <el-select v-model="item.routerStatus" placeholder="状态"> <el-option v-for="dict in dict.type.router_status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </div> <!-- 代码 --> <div class="col"> <el-form-item> <el-input v-model="item.processCode" /> </el-form-item> </div> <!-- 操作 --> <div class="col"> <el-button type="danger" icon="el-icon-delete" circle @click="removeProcess(index)" /> </div> </div> </div>表头和下面内容不对齐,且内容框太小无法看见输入内容
09-29
<template> <!-- 顶部搜索区域 --> <div class="filter-container"> <el-form :inline="true" :model="searchForm"> <!-- 问卷标题搜索 --> <el-form-item label="问卷标题"> <el-input v-model="searchForm.dcWjTitle" placeholder="输入问卷标题" clearable /> </el-form-item> <!-- 被测评人ID搜索 --> <el-form-item label="被测评人ID"> <el-input v-model="searchForm.dcid" placeholder="输入被测评人ID" clearable /> </el-form-item> <!-- 部门选择 --> <el-form-item label="人员部门"> <el-select v-model="searchForm.dcDept" placeholder="选择部门" clearable > <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" /> </el-select> </el-form-item> <!-- 状态选择 --> <el-form-item label="提交状态"> <el-select v-model="searchForm.state" placeholder="选择状态" clearable > <el-option label="已提交" value="1" /> <el-option label="未提交" value="0" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button> </el-form-item> </el-form> </div> <!-- 数据表格 --> <el-table :data="filteredData"> <!-- 表格列定义 --> </el-table> </template> <script> export default { data() { return { searchForm: { dcWjTitle: '', dcid: '', dcDept: '', state: '' }, rawData: [], // 原始数据 departments: [ // 部门选项 { label: '技术部', value: 'tech' }, { label: '市场部', value: 'market' } ] } }, computed: { // 过滤后的数据 filteredData() { return this.rawData.filter(item => (!this.searchForm.dcWjTitle || item.title.includes(this.searchForm.dcWjTitle)) && (!this.searchForm.dcid || item.dcid === this.searchForm.dcid) && (!this.searchForm.dcDept || item.dept === this.searchForm.dcDept) && (!this.searchForm.state || item.state === this.searchForm.state) ) } }, methods: { // 触发搜索 handleSearch() { this.fetchFilteredData() }, // 从后端获取数据 async fetchFilteredData() { try { const params = { title: this.searchForm.dcWjTitle, dcid: this.searchForm.dcid, dept: this.searchForm.dcDept, state: this.searchForm.state } // 调用后端API(示例) const { data } = await axios.get('/api/questionnaires', { params }) this.rawData = data } catch (error) { console.error('获取数据失败', error) } } } } </script> 帮我优化一下布局,适用于移动端
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值