CSS -- 练习（待续优化）
啊啊啊 错误百出啊 错点总结： 字符全角半角、清楚浮动、结尾</div>有点乱找不到对应的了、注释要写好、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mlsm.css">
</head>
<body>
<!-- 顶部导航 -->
<div class="top clearfix">
<div class="top-a">
<div class="top-l"><a href="#">您好，欢迎来到素材网</a></div>
<div class="top-r">
<ul>
<li><a href="#">网站导航<span></span></a></li>
<li><a href="#">客服中心<span></span></a></li>
<li><a href="#">建材服务<span></span></a></li>
<li><a href="#">我的收藏<span></span></a></li>
<li><a href="#">我的商务室<span></span></a></li>
<li><a href="#">素材网首页<span></span></a></li>
</ul>
</div>
</div>
</div>
<!-- 顶部导航结束 -->
<!-- 顶部logo和搜索 -->
<div class="search clearfix">
<div class="logo fl"><img src="1.png" alt="logo"></div>
<div class="r-search fr">
<input type="text" value="请输入关键字">
<input type="button">
</div>
</div>
<!-- 主导航 -->
<div class="nav clearfix" >
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">建筑材料</a></li>
<li><a href="#">儿童安全座椅</a></li>
<li><a href="#">工艺美术品</a></li>
</ul>
</div>
<!-- banner部分开始 -->
<div class="banner clearfix">
<!-- 左侧盒子 -->
<div class="l-banner">
<div class="l-banner-title">商机市场</div>
<ul>
<li class="img1"><a href="#">建筑材料</a></li>
<li class="img2"><a href="#">儿童安全座椅</a></li>
<li class="img3"><a href="#">工艺美术品</a></li>
<li class="img4"><a href="#">建筑材料</a></li>
<li class="img5"><a href="#">儿童安全座椅</a></li>
<li class="img6"><a href="#">工艺美术品</a></li>
</ul>
</div>
<!-- 中间的盒子 -->
<div class="c-banner "><a href="#"><img src="center.png" height="212" width="520" alt=""></a></div>
<!-- 右侧的盒子 -->
<div class="r-banner ">
<div class="banner-top"><a href="#"><img src="center-r.png" alt=""></a></div>
<div class="banner-top"><a href="#"><img src="center-r2.png" alt=""></a></div> </div>
</div>
<!-- 建筑材料 -->
<div class="bud clearfix">建筑材料</div>
<!-- 左侧大盒子 -->
<div class="pro">
<div class="l-pro fl">
<div class="t-l-pro">
<!-- 第一个盒子 -->
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div>
</div>
<!-- 横着第二个盒子 -->
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div>
</div></div>
<!-- 中间的线 -->
<div class="line"></div>
<!-- 底部的盒子 -->
<div class="t-l-pro">
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div>
</div>
<!-- 底部横着第二个盒子 -->
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div> </div></div> </div>
<!-- 右侧的盒子 --> <div class="r-pro fr">
<div class="top-r-pro ">建材资讯</div>
<div >
<ul>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
</ul>
</div>
</div>
</div>
<!-- 儿童安全座椅 -->
<div class="bud clearfix">儿童安全座椅</div>
<!-- 儿童安全座椅专区 -->
<div class="baby clearfix"> <!-- 右侧盒子 -->
<div class="r-baby fr">
<img src="et_right.png" class="t-pic" alt="">
<br>
<img src="et_right_bottom.png" height="177" width="218" alt=""> </div>
<!-- 左侧盒子 -->
<div class="title fl"><a href="#">详情请点击>></a></div>
<div class="box fl">
<div class="ban fl">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
<div class="ban fl">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
<div class="ban fl ">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
<div class="ban fl">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
</div>
</div>
<!-- 工艺艺术品 -->
<div class="bud ">工艺艺术品</div>
<!-- 艺术品图片 -->
<div class="art clearfix">
<!-- 上面的盒子 -->
<div class="t-art fl">
<!-- 左边的 -->
<div class="t-one ">
<div class="t-t-one fl">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 " > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div> <div class="t-t-one fr">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 fl" > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div></div>
<!-- 中间的线 -->
<div class="c-linee ">
<!-- 下面的盒子 -->
<div class="t-one fl">
<div class="t-t-one fl">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 " > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div> <div class="t-t-one fr">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 fl" > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div></div></div></div>
<!-- 艺术品右侧 -->
<div class="r-pro fr">
<div class="top-r-pro">建材商社</div>
<div class="light fr "><img src="subtitle.png">在装灯具时，如果装上分开关，可以省去很多烦恼，因为如果只有一个总开关</div>
<ul>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
</ul></div></div>
<!-- 友情链接 -->
<div class="flink">
<div class="flink-con ">
<div class="txt-flink" >友情链接:</div>
<ul >
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
<li><a href="#">爱佳萌网</a></li>
</ul> </div></div>
<!-- 关于我们 -->
<div class="copyright">
<ul <!-- class="clearfix" -->
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<p class="p1">中国建网 版权所有 2000-20012 服务热线：0571-98899898 请与我们联系：server@163.com</p>
<p class="p2">建材网会员互动群：12312313213本网实名:中建网</p> </div> </body> </html>
/*
* @Author: Mingming
* @Date: 2017-03-03 09:52:05
* @Last Modified by: Mingming
* @Last Modified time: 2017-03-04 10:05:48
*/
/* 页面清理 */
body,div,p,ul,li{
margin:;
padding:;
font:12px 宋体;
}
input,img{
border:0 none;
}
input{
outline-style: none;
}
a{
color: #000;
text-decoration: none;
}
ul,li{
list-style: none;
}
.clearfix:after{
display: block;
content: "." ;
line-height:;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:;
}
.copyright,.flink,.baby,.top-a,.search,.nav,.banner,.bud,.pro,.art{
width: 970px;
margin: 0 auto;
}
/* 顶部导航 */
.top{
background-color: #F7F7F7;
border:1px solid #D8D8D8 ;
height:26px;
} .top-l ,.fl{
float: left;
}
.top-r,.fr{ float: right;
}
.top-l,.top-r{
line-height: 26px;
}
.top-r ul ,.top-r li ,.top-r a{
display: inline-block;
}
.top-r li{
background: url(sj.png) right no-repeat;
padding-right: 2px;
}
.top-r a{
padding-right:10px;
height: 26px;
}
/* 顶部导航结束 */
/* 顶部logo */
.search{
margin-top: 12px;
height: 84px;
}
.search .logo{
width: 200px;
height: 84px;
}
.r-search{
width: 528px;
height: 40px;
border:1px solid #C9C9C9;
background: #f5f5f5;
margin-top: 30px;
}
.r-search input[type=text]{
width: 419px;
height: 28px;
border:1px solid #A6A6A6;
float: left;
margin: 4px 0 0 4px;
}
.r-search input[type=button]{
width: 96px;
height: 32px;
background: url(serch.png);
float: left;
margin-top: 4px;
}
/* 顶部logo和搜索框结束 */
/* 主导航 */
.nav{
margin-top: 12px;
height: 25px;
border-bottom: 3px solid #0266a2;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: inline-block;
height: 25px;
line-height: 25px;
padding:0 16px;
color: #2F6CAD;
}
/* 商机市场 */
.banner{
margin-top: 10px;
/* margin-bottom: 15px; */
}
/* 左侧盒子 */
.l-banner{
width: 200px ;
height: 210px ;
float: left;
background: #EBF0F6;
}
.l-banner-title{
height: 30px;
line-height: 30px;
color: #fff;
padding-left:20px ;
background-color: #0266A2 ;
}
.l-banner ul{
margin-top: 5px;
}
.l-banner ul li{
height: 28px;
line-height: 28px;
padding-left: 40px;
}
.img1{background: url("icon_1.png") no-repeat 12px;}
.img2{background: url("icon_2.png") no-repeat 10px;}
.img3{background: url("icon_3.png") no-repeat 8px;}
.img4{background: url("icon_4.png") no-repeat 9px;}
.img5{background: url("icon_5.png") no-repeat 9px;}
.img6{background: url("icon_6.png") no-repeat 9px;}
/*中间的盒子 */
.c-banner{
float: left;
width: 520px;
height: 212px;
}
/* 右侧的盒子 */
.r-banner{
float: right;
width: 230px;
height: 210px;
}
.banner-top{
height: 95px;
width: 229px;
margin-bottom: 10px;
border-right: 1px solid #DFE6F0;
}
/* 建筑材料 */
.bud,.child，{
width: 948px;
height: 34px;
background: #EBF0F6 ;
padding-left: 22px ;
line-height: 34px;
font-weight:;
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
border-top: 3px solid #C3D6E4 ;
}
/* 好太太衣架 */
.pro{
height:344px ;
/* background-color: #DBDBEA ; */
}
.l-pro{
width:729px ;
height: 346px;
border: 1px solid #CACACA;
/* background: #757584; */
}
.t-l-pro{
width: 666px;
height: 142px;
margin:15px 0 15px 26px; /* background: #9B9B8C ; */
}
.l-t-l-pro{
width: 331px;
height: 142px;
/* background: #B9B9C8; */ }
.left-sidebar{
width: 99px;
height:145px ;
} .t-left-sidebar{
width: 97px;
height:63px;
border:1px solid #CACACA;
padding:19px 0 18px 0;
text-align: center;
margin-bottom: 15px;
}
input[type=button]{
/* display: inline-block; */
width: 99px;
height: 26px;
background:url("buy.png");
}
.right-sidebar{
height: 142px;
width: 220px;
margin-left: 10px; }
.right-sidebar p{ font-size: 14px; }
.one{
height: 30px;
margin-top: 9px;
}
.two{
height: 17px;
}
.three{
margin-top: 30px;
height: 20px;
}
.three span{
font-weight:;
color: red;
}
.three del{
font-size: 12px;
}
.four{
margin-top: 16px;
}
.four span{
color: red;
font-weight:;
}
.line{
margin: 14px 5px;
height: 1px;
background: #eee;
}
.r-pro{
width: 220px;
height: 346px;
border: 1px solid #eee;
}
.top-r-pro{
background: #FBFBFB;
line-height: 28px;
height: 28px;
padding-left: 15px;
border-bottom: 1px solid #DFE6F0;
}
.r-pro ul{
margin-top: 11px;
}
.r-pro ul li{ height: 24px;
line-height: 24px;
padding-left: 25px;
background: url(li_bg.png) no-repeat 10px;
}
.r-pro ul li a:hover{
color: #ff0000;
text-decoration:underline;
}
/* 开始儿童座椅 */
.child{
margin:15px auto;
}
.baby{
height: 326px;
}
.box{
width: 722px;
height: 298px;
border:1px solid #C3D6E4 ;
border-top-width: 3px;
}
.baby .title{
width: 722px;
height:25px;
background: url("et.png") no-repeat;
font-size: 14px;
font-weight:;
line-height: 25px; text-align: right;
}
.baby .title a{
color:#00b0e7;
}
.ban{
height: 301px;
/* border: 1px solid #00b0e7; */ }
.ban .one{
width: 164px;
height: 283px;
margin-left: 13px;
margin-top: 5px;
}
.ban .one .et1{
margin-top: 10px; }
.ban .one .et1,.ban .one .et2,.ban .one .et3,.ban .one .et4{
text-align: center;
margin-top: 10px;
}
.ban .one .et3 span{
text-decoration: line-through;
}
.ban .one .et4 span{
color: red;
}
.r-baby .t-pic{
border: 1px solid #CBCBCB;
margin-bottom: 17px;
}
/* 开始工艺艺术品 */
.t-art{
width: 729px;
height: 346px;
border: 1px solid #eee;
}
.t-one{
width: 666px;
height: 142px;
margin-top: 10px;
margin-left: 22px;
}
.t-t-one{
width: 331px;
height: 142px;
}
/* .t-icon{
width: 97px;
height: 142px;
} */
.l-t-icon{
width: 97px;
height: 63px;
border: 1px solid #CACACA;
padding: 19px 0 18px 0;
text-align: center;
margin-bottom: 15px;
} .t-one p{
font: 14px 宋体; } .right-p{
width: 220px;
height: 142px;
}
.p1,.p2{
margin-top: 10px;
margin-bottom: 13px;
}
.money1,.number{
color: red;
font-weight:;
}
.p3{
margin-top:23px;
}
.money2{
text-decoration: line-through;
}
.c-linee{
margin: 14px 0px;
height: 1px;
background: #eee;
}
.light{
margin: 10px 7px 10px;
height: 75px;
color: #999;
}
.light img{
float: left;
margin-right: 7px;
}
.art .r-pro ul{
margin-top:97px;
}
/* 友情赞助 */
.flink{
margin-top: 10px;
height: 100px;
border-top: 1px solid #eee;
border-bottom: 3px solid #eee;
}
.txt-flink{
float: left;
width:60px ;
height: 37px ; }
.flink li{
float: left;
padding:0 4px;
margin-bottom: 15px;
}
.flink-con{
margin-top: 30px;
}
/* 关于我们 */
.copyright{
text-align: center;
}
.copyright ul{
width: 690px;
margin: 0 auto;
}
.copyright li{
float: left;
padding: 0 10px;
border-right: 1px solid #eee;
margin-top: 15px;
}
.copyright .p1{
margin-top: 25px;
margin-bottom: 10px;
}
---恢复内容结束---
CSS -- 练习（待续优化）的更多相关文章
- 转：浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 10个CSS简写及优化技巧
CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: ...
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- css样式-表格优化
1.表格的初步优化 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- CSS页面渲染优化属性will-change
前面的话 当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性wi ...
- css,html性能优化
css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...
- CSS效果：CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- [转]关于浏览器css选择器性能优化
作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...
- CSS选择器的优化
前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...
随机推荐
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 《浅谈架构之路：单点登录 SSO》
前言:SSO 单点登录 “半吊子”的全栈工程师又来了,技术类的文章才发表了两篇,本来想先将主攻的几个系列都开个头(Nodejs.Java.前端.架构.全栈等等),无奈博客起步太晚,写博文的时间又没有很 ...
- 如何在 Windows上编译Objective-C
Objective-C现在几乎已经变成了苹果的专利了,可以直接在苹果的Xcode上编译Objective-C程序,但是在Windows平台下的编译工具就寥寥无几了,本身这种语言用的人就不是很多.今天在 ...
- 关于C# XmlDocument方法Load加载流后自动释放流的解决方法
在实际应用doc.Load(Request.InputStream)的时候,doc.Load方法内置默认释放流 造成再次度Request.InputStream的时候,代码报错 替换方法: XmlDo ...
- UWP: ListView 中与滚动有关的两个需求的实现
在 App 的开发过程中,ListView 控件是比较常用的控件之一.掌握它的用法,能帮助我们在一定程度上提高开发效率.本文将会介绍 ListView 的一种用法--获取并设置 ListView 的滚 ...
- 智能打印SDK---官方博客
(开源准备:开源为百度云打包开源,GIT太慢,SVN没有免费的,TFS有免费的也慢的要命) 开源地址:http://pan.baidu.com/s/1miobLoO 电子商务越来越成熟,提供的服务越来 ...
- 软件测试作业1 — 令我印象最深的BUG
回顾从大一到大三的学习生活,我在学习过程中遇到过许多BUG,刚开始和罗凯老师学习C++时从来没有接触过编程,那时候导致程序不能运行的原因多是语法错误和拼写错误,到了大一下学期,错误多出现在循环与条件跳 ...
- 转:常用的iOS开源库和第三方组件
1.通过CocoaPods安装:
- PHP控制反转（IOC）和依赖注入（DI）
先看一个例子: <?php class A { public $b; public $c; public function A() { //TODO } public function Meth ...
- smarty模板基础2
Smarty自带了一些内置函数,这些内置函数是Smarty模板引擎的组成部分.他们被编译成相应的内嵌PHP代码,以获得最大性能. 您创建的自定义函数不能与内置函数同名,也不必修改这些内置函数. 其中一 ...