C#学习之web网站制作入门篇（ASP.NET）

之前熟悉C#与.net, 以为.net就是C#，现在知道了.NET是C#的开发平台，C#即可用来开发客户端（WindowsFrom），也可以用来开发网站即ASP.NET;
通过学习ASP.NET企业级开发http://edu.csdn.net/course/detail/829/11355?auto_start=1 ;

知道后面的路还很遥远，不过信心大增，因为之前的积累，再来学习这个很容易上手，开发起来也很快。加油！

首先解决一个思维误区：

C/S（Client/Server）结构，即大家熟知的客户机和服务器结构，在特定的应用中无论是Client端还是Server端都需要特定的软件支持。一般就是那种需要下载不同版本的安装包，在PC机安装，比如：QQ，360安全卫士等。

B/S（Browser/Server）结构：即浏览器和服务器结构，在这种结构下，用户工作界面是通过www浏览器来实现，极少部分事物逻辑在前端实现，主要事物逻辑在服务器端实现，比如我们的网站，网络办公等。

要用C#开发网站，首先得学好HTML/CSS，下面是我一天的学习成果，是在.NET平台上实现的网页设计，给出其代码：

<%@ Page Language=“C#” AutoEventWireup=“true” CodeBehind=“Login.aspx.cs” Inherits=“MyFirstWeb.Login” %>

欢迎进入我的地盘!

        <h1 align="center"><i>我是歌手今晚7进5战火重燃!</i></h1>
  
        <asp:Image ID="Image1" runat="server" Height="300px"
             ImageUrl="~/image1/t0135a6f7b5b41e2d73.jpg" Width="500px" ImageAlign="Right" />
        <br/>  
        <br/>  
        <font size="4"><center><u>www.huanantv.com|2016-04-09|来源：深圳晚报</u></center></font>  
        <br/>  
    
        <p>本报讯（记者王纯）今晚20:30，“2016我是歌手”长沙唱区战火重燃，7名选手将争夺5个入围名额，湖南卫视现场直播。</p>  
        <p>导演廖珂介绍，收集了热心观众的意见后，本场比赛将对赛制做出细微调整，选手去留的决定权将重新由短信，专业评委，大众评审和选手“四方面制衡”，让比赛更具有悬念和看点。</p>  
        <p>7强晋级赛备选曲目</p>  
        <p>01号张美娜：《country road take me home》、《干杯朋友》</p>  
        <p>03号张亚飞：《onlyone》、《close to you》</p>  

        <br/>  
        <br/> 

        <h1>一个嵌套列表：</h1> 

          <ul type="disc">  
                <li>咖啡</li>  
                <li>茶</li>  
                    <ul type="circle">  
                        <li>红茶</li>  
                        <li>绿茶</li>  
                            <ul type="square">  
                            <li>中国茶</li>  
                            <li>非洲茶</li>  
                            </ul>  
                    </ul>  
          </ul>  
          <ul type="disc">  
                <li>牛奶</li>  
          </ul> 


    <h3>水平导航：</h3>  

        <ul class="my1">  
            <li class="li1">首页 </li>  
            <li class="li1">- 新闻 </li>  
            <li class="li1">- 体育 </li>  
            <li class="li1">- 娱乐圈 </li>  
            <li class="li1">- 财经 </li>  
            <li class="li1">- IT </li>  
            <li class="li1">- 汽车 </li>  
            <li class="li1">- 房产 </li>  
            <li class="li1">- 家居 </li>  
            <li class="li1">- 女人 </li>  
            <li class="li1">- 短信 </li>  
            <li class="li1">- 邮件 </li>  
        </ul>


    <br/> 


    <h3>垂直导航：</h3> 

        <ul class="my1">  
             <li>公司简介</li>  
            <li>组织机构</li>  
            <li>荣誉称号</li>  
            <li>联系我们</li>  
        </ul> 

    <br/>
    <br/>  

      <marquee behavior="scroll" direction="right" scrolldelay="0" >     
      <img src="1.jpg"  height="300" width="400">  
      <img src="2.jpg"  height="300" width="400">  
      <img src="3.jpg"  height="300" width="400">  
      </marquee>       
</div>

        <br/>  
        <br/> 
        <br/>  
 
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="确定登录" />


        <br/>  
        <br/> 
        <br/>  
</form>

            <table class="style28">
                <tr>           
                    <td class="style29">
                    <marquee behavior="scroll" direction="right" scrolldelay="10"> 
                        生命不息，奋斗不止
                    </marquee>     
                            </td> 
                    <td class="style30">
                        love</td>
                    <td>
                        go</td>
                    <td>
                        功</td>
                    <td>
                        绝</td>
                </tr>
                <tr>
                    <td class="style29">
                        决不妥协，永不放弃</td>
                    <td class="style30">
                        life</td>
                    <td>
                        go</td>
                    <td>
                        不</td>
                    <td>
                        世</td>
                </tr>
                <tr>
                    <td class="style29">
                        会当凌绝顶，一览众山小</td>
                    <td class="style30">
                        live</td>
                    <td>
                        go</td>
                    <td>
                        可</td>
                    <td>
                        无</td>
                </tr>
                <tr>
                    <td class="style29">
                        我自岿然不动</td>
                    <td class="style30">
                        alive</td>
                    <td>
                        go</td>
                    <td>
                        没</td>
                    <td>
                        双</td>
                </tr>
            </table>

    <div class="header1">      </div>
    <div class="header2">      </div>
    <div class="header3">      </div>
    <div class="header4">      </div>

    <div class="container">
        <div class="header">      </div>
        <div class="main">
           <div class="lside">     </div>
           <div class="rside">     </div>   
        </div>
        <div class="font">       </div>
    </div>

给出其部分效果图：
————————————————
版权声明：本文为CSDN博主「chongshangyunxiao321」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chongshangyunxiao321/article/details/51103384