人生与戏

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
<!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;width:^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; width:150px;" ><center><img alt="" class="imgs" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" style="width: 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="width: 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; width: 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>

 

posted on 2021-01-27 17:24  人生与戏  阅读(30)  评论(0编辑  收藏  举报