文档章节

HTML 任务五

jiangger
 jiangger
发布于 2017/03/21 12:08
字数 1230
阅读 4
收藏 0

<!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>文章作者 &nbsp;文章发表时间</h3>
                    <p>&nbsp;&nbsp;这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是<br/>
                    很长很长的段落,换行<abbr>
                    这是一个很长很长的段落,这是一个很长很长的段落<a href="http://www.baidu.com">这里有一个链接到http://www.baidu.com</a>这是一个很长很长的段落<br/>
                    这是一个很长很长的段落.</p>
                    <img src="./2.gif" alt="猫"/>
                    <p></p>&nbsp;&nbsp;这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这<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>文章作&nbsp;文章发表时间</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>
                        &nbsp;&nbsp;请输入密码<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">男 &nbsp;<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;
}

 

© 著作权归作者所有

共有 人打赏支持
上一篇: HTML 开发任务一
下一篇: HTML 任务二
jiangger
粉丝 0
博文 5
码字总数 4184
作品 0
徐汇
私信 提问
sphinx与gearman结合应用

一.说明 本文涉及到sphinx分布式配置,XML数据源,mysql触发器,任务分发系统gearman以及sphinx属性更改。数据依赖之前写的sphinx应用(一),sphinx应用(二),具体请参见: http://www.ttlsa.c...

NorthBoy
2013/08/26
0
3
gulp基于seaJs模块化项目打包实践

一:devDependencies依赖 了解gulp的肯定对npm都有所了解,在这里就不再赘述,直接贴依赖包。 "devDependencies": { "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-clean": "^0.......

jjjyyy66
2017/05/15
0
0
ItextPdf 数字签名,HTML转PDF功能

哼哼,完成这篇,这周的任务算是完成了,上篇文章主要生成了自己的证书与和密码,这篇主要实现数字签名及HTML转成PDF功能。 今天下午把功能基本完成了,常帅走过来说,你知道签名的解签的原理吗?尼...

toolfk
2017/03/22
0
0
[自动化实战]HTTP请求中POST和GET方法的六点区别

HTTP请求中POST和GET方法使用区别 在DevOPS这个工程中,自动化任务从浏览器端采用POST的方式提交任务数据给后端的ansible任务处理api接口,为什么采用POST而不是GET方法呢? 这个得从POST方式...

Jeson老师
2018/01/31
0
0
OpsManage运维管理平台部署(v2.0)

项目源码https://github.com/welliamcao/OpsManage 开发语言与框架: 编程语言:Python2.7 + HTML + JScripts 前端Web框架:Bootstrap 后端Web框架:Django 后端Task框架:Celery + Redis Op...

super李导
2018/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java单例模式学习记录

在项目开发中经常能遇见的设计模式就是单例模式了,而实现的方式最常见的有两种:饿汉和饱汉(懒汉)。由于日常接触较多而研究的不够深入,导致面试的时候被询问到后有点没底,这里记录一下学习...

JerryLin123
昨天
4
0
VSCODE 无法调试

VSCODE 无法调试 可以运行 可能的原因: GCC 的参数忘了加 -g

shzwork
昨天
5
0
理解去中心化 稳定币 DAI

随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器。 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的机制,真的有一点复杂。耐心看完...

Tiny熊
昨天
4
0
5.线程实现

用于线程实现的Python模块 Python线程有时称为轻量级进程,因为线程比进程占用的内存少得多。 线程允许一次执行多个任务。 在Python中,以下两个模块在一个程序中实现线程 - _thread 模块 th...

Eappo_Geng
昨天
7
0
ServiceLoader

创建一个接口文件在resources资源目录下创建META-INF/services文件夹在services文件夹中创建文件,以接口全名命名创建接口实现类 内容me.zzp.ar.d.PostgreSQLDialectme.zzp.ar.d.Hype...

Cobbage
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部