您的位置：首页 > Web前端 > CSS

HTML/CSS测试代码二

2016-04-11 14:09 495 查看
进一步补充基础知识，完善整个体系。学无止境！

<%@ 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)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 测试 xhtml
相关文章推荐
新的分享
章节导航