C#學習之web網站製作入門篇(ASP.NET)

來源:互聯網
上載者:User

  之前熟悉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" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>武神趙子龍</title><style type="text/css">              .my1        {              list-style-type:none          }          .li1        {                   float:left          }             .style28        {            width: 100%;            border: 2px solid #0000FF;         }         .style29        {            width: 256px;        }            .style30        {            width: 257px;        }            .header1        {   height:100px;            background:blue;                    }        .header2        {   height:100px;            width:666px;            background:green;             float:left;          }        .header3        {   height:100px;            width:667px;            background:red;             float:left;           }        .header4        {   height:100px;            background:yellow;             clear:left;          }                .container        {           width:1000px;            background:gray;        }                .header        {           height:200px;           background:orange;              }                .main        {            background:blue;        }                .lside        {                        width:700px;            height:600px;                        background:pink;            float:left;             }                 .rside        {                     width:300px;            height:600px;                                 background:red;            float:right;             }                .font        {                                   background:yellow;            height:200px;            clear:left;                    }  </style> </head><body>    <form id="form1" runat="server">    <div>            <h2>歡迎進入我的地盤!</h2>            <br/>                  <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" onclick="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><br/><br/>        <div class="header1">      </div>        <div class="header2">      </div>        <div class="header3">      </div>        <div class="header4">      </div><br/><br/>        <div class="container">            <div class="header">      </div>            <div class="main">               <div class="lside">     </div>               <div class="rside">     </div>               </div>            <div class="font">       </div>        </div><br/><br/></body></html>

給出其部分效果圖:













聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.