dedecms 文章分頁，這玩意有誰開發過實戰項目嗎？

響應WEB概念在移動互聯網興起的初期，的確很火，它主要解決原PC網站樣式向移動端過渡的問題，以一套前端代碼適配PC、手機和其他顯示設備，以較小的代價實現網站產品的多維呈現。

我個人作為勉強的全棧，曾經選用過最熱的Bootstrap前端框架，開發過一些web應用。雖然后來，隨著移動端越來越成為重點實現方向，感到響應式網站設計，并不能為移動網站帶來優良的體驗和高開發效率，至少在我近幾年的項目中，面向移動端，已經完全放棄了響應式開發方法，采用了更純粹的移動前端框架，以適應不僅是web，還有APP、小程序的前端需求。

但是，并不能說響應式web設計落伍了，沒用了。根據項目特點，人員技術力量，選用最適合的方法，做最優秀的實現，是開發的實踐準則。

下面，圍繞實戰開發響應web的大致方法、流行的框架工具介紹、響應式的優缺點總結，展開一些敘述和討論。

什么是響應式網站設計？

響應式網頁設計 Responsive Web Design，從開發角度上講，就是使網頁能通過識別屏幕寬度、做出相應調整的網頁設計，它面向的設備是超寬屏幕、pc顯示器、平板電腦、手機。這里面大家很容易忽視超寬屏幕的設計，因為很多開發者為了簡化設計，往往在針對超寬屏幕只做居中處理。

實現原理

通過css樣式語言，有時候也會結合一些javascript，考量屏幕寬度，自動調整網頁顯示和布局，以適應不同尺寸屏幕的瀏覽優化體驗。

實現目標

最好的響應式設計，就是設計者開發出一套全端網頁，為電腦、手機、平板等不同終端的用戶提供更加舒適的界面和更好的交互體驗，比如手機端的觸摸和PC端鼠標操作效果。而且隨著目前大屏幕移動設備的普及，響應式開發方法還是有自己獨特的優勢。

響應式網站開發方法

布局

在構建響應式網站或改造舊網站成為響應式結構時，首先要考慮的就是布局。

主要是兩部分頁面元素：

延展全屏寬的元素，比如我們在PC貫穿全屏寬的元素，css: width:100%；

主內容塊的最大寬度定義，以下定義了4種常見分辨率的容器最大寬度；

@media (min-width: 576px) {

.container { max-width: 540px; }

}

@media (min-width: 768px) {

.container { max-width: 720px; }

}

@media (min-width: 992px) {

.container { max-width: 960px; }

}

@media (min-width: 1200px) {

.container { max-width: 1140px; }

}

媒體元素寬度定義

下面的CSS代碼將確保圖片永遠不會比其父容器大：

img { max-width: 100%; height: auto; }

或者根據設備的分辨率不同，需要顯示不同size的圖片:

<img src=" image.jpg" alt="" data-src-600px=" image-600px.jpg" data-src-800px =" image-800px.jpg" />

這種彈性顯示媒體的方式，需要借助CSS或JS的方式實現。

版式（Typography）定義

這是響應式設計中最重要的部分，有很多響應式設計的排版方式需要注意，比如：

CSS3規范中包含了一個定義尺寸的元素rem。它的工作原理與em幾乎相同，但是rem的大小相對于html元素而言，這使得rem比em更容易使用。

html { font-size:100%; }

通過以下CSS代碼可以定義不同分辨率下的相對字體大小。

@media (min-width: 640px) { body {font-size:1rem;} }

@media (min-width:960px) { body {font-size:1.2rem;} }

@media (min-width:1100px) { body {font-size:1.5rem;} }

最流行的響應式框架

使用前端框架可以提高前端開發的效率。通常框架已經為開發者搭好了腳手架，只需要在上面累加我們的特殊需求就可以了，這幫助碼農減少編碼工作量，并節省了寶貴的時間。

當前有各種各樣的響應框架可用，并且新仍在不停的進化更新。在眾多選擇中，選擇適合的框架是很困難的。下面列舉了幾個最流行的響應框架。

Bootstrap

Bootstrap是國內最流行、最快速、最友好的框架。這個框架是2011年由Twitter的開發者創建的。目前，整個網絡上有數百萬的網站都在運行這個神奇的框架。在GitHub他的追捧數量已經超過了100多K。

Bootstrap包括了HTML、CSS和JavaScript。你可以輕松地開發各種規模和復雜度的響應式網站。

Foundation

Foundation是一個企業級的前端框架。FaceBook、eBay、Mozilla、Adobe、HP、思科、迪士尼等都在他們的網站上使用這個框架。

它相當復雜，不適合新手使用。Foundation具有可讀性、靈活性、語義性和完全可定制性。Foundation自帶GPU加速功能，可實現閃電般的快速和流暢的動畫效果。它提供了Fastclick.js，可在移動設備上快速渲染。

