<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务学习</title>
<link rel="stylesheet" href="./load2.css" />
</head>
<body>
<div id="contain">
<div id="first">
<nav>
<ul>
<li><a href="#" style="color:white">导航链接一</a></li>
<li><a href="#" style="color:white">导航链接二</a></li>
<li><a href="#" style="color:white">导航链接三</a></li>
<li><a href="#" style="color:white">导航链接四</a></li>
</ul>
</nav>
</div>
<div id="con" style="float: left;margin-bottom: 20px;">
<div class="second">
<article>
<h1>文章一级标</h1>
<h2>文章二级标题</h2>
<h3>文章作者 文章发表时间</h3>
<p> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是<br/>
很长很长的段落，换行<abbr>
这是一个很长很长的段落，这是一个很长很长的段落<a href="http://www.baidu.com">这里有一个链接到http://www.baidu.com</a>这是一个很长很长的段落<br/>
这是一个很长很长的段落.</p>
<img src="./2.gif" alt="猫"/>
<p></p> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这<br/>
很长很长的段,这是一个很长很长的段落，换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落<a href="http://www.baidu.com">这里有一个链接到http://www.baidu.com</a>这是一个很长很长的段落<br/>
这是一个很长很长的段落.</p>
<ul style="padding-left: 35px;">
<li><p>列表一</p></li>
<li><p>列表二</p></li>
<li><p>列表三</p></li>
</ul>
</article>
</div>
<div id="third">
<h2 style="padding-top:30px;padding-left: 20px;"><b >图片</b></h2>
<div class="small">
<figcaption align="center" style="padding-top:15px;">好看的图</figcaption>
<img src="./2.gif" width="120px" height="120px" style="padding:20px 30px 30px 40px " alt=""/ >
</div>
<div class="small">
<figcaption align="center" style="padding-top:15px;">好看的图</figcaption>
<img src="./2.gif" width="120px" height="120px" style="padding:20px 30px 30px 40px ;" alt=""/ >
</div>
<div class="small">
<figcaption align="center" style="padding-top:15px;">好看的图</figcaption>
<img src="./2.gif" width="120px" height="120px" style="padding:20px 30px 30px 40px ;" alt=""/ >
</div>
<div class="small" >
<figcaption align="center" style="padding-top:15px;">好看的图</figcaption>
<img src="./2.gif" width="120px" height="120px" style="padding:20px 30px 30px 40px ;" alt=""/ >
</div>
<div class="small" >
<figcaption align="center" style="padding-top:15px;">好看的图</figcaption>
<img src="./2.gif" width="120px" height="120px" style="padding:20px 30px 30px 40px ;" alt=""/ >
</div>
</div>
<div class="big">
<article style="padding-left: 40px;padding-left: 20px;padding-bottom:20px;">
<h2>最后一篇文章标</h2>
<h3>文章二级标题</h3>
<h3>文章作 文章发表时间</h3>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<table style="border: 1px solid gray;border-collapse: collapse;">
<tr>
<td style="background: black; border: 1px solid gray;color: white" width="400px">表头</td>
<td style="background: black; border: 1px solid gray;color: white" width="400px">表头</td>
<td style="background: black; border: 1px solid gray;color: white" width="200px">表头</td>
</tr>
<tr>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">操作</td>
</tr>
<tr>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">操作</td>
</tr>
<tr>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">操作</td>
</tr>
<tr>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">表格单元内容</td>
<td style="border: 1px solid gray;">操作</td>
</tr>
<tr>
<td style="background: gray; border: 1px solid gray">总计</td>
<td colspan="2" style="background: gray; border: 1px solid gray">1000</td>
</tr>
</table>
</article>
</div>
</div>
<div class="big2">
<h2 style="padding-left: 30px;padding-top: 30px;">欢迎注册</h2>
<article align="center" style="padding-bottom:15px;" >
<form action=" " method="post">
请输入邮箱地址<input type="text" name="email"><br />
<pre style="color: gray;"> 邮箱地址请按要求格式输入</pre>
请输入密码<input type="text" name="password1"><br/>
请重复输入密码<input type="text" name="passWord2"><br/>
<pre style="color: gray;"> 密码请为6-16位英文数字</pre><br />
性别<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" values="female">女<br/>
<label>
城市<select>
<option value="shanghai" selected="selected">上海</option>
<option value="anqing" >安庆</option>
<option value="changshang" >长沙</option>
</select>
</label>
<br/>
爱好 <label><input type="checkbox" name="sport" />艺术</label>
<label><input type="checkbox" name="sport" />运动</label>
<label><input type="checkbox" name="sport" />科学</label>
<br/>
<p>个人描述<textarea name="comtent" cols="40" align="middle";></textarea></p>
<input type="submit" value="确认提交" style="color: white; background: blue;width: 90%;height:30px;border-radius:10px"/>
</form>
</article>
</div>
<footer style="width: 100%;height: 100px;background: black;clear: both;ma" >
<p align="center" style="color: white;padding-top:50px;">版权所有@</p>
</footer>
</div>
</body>
</html>
load2.css:
body{
/*width: 51.58%;
background-image: url("./1.jpg");
background-repeat: repeat-y;*/
}
#contain{
height:100%;
overflow: hidden;
background: gainsboro;
border: 1px solid #999;
}
#first{
width: 100%;
height: 50px;
background: black;
}
article{
padding-left: 20px;
padding-top: 30px;
}
#first li{
float: right;
display: block;
margin-left: 10px;
padding-top: 10px;
}
.second{
margin:20px;
background:white;
border-right: 3px solid gray;
border-bottom: 3px solid gray;
}
.second li{
list-style-type: none;
}
#third{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background: white;
height:100%;
overflow: hidden;
border-bottom: 3px solid gray;
border-right: 3px solid gray;
}
.small{
width: 200px;
height: 200px;
margin: 20px;
float: left;
border: 1px solid gray;
}
.big{
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
background: white;
border-bottom: 3px solid gray;
border-right: 3px solid gray;
clear: both;
}
.big2{
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
background: white;
border-bottom: 3px solid gray;
border-right: 3px solid gray;
float: left;
}
扫一扫
5637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
