微信小程序界面设计小程序中CSS3样式精通课程-调整尺寸(Resizing)

野性酷女 2024-02-19 16:20 41阅读 0赞

### 微信小程序界面设计小程序中CSS3样式精通课程-调整尺寸(Resizing) ###

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

通用语法  
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。  
实例  
规定 div 元素可由用户调整大小：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    border:2px solid;
    padding:10px 40px; 
    width:300px;
    resize:both;
    overflow:auto;
    }
    </style>
    </head>
    <body>
    
    <div>resize 属性规定是否可由用户调整元素尺寸。</div>
    
    <p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p>
    
    </body>
    </html>

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

### 小程序应用 ###

> Wxml代码

> Wxss代码

.c01{
    	border:2px solid;
    	padding:10px 40px; 
    	width:100px;
    	resize:both;
    	overflow:auto;
    }

效果图  
![在这里插入图片描述][20190122165010183.png]

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

![微信小程序界面设计小程序中CSS3样式精通课程-调整尺寸(Resizing)][CSS3_-_Resizing]

[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/b77ed6713fe64fb0a065679c54a8705d.png
[20190122165010183.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/471f2e9ac6524703ba0be6952b119be6.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[CSS3_-_Resizing]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/395898c91df6461791ff58d19f78245d.png