Pure

非常輕的一個框架。該框架包含響應式CSS模塊，是為迎合移動市場而開發的。開發人員可以使用各種樣式、CSS模塊以及組件和可定制的工具來開發網站。

Semantic UI

SemanticUI是相對較新的框架，但它在很多方面都很突出。它已經成為非常流行的前端框架之一。它使用的是自然語言。

Semantic的性能記錄功能讓你可以追蹤到代碼的瓶頸，而無需深挖堆棧痕跡。使用Semantic，直觀的底層之上可以配備一個高級主題變量，讓您有充分的設計自由度。

Semantic UI集成了大量的第三方庫。因此整個開發過程會更容易一些。

響應設計的優點

響應式方式可以在臺式機，平板電腦或智能手機上構建流暢運行的web樣式設計 。它的實質是一種適配性的編碼設計，它具備很多優點：

開發維護一套前端響應式代碼，可以適配多種顯示設備。只需要擁有一個入口網址，無須通過腳本，判斷瀏覽設備而重定向訪問，更不需要配置二級域名。簡化SEO（搜索引擎優化），響應式設計，無需為移動版本創建特定的內容，這對SEO友好的。搜索引擎收錄的只是內容，而對網頁語言代碼毫無興趣。因此，谷歌百度在一段時期還建議優先考慮響應式設計。有可能會節約開發成本？這一點我自己也很有疑惑，我個人認為如果是僅僅適配顯示的話，響應式設計的確可以節約成本，但精致的移動端交互設計，還是純移動框架最受用。簡化網站推廣數據分析，無論來自什么入口，都一網打盡所有訪問數據。響應設計的缺點

盡管響應式設計有很多優點，那么缺點應該被忽略嗎？事實并非如此。響應式網頁設計有一些需要注意的缺點。為了在一套體系框架下，去做各分辨率下的大小顯示適配、內容取舍，那種煎熬你體驗過嗎？

某些響應式網站的加載時間會更長。因為將加載一些不必要的HTML / CSS。例如，很多響應站點上的圖像只是在視覺上按比例縮小，而沒有采用媒體內容的彈性加載策略。

耗時的開發。對于響應式網站而言，這是一項耗時的任務。如果您打算將現有網站轉換為響應式網站，則可能需要更多時間。

響應式Web設計的流體布局，使設計人員難以很好地控制設計風格。設計人員正在嘗試分別針對移動和桌面布局顯示線框和設計原型。只有改進了這兩種布局，才能真正實現響應式Web設計策略。

UX（用戶體驗）不佳。通過響應設計，您想要同時滿足臺式機和移動用戶的需求。但是，移動設備和臺式機畢竟是完全不同的用戶體驗。因此，有很大風險可能同時失去兩類用戶。需要承受內容的取舍。排版的需要、推廣策略的不同、體驗的差異，造成移動版本的內容很可能與桌面版本的內容不一致。因此，采用響應式設計不可能使您的內容適應這些設備中的每一個，那么在一個頁面里用技術實現這種取舍，是很痛苦的。寫在最后

選擇了開發，終會有學不動的那天，對于前端、后端、運維、全棧，都是一樣。某項技術熟練了，我們總希望它的生命周期長一點。如果有一天，對新技術的那種興奮感不再有的時候，做一個方向的了解者規劃者也是不錯的。

希望所有Coder身體健康，永遠快樂。

調用的欄目怎么加nofollwo沒有超鏈接欄目連接都是調用過來的？

欄目設置里有個交叉欄目的設置，添加上你要調用的欄目id就可以了，這樣你這個欄目列表里就可以直接調用你要第哦啊月的欄目文章，并分頁了請保留dedecms版權信息

怎樣去搭建自己的獨立站？

我是做的Shopify，所以我就給你寫一篇shopify建站的教程吧！

要是覺得晦澀難懂可以找我要詳細的PPT

本篇內容

?Shopify注冊注意事項

?Shopify建站流程

?Shopify綁定付款信用卡繳納月租

Shopify注冊注意事項

注冊賬戶的時候 建議做到以下幾點：

?注冊Shopify之前關閉一切梯子工具

?使用Gmail、Outlook或企業郵箱注冊

?使用真實有效的地址注冊Shopify

?繳納Shopify月租前關閉梯子工具

?切換到 Shopify 支持的互聯網瀏覽器

Chrome（谷歌瀏覽器），Firefox（火狐瀏覽器），Opera或Edge

【建議遵守以上事項，降低封號風險】

如果你擔心賬戶剛剛注冊下來就被封掉，那可以繼續跟著下面的Shopify注冊教程完成你賬戶的注冊

Shopify建站流程

Part.1

關閉梯子工具，打開Shopify賬戶的注冊頁面

