工作之问题篇
最近在做一个手机网站，有模版使用，但是不想使用模版，感觉对技能提高没有帮助，所以尽量写原生，
/* * 创建时间:2014.12.10 * 创建地点:盛唐科技 * 创建人员:包月强 * 职位:初级前端工程师 * 代码:非模块化编码 */ /* reset 样式重置 */ body,h1,h2,h3,p,ul,li{margin:0; padding:0; font-family:"微软雅黑", "黑体", sans-serif;} em{font-style:normal;} li{list-style:none;} body{width:100%; height:100%;} /* 头部 */ #nav{height:55px; background:#000; color:white;} #nav a{display:block; width:55px; height:55px; position:absolute;} #nav a:nth-child(1){left:0; border-right:1px solid #333333; background:url(../images/icon/menu.png) no-repeat center;} #nav a.close{background:url(../images/icon/close_icon.png) no-repeat center;} #nav a:nth-child(2){right:0; border-left:1px solid #333333; background:url(../images/icon/message.png) no-repeat center;} #nav em{display:block; height:55px; text-align:center; line-height:55px;} /* 导航 */ #navtion{position:absolute; top:75px; left:12px; width:40.5%; padding-left:5.9%; background:#000; z-index:9999; display:none;} #navtion li{border:0; padding-left:39px; border-bottom:1px solid #333333; line-height:50px;} #navtion a{display:block; text-decoration:none; color:white; font-size:12px;} #navtion .style{height:78px; padding:18px 0 0 0; border:0;} #navtion .style a{width:11px; height:11px; float:left; margin:0 15.4% 15px 0; } #navtion li:first-child{height:0; border:0;} #navtion span{width:0; height:0; border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #000;border-left:10px solid transparent; position:absolute;top:-20px; left:9px;} #navtion .child{line-height:30px; border-bottom:0; padding-left:20px; display:none;} #Accordio em{float:right; display:inline-block; width:15px; height:50px; padding-right:15px; background:url(../images/icon/add_icon.png) no-repeat 0 center;} #Accordio .emActive{background:url(../images/icon/lose_icon.png) no-repeat 0 center;} #navtion .child{line-height:30px; border-bottom:0; padding-left:20px; display:none;} #Accordi em{float:right; display:inline-block; width:15px; height:50px; padding-right:15px; background:url(../images/icon/add_icon.png) no-repeat 0 center;} #Accordi .emActive{background:url(../images/icon/lose_icon.png) no-repeat 0 center;} .gray{background:#2c3e50; border:1px solid #808b96;} .orange{background:#d35400; border:1px solid #e49866;} .green{background:#27ae60; border:1px solid #7dce9f;} .petrol{background:#16a085; border:1px solid #73c6b6;} .pink{background:#8e44ad; border:1px solid #bb8ece;} .red1{background:#c0392b; border:1px solid #d9887f;} .black{background:#333333; border:1px solid #848484;} .white{background:#7f8c8d; border:1px solid #b2baba;} .index_icon{background:url(../images/icon/home_icon.png) no-repeat 1px center;} .profile_icon{background:url(../images/icon/file_icon.png) no-repeat 1px center;} .news_icon{background:url(../images/icon/news_icon.png) no-repeat 1px center;} .blog_icon{background:url(../images/icon/blog_icon.png) no-repeat 1px center;} .faq_icon{background:url(../images/icon/faq_icon.png) no-repeat 1px center;} .product_icon{background:url(../images/icon/duct_icon.png) no-repeat 1px center;} .supply_icon{background:url(../images/icon/supply_icon.png) no-repeat 1px 18px;} .event_icon{background:url(../images/icon/event_icon.png) no-repeat 1px center;} .phone_icon{background:url(../images/icon/phone_icon.png) no-repeat 1px 18px;} .hire_icon{background:url(../images/icon/hire_icon.png) no-repeat 1px center;} .contact_icon{background:url(../images/icon/contact_icon.png) no-repeat 1px center;} /* 主内容区 */ #mainContent{padding:30px 18px 34px;} #title{padding-bottom:20px;} #title h1{padding-bottom:10px;} #content{padding:20px 0 43px 0; border-top:1px solid #ededed; border-bottom:1px solid #ededed;} /*轮播图*/ #banner{position:relative; margin-bottom:26px; overflow:hidden;} #banner img{display:block; width:100%; height:auto;} #banner a{display:block; width:27px; height:27px; background:#0b0600; border:1px solid #aba5a0; color:white; text-decoration:none; text-align:center; line-height:27px; border-radius:50%; -webkit-border-radius:50%; position:absolute;top:50%; margin-top:-27px;} .prev{left:10px;} .next{right:10px;} #bText{position:absolute; height:53px; bottom:0; z-index:2; color:white; background:#000;width:97%; padding:5px 0 0 3%; opacity:0.6;} /* 首页简介/新闻/相册 */ #profile,#news,#phone{padding:20px 0; border-top:1px solid #ededed;} #profile h2,#news h2,#phone h2{font-weight:normal; padding-bottom:16px;} #profile a,#news a,#phone a{text-decoration:none; color:#000;} /* 首页产品 */ #product{padding:20px 0; border-top:1px solid #ededed; overflow:hidden;} .productChild{width:47%;} .leftFloat{float:left;} .rightFloat{float:right;} .productChild img{display:block; width:100%; margin:0 auto; padding-bottom:16px;} .productChild h3{text-align:center; padding-bottom:10px;} .productChild a{color:#000; text-decoration:none;} .productChild p span:nth-child(2){float:right;} .red{color:#ff5a00;} /* 首页新闻 */ .read{display:block; width:30%; margin:26px auto 0; background:#27ae60; padding:5px; text-align:center; text-decoration:none;} #news .read{color:white;} /* 首页相册 */ #phone{overflow:hidden; padding-bottom:0;} #phone img{display:block; width:100%;} #grally{padding:20px 0 0 0; overflow:hidden;} #grally a{display:block; width:28.4%; float:left;} #grally a:nth-child(3), #grally a:nth-child(6), #grally a:nth-child(9), #grally a:nth-child(12){padding-right:0;} #grally a:nth-child(4), #grally a:nth-child(5), #grally a:nth-child(6){padding-bottom:0;} .mengban{position:fixed; top:0; left:0; z-index:999; width:100%;height:100%; background:#000; opacity:0.9; display:none;} .mengbanImg{z-index:9999; width:100%; height:auto; position:fixed; top:50%; left:0; display:none;} #grally .closeI{position:fixed; top:0; right:10px; width:10px; z-index:10000; display:none; cursor:pointer;} /* 底部footer */ footer{clear:both; height:55px; background:#000; color:white; line-height:55px; padding-left:10px; position:relative;} footer a{color:white;} footer p{height:55px;} footer img{display:inline-block; position:absolute; padding:20px; right:5%; top:50%; margin-top:-23px;} /* 相册ablue页 */ #content .noPad{padding:0;} #grally a:nth-child(4), #grally a:nth-child(5), #grally a:nth-child(6){padding-bottom:20px;} #grally a:nth-child(10), #grally a:nth-child(11), #grally a:nth-child(12), #grally a:nth-child(13), #grally a:nth-child(14), #grally a:nth-child(15){padding-bottom:0;} .read{color:white;} #grally img{width:100%; height:auto;} /* 事件页 */ .EventContent{position:relative; padding:21px 17px 30px; margin-bottom:20px; color:white;} .EventContent time{position:absolute; right:5px; top:22px;} .EventContent a{position:absolute; bottom:5px; right:5px; color:white; text-decoration:none;} .EventContent header{padding-bottom:14px; border-bottom:1px solid white;} .EventContent p{padding-top:13px;} .EventContent h3{font-weight:normal;} #hide{display:none;} /* 招聘页 */ .hireContent{ text-align:center; margin-bottom:17px;} .padBtm36{padding-bottom:36px;} .hireContent a{display:block; text-decoration:none; color:white; line-height:27px; padding:11px 0;} /* 招聘内容页 */ .jobdetail p{padding-bottom:18px;} .jobdetail a{color:#55BFFC; text-decoration:none;} /* 新闻页 */ .news{position:relative; padding:22px 0; border-top:1px solid #ededed;} .news img{width:100%; height:auto;} .news h3{margin:20px 0 13px; font-weight:normal;} .news p,.news time{font-size:12px;} .news p{line-height:1.6em;} .news time{position:absolute; bottom:22px; right:5px;} .news a{color:#000; text-decoration:none;} .news:first-child{padding-top:0; border-top:0;} .hide{display:none;} /* 新闻内容 */ .newText header{position:relative;} .newText time{top:2px; right:5px;} /* 公司简介 */ .Accordion h4{margin:7px 0; height:45px; background:#eeeeee url(../images/icon/add_icon.png) no-repeat 15px center; text-align:center; line-height:45px; font-size:14px; cursor:pointer; font-weight:normal; color:#000;} .Accordion .AccordionAction{background:#eeeeee url(../images/icon/lose_icon.png) no-repeat 15px center;} .Accordion p{color:#000; padding:0 5px 5px 5px; display:none;} .padBtm10{padding-bottom:10px;} img.AccClose{width:auto; z-index:100000; position:fixed; right:10px; cursor:pointer; display:none;} /* 产品列表 */ #content .product{padding-top:0;} .produc .productChild{padding-bottom:25px;} .clear{clear:both;} .produc .padBtm47{padding-bottom:47px;} /* 微问答 */ .faq h3{font-size:16px;} .faq article{color:black;} .faq article h4{color:black; text-align:left; padding-left:16px; position:relative; background:#eeeeee url(../images/icon/add1_icon.png) no-repeat 98% center; padding-right:10px; } .faq .accactive{background:#eeeeee url(../images/icon/lose1_icon.png) no-repeat 98% center; border-bottom:1px solid #cfcdcd; margin-bottom:0;} .faq article p{background:#eee; color:black; padding:16px 10px;} /* 联系我们 */ .contact h3{margin-top:0;} .contact header p{font-size:14px;} .padBtm20{padding-bottom:20px;} .contact #news h4{margin-bottom:17px;} .conForm input{display:block; width:100%; height:38px; margin:8px 0 14px;} #subMit{border:0; background:#27AE60; color:white; font-size:16px; font-family:"微软雅黑", "黑体", sans-serif;}
可用性很差，特别是javascript，第一个难题就是可触控的焦点图，我只会做一些下一页点击，上一页点击，这样来切换，没有搞过拖拽的切换，写了几次，找了很多demo来看，但是很遗憾，没写出来，后面没办法，只用使用插件，我用的
这个插件，挺不错的，大家可以用用，在百度搜就可以搜索到
后面这个问题是一直困扰着我的，后面需要做一个触控的相册，我高开始自己写原生的，只能支持点击预览一张，不能左右切换，后面自己看了幕课网上的视频，然后跟着学，不知道为什么，跟着敲的，老是不出效果，而且明明他没有加载其他的库文件，而我却要加载才可以使用，现在相册终于做好了
支持拖拽了，但是放到自己的网站有出问题了，引入了jquerymobile,他自动给我加一些内容，一些class
感觉很郁闷。。。。。。。。
