<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="border:1px solid grey; text-align:center;" ><img alt="" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width=^f('Device_info').any('1') ? '200px' : '100%'^><br/><b>雀巢</b></div> <div style="border:1px solid grey; text-align:center;^f('Device_info').any('1') ? '200px' : '100%'^ " ><img alt="" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width=^f('Device_info').any('1') ? '200px' : '100%'^><br/><b>雀巢</b></div> <b><u>加粗/下划线</u></b> <b style="color: blue">加粗/蓝色</b> <b></b> <span style="padding: 0 12px"> 设置外边距 </span> <span style="color: blue"> 【单选】 </span> <p style="text-align:center; font-weight: bold;"> 居中+加粗 </p> <!-- <center></center> --> 首行缩进 2个字符： <p style="text-indent:2em"> 段落 </p> 段落去内外边距： <p style=" margin:0; padding:0;"></p> 图片：<center><img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width="100" /><br/><center>ofo共享单车</center></center> <div style="border:1px solid grey; " ><center><img alt="" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width="100"></center><br/><center><b>雀巢</b></center></div> <div style="border:1px solid grey; 150px;" ><center><img alt="" class="imgs" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" style=" 100px;"></center><center><b>抖音</b></center></div> 感觉最好的：<div style="text-align:center; " ><img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" style=" 100%; height: auto;"/><br/><div >野格</div></div> 内联框架 iframe <iframe align='middle' frameborder='1' scrolling='yes' src='https://www.zhiding.cn/intel/article/^f('QDL0x2').value()^_1' width='100%' height='400px'> </iframe> Grid 的 gridlabel ， 去除隐藏多余边框 <!-- 系统中可以设置 --> <style> .gridlabel { border-color: transparent #95B7F3 transparent transparent; } </style> 手机端&&填空题 <style> .numeric input[type=number], .numericlist input[type=number] { width: 40%; } </style> <!-- 手机端分组不出示大类 单/多选题样式调整 --> <style type="text/css"> /* 手机端样式调整 */ li.confirmit-group-heading { display: none; } li.confirmit-not-within-group { padding-left: 10px; border-top-width: 0px !important; } </style> <!--手机端分组不出示大类 grid 题型 --> <style type="text/css"> /* 手机端样式调整 */ .confirmit-group-heading { display: none; } /* 加粗 */ .grid-answer-label{ font-weight: bold; } </style> <!-- 开放题open不能拖动文本框的代码 系统中可以设置 --> <style> textarea { resize: none; } </style> <!-- 去分组后不用组名的元素的空格 grid题型 系统中可以设置--> <style> .gridgroupheader{ padding: 0px; } </style> <!-- grid手机端左边的加粗 PC端可以在系统中设置--> <style> .grid-answer-label{ font-weight: bold; } </style> <!-- 3D-grid手机端上方的加粗 -- 有效了 !important scale 的宽度 --> <style> h1.question-text{ font-weight: bold !important; } .scale{ width:90px; } </style> <!-- multi grid 有效 --> <style> .question-content>h1.question-text{ font-weight: bold !important; } </style> <!-- 多选项框和图片对齐 --> <style> .multi-answer label { background-position: left; } </style> <!-- 单选项框和图片对齐 --> <style> .single-answer label { background-position: left; } </style> f('Device_info').any('1') ? '(<center><img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width="600" /><br/></center>)' : '<center><img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width="100%" /><br/></center>' <!-- 优化 --> <center><img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width="^f('Device_info').any('1') ? '600px' : '100%'^" /><br/></center> <style> imgs:hover{ width: 600px; } </style> <style> .scale{ width: 100px; } </style> <!-- 手机端 单/多选题 三列 --> <style> /* QEHV 是题号 */ #QEHV_inputs>.answerlist { display: flex; flex-direction: row; flex-wrap: wrap; } #QEHV_inputs>.answerlist li { /* 在此分为3列，每列占32% 的宽度 */ width: 32%; } </style> <style> #IMG1_1_inputs>.answerlist{ display: flex; flex-direction: row; flex-wrap: wrap; } #IMG1_1_inputs>.answerlist li { /* 在此分为3列，每列占32% 的宽度 */ width: 32%; } </style> <style> img:hover { width: 600px; } </style> <style> img { cursor: pointer; transition: all 0.6s; /*放大动作在0.6s内完成*/ } img:hover { transform: scale(2); /*放大倍数*/ } </style> <!-- 除了IE其它都是水平垂直居中 --> <div id="S16img" style="border:1px solid grey; 200px; height: 200px;" ><center><img alt="" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" width="100%"><br/>盖中盖a</center></div> <style> #S16img{ display: flex; justify-content: center; align-items: center; } </style> </body> </html>