ASP.NET學習之旅-01佈局

ASP.NET佈局有三種方式:

  • 服務器控件
  • HTML + CSS
  • 服務器控件 + HTML + CSS

基於以下原因採用HTML+CSS佈局:

  • Winform\Wpf玩過,對控件熟悉,想換口味
  • 服務器控件—應該不能脫離.Net平臺,如果有一天我想用Node.js重複利用以前的頁面呢
  • 如果有一天我想去試着開發Html5小遊戲玩呢
  • 現在的開發爲了熟悉BS,過段時間必然要過渡到ASP.NET MVC
  • 如果熟悉了ASP.NET,回頭使用控件的方式,很易上手
  • -

ASP.NET原理 :

  1. 瀏覽器對HTML頁面操作發出請求到服務器
  2. 服務器對請求進行後臺處理
  3. 服務器響應請求返回新的HTML頁面到瀏覽器

瀏覽器是HTML的翻譯官

  • 流式解析:HTML從上到下來解析
  • 多線程解析:邊請求邊解析邊下載

這裏寫圖片描述


HTML

  • 標籤書寫規範
  • 熟記8種類型標籤及常用標籤
  • 掌握常用標籤的常用屬性

書寫規範:

  • 嚴格配對(即使是空標籤)
  • 嚴格嵌套
  • 小寫
  • 值使用“”
  • 層次分明

8種類型標籤及常用標籤:

  • 文檔結構
    • html
    • head
    • body
  • 文本格式
    • h1-h6
    • title
    • p
    • pre
  • 字符格式
    • b
    • strong
    • i
    • sup
    • sub
  • 列表
    • ul
    • ol
    • li
    • dd
    • dt
  • 超鏈接
    • a
  • 多媒體(拖入)
    • audio
    • embed
  • 表格
    • table
    • caption
    • tr
    • th
    • td
  • 表單
    • form
    • input

標籤常用屬性:

  • name
  • id
  • class

盒子模型


一個Demo佈局後在調試期間Google顯示的樣子
一個Demo佈局後在調試期間360顯示的樣子
一個Demo佈局後在調試期間搜狗顯示的樣子
一個Demo佈局後在本地部署360顯示的樣子

以上是:【調試時Google】 vs 【調試時360】 vs 【調試時搜狗】 vs 【本地部署360】 = 正常 vs 錯亂 vs 錯亂 vs 錯亂嚴重

在手機顯示如圖:
這裏寫圖片描述

☝☝☝☝☝☝☝你沒看錯,上方是在手機上顯示下半部分空白

總結:
1.排版在各個主流瀏覽器顯示不同
2.排版在手機上顯示問題(只顯示了半個屏幕就顯示完了,嚴重啊)
3.醜
4.沒有規範
,,,,,,,佈局沒有規範
,,,,,,,代碼沒有規範
5.怎麼發佈到局域網、外網
補充:聽說用花生殼可以映射發佈到外網還免費,當即下載使用,還遇到了維護…..讓我鬱悶一會
這裏寫圖片描述


解決主流瀏覽器顯示不同問題

看HTML知道有兩種方法:
1.針對IE6,使用hack標籤解決
2.在HTML頭部加DocType規定瀏覽器解析規範

但是這兩種方法都解決不了現在搜狗、360、谷歌的衝突

解決:在CSS中規定常規標籤的初始樣式

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 “宋體,”,tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}
fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
body{ font-size:12px;text-align: center; font-family:微軟雅黑; }


解決如何發佈局域網的問題

雖然我也是靠網上解決的,但是這個網頁抄一點,那個網頁抄一點……

1.VisualStudio上先發布
2.安裝IIS,部署到IIS上
3.防火牆的接入規則等設置


解決醜、佈局規範、代碼規範的問題

醜,額……
當我打開印象筆記的官網時,一下子就驚呆了,簡潔、美觀、大方……,然後開啓F12的寫輪眼模式,詳情下圖


這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述

總結:
寬點佔滿整個屏幕,看起來舒服多了,但是剛剛好是屏幕寬度即可,省的拖拉
借巧力(提交一塊的text和button樣式是摘抄網絡)
……

核心總結:佈局要有基礎知識體系 + 模仿 + 摘抄

對在網絡上奉獻優美素材的人點個贊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章