learnByWork
?2019.5.5（移動(dòng)端頁(yè)面）
? 1、頁(yè)面的整體框架大小min-width: 300px~max-width: 560px；
? 2、具體大小單位用px；
? 3、網(wǎng)頁(yè)布局用div不是table，在特殊情況，如內(nèi)容是表格形式的就用table，因?yàn)閠able加載慢，它是整體出現(xiàn)，而不能預(yù)加載。
? 4、頁(yè)面內(nèi)容在水平面上可以設(shè)定具體高度，以防頁(yè)面在伸縮情況會(huì)出現(xiàn)上下布局錯(cuò)亂。
? 5、設(shè)置具體的圖片時(shí)，可以設(shè)置具體width，而不同圖片的height不一樣，可以設(shè)定具體的高度，在為了統(tǒng)一頁(yè)面布局情況下，添加overflow：hidden，超出自動(dòng)剪裁。
6、記得給各個(gè)容器設(shè)置最小寬度（min-width），以防在頁(yè)面伸縮時(shí)出現(xiàn)布局錯(cuò)落情況。
?
2019.5.8（pc端）
1、圖片的適應(yīng)
圖片是網(wǎng)頁(yè)不可缺少的組成部分，而同一個(gè)位置的圖片大小不一定總相等，要保證整體布局整齊可：將img放入一個(gè)div中，該div設(shè)定好width、height，而圖片的width或height設(shè)定100%，height或width則auto。如果各圖片水平位置上width一樣，則width為100%，而height：auto。如果只是高度一樣，則height：100%，而width：auto。
2、關(guān)于文字段落
文字的長(zhǎng)度不一定是固定好的，應(yīng)該給文字段落設(shè)定好一個(gè)width和height，當(dāng)p的長(zhǎng)度超過(guò)是則省略，
當(dāng)行數(shù)屬性可以是width:300px; height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden。
多行屬性：設(shè)定p所在容器的width、height、line-height、overflow:hidden。
3、關(guān)于水平排列元素問(wèn)題
因?yàn)楦鱾€(gè)瀏覽器會(huì)存在1~2px像素的誤差，對(duì)于水平分布，使用float: left屬性可以很好排列，不同瀏覽器出現(xiàn)錯(cuò)亂的情況少，對(duì)于最右邊不能完全靠邊，可以使最右元素float: right。
4、對(duì)于水平排列上，容器是內(nèi)行元素，如a標(biāo)簽、
添加display: inline-block，使元素變成可行內(nèi)塊元素可解決而坍塌問(wèn)題。
5、關(guān)于背景圖像取值問(wèn)題
在服務(wù)器中，圖片加載可能沒(méi)那么快，對(duì)于多個(gè)圖標(biāo)背景，可以放在同一張背景圖中，而相應(yīng)圖標(biāo)的選擇則可以使用background-position定位。
?
2019.5.9（打印模板）
1、關(guān)于table標(biāo)簽邊框過(guò)大問(wèn)題，在table中添加屬性border-collapse: collapse屬性，起邊框合并作用。
2、在使用特殊字符代碼(也可以到Word中去找)時(shí)，發(fā)現(xiàn)放在行內(nèi)元素的一些字符代碼形狀會(huì)發(fā)生變化，而在塊級(jí)元素中就正常顯示，如：<span>∧</span>-><p>∧</p>。
?
2019.5.15
3、對(duì)于頁(yè)面中，水平寬度是100%的容器，雖然設(shè)置了padding、margin左右值0值，但是在頁(yè)面縮小時(shí)，水平容器在最右邊是不靠瀏覽器最右的，可通過(guò)設(shè)置該容器的水平長(zhǎng)度min-width：1200px即可。
4、容器四邊陰影: box-shadow: -2px(左邊)? 0 3px red，2px(右邊) 0 3px red， 0 -2px(上) 3px red， 0 2px(下)? 3px? red——> x方向、y方向、模糊半徑、陰影顏色。
5、利用float、position設(shè)置元素水平居中。在容器中，存在兩個(gè)元素，一個(gè)最右位置，一個(gè)容器中水平居中；使用float讓一個(gè)元素靠邊，剩下居中的元素如果是塊級(jí)元素，則在該元素中添加margin： 0 auto即可，因?yàn)閒loat是脫離文檔流的，塊級(jí)元素會(huì)占據(jù)它的位置，也就是居中的長(zhǎng)度是相對(duì)于整個(gè)容器的寬度來(lái)居中；而如果居中的元素是行內(nèi)元素，居中效果可以通過(guò)在父容器中添加text_align:cener即可，但是，float沒(méi)有脫離文本流，故行內(nèi)元素不會(huì)占據(jù)本來(lái)float元素的位置，那么，居中的寬度其實(shí)是由容器的寬度減去float元素的寬度再進(jìn)行居中的，所以在頁(yè)面寬度較短中，能明顯看到居中效果并沒(méi)有很好達(dá)到。使用position：absolute進(jìn)行居中，會(huì)完全脫離文檔流和文本流，則無(wú)論是居中的元素是塊級(jí)（該元素中添加margin: 0 auto）或行內(nèi)元素（父元素添加text-align:center），均可到達(dá)相對(duì)于整個(gè)父容器居中的效果，就是這樣代碼量有點(diǎn)多....
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.mainContainer {width: 1200px;height: auto;margin: 0 auto;}/* absolute */ /*.newProduce {position: relative;width: 1200px;height: 52px;background-color: #fff;line-height: 52px;text-align: center;}.newProduce a {position: absolute;z-index: 3;right: 0;display: block;font-size: 20px;color: #373737;text-decoration: none;}.newProduce hr {display: inline-block;width: 436px;height: 2px;background: #C3C3C3;}.newProduce p {position: absolute;z-index: 3;top: 26%;left: 50%;margin-left: -65px;width: 130px;font-size: 24px;background: #fff;line-height: 23px;}*//* float */.newProduce {width: 1200px;height: 52px;background-color: #fff;line-height: 52px;margin: 0 auto;overflow: hidden;}.newProduce a {display: block;float: right;font-size: 20px;color: #373737;text-decoration: none;}.aa {margin: 25px auto 0;width: 436px;height: 2px;background: #C3C3C3;}.newProduce p {width: 130px;margin: -14px auto 0;text-align: center;font-size: 24px;background: #fff;line-height: 23px;}</style></head><body><div class="mainContainer"><!-- absolute --><!--<div class="newProduce"><a href="javascript::">更多>></a><hr /><p>最新上架</p></div>--><!-- float --><div class="newProduce"><a href="javascript::">更多>></a><div class="horizonLine"></div><p>最新上架</p></div></div></body> </html>?
?2019.5.16
1、如果你用類(lèi)選擇器元素添加樣式?jīng)]有效果的話，那可能是優(yōu)先級(jí)不夠，可以再添一層關(guān)系。
2、float實(shí)現(xiàn)上下浮動(dòng)——浮動(dòng)可以解決很多頁(yè)面問(wèn)題。比如，水平面上，上下兩個(gè)元素排列，有時(shí)候上面元素可能會(huì)設(shè)置float或position定位，導(dǎo)致后面的元素會(huì)浮動(dòng)上去，造成布局錯(cuò)亂情況，這時(shí)候可以分別給兩個(gè)元素添加一個(gè)寬度100%的且都float，雖然float是水平靠左或右，但是當(dāng)width為100%時(shí)，就不會(huì)有位置變化，可以很好實(shí)現(xiàn)上下層互不干擾，在此之外，記得是分別給兩個(gè)上下層關(guān)系的容器設(shè)好固定的width、height就不會(huì)下面元素占領(lǐng)上面元素情況。
3、兼容問(wèn)題，用div+css實(shí)現(xiàn)的頁(yè)面應(yīng)該不分分辨率下都能很好適應(yīng)，正常顯示，如果瀏覽器分辨率改變出現(xiàn)頁(yè)面錯(cuò)亂情況，則說(shuō)明不能很好兼容(我在1366x768分辨率做的頁(yè)面正常顯示，但在1920頁(yè)面卻出現(xiàn)頁(yè)面錯(cuò)亂情況)。
4、頁(yè)面的設(shè)計(jì)應(yīng)該按照設(shè)計(jì)圖的要求來(lái)，大到頁(yè)面整體布局，小到字體大小顏色問(wèn)題——細(xì)心。
?
2019.5.23
1、鼠標(biāo)移動(dòng)也是點(diǎn)擊事件，屬于touched事件的一種，移動(dòng)端的觸屏點(diǎn)擊也是touched事件，一般PC端能觸發(fā)的點(diǎn)擊事件，移動(dòng)端的也可以完成；但移動(dòng)端能觸發(fā)的事件，鼠標(biāo)點(diǎn)擊不一定能完成，比如拉大圖片放大效果——想提醒自己的是，在PC設(shè)備做移動(dòng)端頁(yè)面時(shí)，不必?fù)?dān)心移動(dòng)的觸動(dòng)效果，只要PC端沒(méi)問(wèn)題，一般移動(dòng)端也可以實(shí)現(xiàn)。
2、填充數(shù)據(jù)時(shí)，頁(yè)面的數(shù)據(jù)一般需要加一個(gè)屬性，這樣容易獲取，可以加id、或者class都行，但是一般id的獲取效果比較快，但在一些導(dǎo)航中，點(diǎn)擊某一個(gè)會(huì)有相對(duì)于其他的特殊樣式，則其他的導(dǎo)航項(xiàng)就可以是共同的class屬性了。
?
2019.6.03（數(shù)據(jù)填充）
對(duì)D9APP的“店鋪聯(lián)盟”進(jìn)行頁(yè)面填充學(xué)習(xí)，注意要點(diǎn)如下：
1、根據(jù)設(shè)計(jì)頁(yè)面，找到原有的頁(yè)面，在原有的基礎(chǔ)上進(jìn)行修改。項(xiàng)目結(jié)構(gòu)不熟悉，可以這樣做：
項(xiàng)目的存放位置：
共同的.js文件時(shí)存放在相同位置的，比如頁(yè)面頭部、尾部、jQuery框架（如Scripts文件中）；自定義的腳本文件，如數(shù)據(jù)填充的js放在另一個(gè)文件夾中（如MyScripts），css文件（style文件中）。對(duì)于原有的文件修改，可以在以上的文件夾中創(chuàng)建屬于自己的腳本文件和css文件先，共同的腳本就調(diào)用就好，注意調(diào)用的版本和原有的一樣。html文件是以.aspx為后綴名保存的，創(chuàng)建步驟如下，總的項(xiàng)目文件夾右鍵—>添加—>web窗體。也可以創(chuàng)建新的文件夾，再創(chuàng)建.aspx，在該文件夾可以添加html文件。注意使用html文檔要添加共同的腳本文件，且.aspx文件頂頭的一行代碼不必出現(xiàn)在.html中。
2、關(guān)于json字段的查看，控制臺(tái)的網(wǎng)絡(luò)（Network）中，點(diǎn)擊XHR，然后參數(shù)或響應(yīng)里面有數(shù)據(jù)填充的字段。修改網(wǎng)頁(yè)，原本的字段值是不能變得，可以通過(guò)原來(lái)的頁(yè)面查看需要使用到的字段值。
3、文件的引用都以絕對(duì)路徑形式，圖片路徑也是一樣，關(guān)于圖片加載問(wèn)題，網(wǎng)頁(yè)圖片較多時(shí)使用延遲加載，能有效的提高頁(yè)面加載速度。基于jQuery圖片延遲加載，在用戶(hù)滾動(dòng)到頁(yè)面到相應(yīng)圖片位置才進(jìn)行加載，將真實(shí)的圖片地址寫(xiě)在data-original屬性中，而src屬性用一個(gè)占位符圖片（如loading的GIF圖片）。需要延時(shí)加載的圖片可以添加共同類(lèi)，方便執(zhí)行延時(shí)加載。注意給延時(shí)加載的圖片添加固定的width、height，當(dāng)圖片未加載時(shí)占滿(mǎn)所需空間（其實(shí)一般都會(huì)給圖片一個(gè)固定的width、height容器）。
<script src="jquery.js"></script><script src="jquery.lazyload.js"></script>
<img class="lazy" src="loading.gif" data-original="example.jpg" >——$('img.lazy').lazyload();
4、移動(dòng)端頁(yè)面中，容器的width應(yīng)該設(shè)置是100%，而兩側(cè)的邊框距離就再設(shè)置margin左右值就好；對(duì)于元素之間的間隔，不要用空格符代替，如 ，在不同的顯示屏?xí)写笮〉牟町?#xff0c;用樣式控制距離。
5、關(guān)于轉(zhuǎn)義字符，如果整個(gè)字符串用的是單引號(hào)，則元素本身屬性需用雙引號(hào)包括的字段不用轉(zhuǎn)義，但用單引號(hào)包括的就需要轉(zhuǎn)義；程序是不允許一個(gè)字符差錯(cuò)的，所以格外注意。
6、項(xiàng)目提交和更新——>相應(yīng)項(xiàng)目，右鍵commit或update。
? 項(xiàng)目調(diào)試
頁(yè)面在渲染過(guò)程會(huì)有一個(gè)id(tostore),要訪問(wèn)那個(gè)頁(yè)面需要添加tostore=一串?dāng)?shù)字，這串?dāng)?shù)字是這樣得來(lái)的由：
var par = { act: "GetPageData3", "store_id": tostore } var tostore = GetQueryString("tostore")，這個(gè)方法在公共的js文件common-function.js中，這個(gè)js文件是一些封裝的方法。比如訪問(wèn)“店鋪聯(lián)盟”，運(yùn)行時(shí)的網(wǎng)址是http://localhost:1671/shopUnion/shopUnion.aspx，這時(shí)要在最后添加“?tostore=163”，這個(gè)具體是什么后面再慢慢理解吧。
?
?2019.6.11（模板套用）
模板框架的套用：
像一些輪播圖或一些廣告位，可以采用后臺(tái)廣告廣告位模板方式引用；
關(guān)于原生，對(duì)于APP來(lái)說(shuō)，如果APP內(nèi)容更新就需要重新APP更新，則就是原生的東西，而像移動(dòng)端APP來(lái)說(shuō)，其實(shí)可以是混合開(kāi)發(fā)，即原生的APP框架，但是一些頁(yè)面的內(nèi)容可以是以網(wǎng)頁(yè)嵌套的模式代入，修改時(shí)只需要后臺(tái)修改部分內(nèi)容即可，用戶(hù)不必更新APP也能看到最新頁(yè)面，比如D9APP的廣告位，修改某個(gè)圖片就后臺(tái)修改廣告位即可在APP端看到，不用下載APP進(jìn)行更新。
關(guān)于js的復(fù)制，如果腳本的鏈接是這樣的形式：https://mall.bbmgood.com/addons/ewei_shopv2/static/js/app/core.js?v=1559116063689，則把該鏈接用瀏覽器打開(kāi)，enter鍵能看到所有js腳本代碼。copy別人網(wǎng)站時(shí)，不能這樣引用別人的腳本，會(huì)被發(fā)現(xiàn)。
?
2019.6.12（項(xiàng)目的編輯）
使用項(xiàng)目時(shí)注意更新項(xiàng)目代碼，如果之前有更新過(guò)代碼，但是自己這邊沒(méi)有更新就編輯容易出錯(cuò)，所以養(yǎng)成經(jīng)常更新代碼習(xí)慣，減少錯(cuò)誤。
每一個(gè)網(wǎng)站都有一個(gè)參數(shù)，當(dāng)各個(gè)網(wǎng)站使用同一個(gè)模板時(shí)（其實(shí)是訪問(wèn)首頁(yè)index），不同的網(wǎng)站可以用index.aspx文件進(jìn)入，但要在鏈接后面加上對(duì)應(yīng)的參數(shù)，如：?store=163。之所以各網(wǎng)站圖片或其他內(nèi)容不一樣是因?yàn)閿?shù)據(jù)填充效果（也就是腳本文件獲取數(shù)據(jù)庫(kù)的內(nèi)容不一樣），要注意：
1、腳本引用應(yīng)該是動(dòng)態(tài)的:src="/themes/<%=themes %>/MyScripts/index.js?v=<%=Version %>"，而不是src="/themes/dsdx/MyScripts/index.js?v=<%=Version %>"
2、配置文件：Web.config-->D:\mySoft\工作代碼\StoreView\Web.config，value屬性的值，將會(huì)對(duì)應(yīng)傳到動(dòng)態(tài)腳本取值中（<%=themes%>）。
2019.6.14
本地的數(shù)據(jù)庫(kù)和網(wǎng)上的不一樣，在瀏覽時(shí)可能會(huì)存在一些圖片差異。
網(wǎng)上在線展廳： http://storetest.dsdxo2o.com/index.aspx?store_id=163
本地?cái)?shù)據(jù)庫(kù)中：http://localhost:40998/Index.aspx?store_id=163，
他們的表現(xiàn)形式不同，但都是一樣的（在dsdx文件夾做修改）。
?
2019.6.20
1、對(duì)文件進(jìn)行修改時(shí)，對(duì)整體進(jìn)行更新，不然別人進(jìn)行修改，而你沒(méi)有更新就修改就會(huì)報(bào)錯(cuò)。
2、文件引用：<script src="/Scripts/common.js?v=<%=this.Version %>"></script>這個(gè)獲取的是絕對(duì)路徑，文件的引用也是絕對(duì)路徑，不然會(huì)找不到。
3、首頁(yè)模板：<script type="text/javascript" src="/themes/<%=themes %>/Myscripts/common.js?v=<%=Version %>"></script>，模板可以共用一個(gè)頁(yè)面，但每一個(gè)模板的文件名不同，各個(gè)模板的子文件夾名字相同。aspx文件用html文件代替就好。原理：主要是<%=themes%>只判斷是哪個(gè)模板就好，不用再進(jìn)行css、js、html文件名。
?
2019.6.24
廣告位、代碼整合優(yōu)化
1、代碼整合，相同的代碼可以寫(xiě)在同一個(gè)文件夾，方法可以共同調(diào)用，對(duì)于數(shù)據(jù)填充部分，其實(shí)每個(gè)方法都有共同的地方，不同的是填充的數(shù)據(jù)不一樣而已。所以把共同的內(nèi)容封裝在一起，調(diào)用后填充那部分的內(nèi)容自定義就好，方便修改和維護(hù)，就廣告位而言（其他的數(shù)據(jù)填充也應(yīng)該這樣）：
管理系統(tǒng)（添加廣告位模板）—>nc_adsHandle.ashx.cs（從數(shù)據(jù)庫(kù)獲取廣告位的接口，后端）—baseIndex.js（公共方法，調(diào)用接口）—>BBM...MIDEA中的js文件調(diào)用公共方法只需寫(xiě)填充部分的內(nèi)容。不同皮膚的運(yùn)行在index.aspx下的index.aspx.cs中，修改之后記得一整個(gè)項(xiàng)目生成一次，然后獲取阿里服務(wù)端的數(shù)據(jù)加上：?tostore=163。
管理系統(tǒng)（http://admin.dsdxo2o.com/Index.aspx#/UI/extensionCenter/ads_adpos.aspx，平臺(tái)資料>廣告板塊管理，其中編號(hào)就是要調(diào)用的id:ap_id；文案管理>廣告管理）。
2、數(shù)據(jù)庫(kù)的區(qū)別：像在管理系統(tǒng)中添加的廣告位只是在本地?cái)?shù)據(jù)庫(kù)上傳而已，注意本地的一些操作和阿里服務(wù)器上的一些操作是不一樣的。
3、同步和異步
? 同步：A——>B——>C進(jìn)程，A要執(zhí)行到C必須等待B執(zhí)行才能執(zhí)行C，這個(gè)過(guò)程，結(jié)果執(zhí)行到最后一定是上一個(gè)進(jìn)程完成才會(huì)到下一個(gè)；
? 異步：A——>{B、C、E}，可以是A——>B、A——>C、A——>E，可以同時(shí)執(zhí)行，但比如說(shuō)A要完成C還需要A到B結(jié)束才行，那么A——>B這個(gè)過(guò)程就會(huì)有一個(gè)回調(diào)函數(shù)，告訴A，B已經(jīng)完成任務(wù)，這時(shí)A——>C會(huì)又繼續(xù)進(jìn)行直到完成。像MIDEA頁(yè)面中的搜索框，如果數(shù)據(jù)是放在$(function(){})中則是一種同步的方法，必須等待頁(yè)面全都加載完成才能進(jìn)行搜索成功，如果頁(yè)面沒(méi)能完全加載，那搜索是沒(méi)有反應(yīng)的；如果是用異步的形式，數(shù)據(jù)放在function pageInit()中，程序的執(zhí)行不一定要到一個(gè)進(jìn)程的完成才能執(zhí)行，而是可以先執(zhí)行其他的，等到所需的進(jìn)程完成后會(huì)進(jìn)行回調(diào)，告訴主進(jìn)程已完成，比如廣告位的渲染（callback[數(shù)據(jù)填充部分],其實(shí)產(chǎn)品加載也是一樣），這時(shí)候，所需子程序（頁(yè)面渲染，如 產(chǎn)品列表）完成加載后，回調(diào)告訴主進(jìn)程（搜索），這時(shí)搜索結(jié)果在一個(gè)個(gè)顯示，也就是頁(yè)面的渲染完成一個(gè)產(chǎn)品加載后如果該產(chǎn)品是搜索需要的就在頁(yè)面顯示一個(gè)，直到渲染結(jié)束，可以理解為渲染和搜索同步進(jìn)行吧，嗯？！。像微商城首頁(yè)模板，dom的渲染是用腳本添加的。
?
2019.07.03
微商城模板套用
引用一個(gè)網(wǎng)站的素材，改變?cè)瓉?lái)的主機(jī)名，并在后面添加需要套用的模板名字，如：
http://store.dsdxo2o.com/?store_id=3247
http://mstoreview.dsdxo2o.com/?tostore=3247&mcode=MIDEA
store——>mstoreview、store_id——>tostore=3247、添加&mcode=MIDEA
不同的網(wǎng)站的話改變id號(hào)即可
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/L-xjco/p/10834373.html
總結(jié)
以上是生活随笔為你收集整理的learnByWork的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Spring总结之事务
- 下一篇： fiddler抓包实战（5）