为您找到搜索结果：1312个
学习微信小程序之css19之背景设置
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>背景设置</title><style>.header{background-color:teal;width:200px;height:200px;border:1pxsolidblack;/*设置背景图片,默认只要位置够,无限重复*/background-image:url("img/nav_icon_01.png");/*让背景图不重复显示,只显示一次*/background-repeat:no-repeat;}.warp1{background-color:yellow;width:200px;height:200px;border:1pxsolidblack;/*设置背景图片,默认只要位置够,无限重复*/background-image:url("img/nav_icon_01.png");/*让背景图在x方向上铺满*/background-repeat:re...
学习微信小程序之css18绝对定位
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>绝对定位</title><style>*{margin:0;padding:0;}.header,.wrap,.close{background-color:teal;border:1pxsolid#000000;}.header{height:200px;}.wrap{background-color:#0099cc;width:400px;/*父元素相对定位*/position:relative;}.close{height:20px;width:20px;/*使用position:absolute;需要父元素是相对定位*//*position:absolute;绝对定位*/position:absolute;top:0;right:0;}</style></head><body><divclass="header">head&...
学习微信小程序之css17定位
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{width:100px;height:100px;background-color:yellow;border:1pxsolidteal;margin-bottom:10px;}.box2{/*position:relative;相对定位,相对于原来的位置进行设置*/position:relative;right:-30px;top:-30px;}</style></head><body><!--div.box$*3+tab快速创建--><divclass="box1"></div><divclass="box2"></div><divclass="box3"></div></body>&l...
学习微信小程序之css17clearfix原理
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>clearfix原理</title><style>*{padding:0;margin:0;}.header,.aside,.main,.footer{border:1pxsolidyellow;background-color:silver;margin-bottom:10px;height:200px;}.aside{height:300px;float:left;width:200px;}.main{float:left;width:980px;/*margin-left:202px;*/}.clerafix{display:table;/*触发bfc,让div具有包裹性*/}.clerafix:before,.clerafix:after{content:"";display:block;clear:both;height:0px;}/*在IE6触发bfc,让div具有包...
学习微信小程序之css16常见布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css常见布局</title><style>*{padding:0;margin:0;}.header,.nav,.main,.footer{background-color:silver;border:1pxsolidblack;margin-bottom:10px;}.header{height:100px;}.main{height:200px;}.nav{width:200px;float:left;}.main{margin-left:202px;}.footer{height:50px;clear:both;}</style></head><body><divclass="header">header</div><divclass="nav">无比挚爱的雪，念起，心的原野便铺出一条纯白的路，通向旷...
学习微信小程序之css15解决父盒子高度塌陷
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>解决父盒子高度塌陷</title><style>.chlid{width:200px;height:200px;background-color:teal;border:1pxsolidblack;float:left;}.patent{border:1pxsolidred;/*overflow:hidden防止父元素塌陷*/overflow:hidden;/*超出的部分隐藏*/}</style></head><body><divclass="patent"><divclass="chlid">child</div></div></body></html>...
学习微信小程序之css14浮动的特性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css浮动效果</title><style>.box1{height:100px;background-color:green;}.box2{float:left;background-color:red;height:50px;width:50px;}.box3{float:left;width:200px;height:200px;background-color:silver;}.box4{padding-top:20px;width:100%;height:200px;background-color:yellow;}</style></head><body><div><divclass="box1"></div><divclass="box2"></div><...
学习微信小程序之css12设置盒子内容的宽高
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.box{width:200px;height:200px;background-color:yellow;padding:100px;border:50pxsolidred;}</style></head><body><divclass="box">整个盒子占用的空间的宽度等于:左边框宽度+右padding+宽度+左padding+右边框宽度整个盒子占用的空间的高度等于:上边框宽度+上padding+高度+下padding+下边框宽度</div></body></html> ...
学习微信小程序之css11内外边距集合
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.box{width:400px;height:600px;background-color:#b3d4fc;}.boxstrong{/*对于行内元素来说,上下的内外边距不支持设置,设置了也不起作用,但是左右会起作用*/margin-top:200px;margin-bottom:200px;margin-left:50px;margin-right:100px;padding:500px60px;}</style></head><body><divclass="box"><span>我种下一颗种子，终于长出了果实，今天是个伟大日子</span><strong>摘下星星送给你，拽下月亮送给你，让太阳每天为你升起</strong><span&...
学习微信小程序之css10外边距
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;}.box1,.box2,.box3{border:5pxsolidred;height:100px;}.box2{border-color:blue;/*设置上右下左的外边距*//*margin:10px020px200px;*//*上下为10,左右为200*/margin:10px200px;}.box4{width:900px;height:300px;background-color:yellow;/*设置水平居中*/margin:0auto;}</style></head><body><divclass="box1"></div><divclass="box2"></div><divclass="bo...
学习微信小程序之css9内边距
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.box{/*设置上右下左的内边距*/padding:20px5px10px5px;border:1pxsolidred;width:100px;height:100px;/*内边距享有背景色*/background-color:yellow;}</style></head><body><divclass="box"></div></body></html>效果如下：...
学习微信小程序之css8
实战画一个圣诞树<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{padding:0px;margin:0auto;}.box{width:0px;height:0px;/*transparent设置为透明色*/border:50pxsolidtransparent;border-bottom-color:yellow;border-top:0none;}.box1{width:0px;height:0px;/*transparent设置为透明色*/border:100pxsolidtransparent;border-bottom-color:yellow;border-top:0none;}.box2{width:0px;height:0px;/*transparent设置为透明色*/border:200pxsolidtransparent;border-bottom-color:...
学习微信小程序之css7
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*.class_list{*//*display:block;*//*width:90%;*//*height:300px;*//*margin:200pxauto;*//*background-color:aqua;*//*}*//*.class_fout{*//*font-size:25px;*//*font:25px"黑体";*//*line-height:300px;*//*text-align:center;*//*}*/.*{padding:0;margin:0;}.box{width:200px;height:200px;padding:100px;/*border:100pxsolidred;*/border:100pxdottedred;background-color:#555555;}</style>&l...