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" %>

<!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>

给出其部分效果图:

C#学习之web网站制作入门篇(ASP.NET)_第1张图片


C#学习之web网站制作入门篇(ASP.NET)_第2张图片










你可能感兴趣的:(C#学习之web网站制作入门篇(ASP.NET))