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