工做之問題篇

最近在作一個手機網站，有模版使用，可是不想使用模版，感受對技能提升沒有幫助，因此儘可能寫原生，

/*
 *  建立時間: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

感受很鬱悶。。。。。。。。