在頁面正中間文本框“Enter your email address”的地方輸入你的郵箱地址。（切記使用Gmail、Outlook或企業郵箱，而不是QQ郵箱或者163郵箱）

然后點擊 Start free trail開始免費試用頁面就會自動跳轉注冊頁面。

郵件地址已經幫你自動填寫好，繼續操作的是輸入你的賬戶密碼-Password和你的商店名-Your Store Name。（注意電腦鍵盤是否啟用了大寫鎖定功能，防止輸入錯誤。）

如果出現下圖的紅色提示，表示商店名已經被注冊過，換個商店名即可。

商店名只用來登錄賬戶，可以選一個簡單好記的就可以了。

Shopify會依據你提交的商店名幫你生成一個免費的二級域名，用于賬號后臺的登陸操作。比方說我這邊提交的商店名是“zorasun”，那么Shopify給我分配的免費二級域名就是“zorasun”。

我的Shopify后臺登陸地址便是“zorasun

賬號注冊成功之后，你可以在后臺隨時隨意修改店鋪首頁中的商店名。但是你的網站的免費二級域名一旦注冊就無法修改了。

不過請放心，二級域名僅限于操作網站后臺的時候用，不會對你后期開展業務產生任何影響。后面我們會購買類似“b2c.com”這樣的頂級域名綁定到我們的Shopify賬戶上，客戶就只會看到頂級域名了。

Part.2

點擊創建您的商店-Create Your Store

頁面就開始刷新，等待10秒左右會展示上圖彈窗，這里是要你提交一些業務現狀信息，可以直接點擊右下角的跳過-Skip內容填寫。

當然，你也可以按照你的實際情況將相關信息提交給Shopify。內容意思是你現在有沒有在線銷售業務，有的話在哪里？Ebay還是Amazon還是BigCommerce，你的銷售額大概什么水平等等。

填寫完成之后點擊下一步-Next，就會跳轉到下一個頁面：添加地址-Add an address so you can get paid

填寫真實的地址信息。

·姓名中英文都可以；

·地址也一樣，看你自己的心情；

·手機號碼不用加0086/86；

·Business or personal website選填，不用填寫。

Part.3

點擊Enter my store，就會打開上圖頁面，這個就是你的Shopify后臺了，恭喜你，你的Shopify賬戶已經完成50%的注冊工作。

在瀏覽器地址欄里面，我的Shopify后臺地址就是

"zorasun.myshopify.com/admin"。

我們可以點擊瀏覽器收藏，保存到收藏夾，方便以后登陸Shopify網站后臺。

同時你的注冊郵箱會收到Shopify給你發送的一封驗證郵箱地址的郵件，如上圖。

打開你的郵箱，找到郵件，點擊確認郵箱-Comfirm email，完成郵箱驗證。

這樣就可以正常使用Shopify后臺了。

Part.4

重新進入Shopify后臺界面，現在已經更新有簡體中文版本，可以點擊更換語言-change language，進入界面。

找到語言-Language，點擊右側的小三角就可以選擇語言，之后點擊右上角保存-Save。

再次返回后臺界面進行刷新，后臺就改為方便進行操作的中文模式，同樣也支持繁體，日語等語言。

Shopify綁定信用卡繳納月租

推薦賬戶注冊成功之后，就立即提交你的信用卡信息或者綁定你的PayPal賬戶來繳納月租的。

因為如果后期綁定信用卡的時候不小心使用了梯子工具 ，會可能導致Shopify系統封禁你的賬戶。

Part.1

點擊選擇一個套餐并點擊進入。

打開新的頁面，會羅列出月租計劃供你選擇。我們一般做獨立站只看上面的3個就可以。

對于大部分新賣家來講。初期選擇29美金每個月的月租計劃就可以，后期可以隨著你的銷售額的增長隨時調整月租計劃，所以這里我們直接選擇29美金的月租計劃。

Part.2

點擊選擇此套餐，打開的頁面如上圖。

賬單周期可以選擇按月付費還是按年付費。按年付費可以幫你節省36美金，一次性付費越多，省的錢也就越多，這個看你自己的選擇。

付款方式可以選擇使用信用卡/Pypal，點擊信用卡下方的添加信用卡，在彈出窗口中輸入你的信用卡信息。

信息填寫完畢之后點擊右下角確認，提交信用卡信息，這樣就已經綁定成功了。

Part.3

點擊右側開啟套餐，就完成繳納月租的流程了。

Shopify給每個新賣家賬戶都提供了14天的免費試用期。也就是說，我們今天繳納了月租，Shopify會等到14天試用結束之后，才會開始扣費。試用期期間可以隨時關閉賬戶，賬戶關閉后就不會從信用卡扣除費用了。

這樣整體的流程就已經完成了，恭喜你成功加入到Shopify賣家的行列了！