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

---

盒子模型

---

以上是：【调试时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样式是摘抄网络）
……

核心总结：布局要有基础知识体系 + 模仿 + 摘抄

对在网络上奉献优美素材的人点个赞