微信小程序界面设计小程序中CSS3样式精通课程-多列-column-rule-width列之间规则的宽度

比眉伴天荒 2024-02-19 16:19 54阅读 0赞

### 多列-column-rule-width列之间规则的宽度 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

通用语法  
定义和用法  
column-rule-width 属性规定列之间的宽度规则。  
默认值： medium  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.columnRuleWidth=“thin”  
语法

column-rule-width: thin|medium|thick|length;

值 描述  
thin 定义纤细规则。  
medium 定义中等规则。  
thick 定义宽厚规则。  
length 规定规则的宽度。  
实例  
设置列之间的颜色规则：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    .newspaper
    {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    
    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari and Chrome */
    column-gap:40px;
    
    -moz-column-rule-style:outset; /* Firefox */
    -webkit-column-rule-style:outset; /* Safari and Chrome */
    column-rule-style:outset;
    
    -moz-column-rule-width:1px; /* Firefox */
    -webkit-column-rule-width:1px; /* Safari and Chrome */
    column-rule-width:1px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注释：</b>Internet Explorer 不支持 column-rule-style 属性。</p>
    
    <div class="newspaper">
    人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
    
    此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
    
    通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
    
    通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
    </div>
    
    </body>
    </html>

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
防采集标记：黄菊华老师的课程和资料

### 小程序应用 ###

> Wxml代码

<view class='c01'>
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
    </view>
    
    <view class='c02'>
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
    </view>
    
    <view class='c03'>
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
    </view>
    
    <view class='c04'>
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
    </view>

> Wxss代码

view{margin: 10px;}
    
    .c01{
      column-count: 3;
      column-gap: 10px;
      column-rule-style:  dotted;
    }
    
    .c02{
      column-count: 3;
      column-gap: 10px;
      column-rule-style:  dotted;
      column-rule-width: 5px;
    }
    
    .c03{
      column-count: 3;
      column-gap: 10px;
      column-rule-style:  dotted;
      column-rule-width: 5px;
      column-rule-color: red;
    }
    
    .c03{
      column-count: 3;
      column-gap: 10px;
      column-rule-style:  dotted;
      column-rule-width: 5px;
      column-rule: 1px solid lightblue;
    }
    
    .c04{
      column-count: 3;
      column-gap: 10px;
      column-rule-style:  dotted;
      column-rule-width: 5px;
      column-rule: 1px solid red;
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4d054e5f7726458195fb218c7d7ad1aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5c999422b6274d5b81f68234944df121.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a14ae93fcf1e40bc99e36c8c3da0c993.png