HTML/CSS测试代码二

来源：互联网发布：火影人物实力排名知乎编辑：程序博客网时间：2024/05/17 03:58
进一步补充基础知识，完善整个体系。学无止境！
<%@ 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;           border:10px dashed purple;        }        .main        {            background:blue;        }        .lside        {                        width:700px;            height:600px;                        background:pink;            float:left;             }        .four        {            width:330px;            height:280px;            margin:10px;            background:black;            float:left;        }         .rside        {                     width:300px;            height:600px;                                 background:red;            float:right;             }        .font        {                                 background:yellow;            height:200px;            clear:left;                    }</style> </head><body background="5.jpg">    <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"> <center><h1>  绝世无双  </h1>  </center>   </div>            <div class="main">               <div class="lside">                   <div class="four">   </div>                   <div class="four">   </div>                   <div class="four">   </div>                   <div class="four">   </div>               </div>               <div class="rside">                </div>            </div>            <div class="font">   <center><h1>  止戈为武  </h1>  </center>   </div>        </div><br/><br/></body></html>
部分效果图如下：
这里写图片描述
这里写图片描述
参考链接：
HTML/CSS网页开发视频教程(http://edu.csdn.net/course/detail/535/6511?auto_start=1)
HTML教程：(http://w3school.com.cn/html/index.asp)
CSS教程：(http://w3school.com.cn/css/index.asp)
JavaScript教程：(http://w3school.com.cn/js/index.asp)
JQuery教程：(http://w3school.com.cn/jquery/index.asp)
SQL基础教程：(http://w3school.com.cn/sql/index.asp)
ASP.NET教程：(http://w3school.com.cn/aspnet/index.asp)
ASP.NET企业级开发基础视频：(http://edu.csdn.net/course/detail/829/11358?auto_start=1)
0 0