模拟实验楼提供的一个网页。。

【可由 git clone https://github.com/shiyanlou/finaltest 获取相关图片素材】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST1</title>
</head>
<style>
#countainer{width: 1300px;}
#header{height: 130px;background-color: #2f4f4f;font-size: 16px}
#paragraph{height: 550px;background-color: lightseagreen;text-align:center;font-size: 30px}
#left{height:350px;width:310px;float: left;}
#center1{height:350px;width:340px;float: left;}
#center2{height:350px;width:310px;float: left;}
#right{height: 350px;width: 340px;float: left;}
#footer1 {background-color: powderblue;height: 600px;clear:both;text-align:center;}
#footer2 {background-color: lightslategrey;height: 100px;clear:both;text-align:center;}
</style>
<body>
<div id="countainer">
<div id="header">
<br/>
<h1 style="color: aliceblue;text-align: center">Ruohua 3kou</h1>
<a href="#con"style="float: left;color: lightgray">Contact me</a>
</div>

<div id="paragraph">
<br/>
<p>
<img src="profile.png">
<br/>
<h1 style="color: aliceblue">we are engineers</h1>
<p style="color: aliceblue">we are young</p>
</p>
</div>

<div id="left" align="center">
<h1 style="color:lightslategray">Working</h1>
<img src="cabin.png" height="260" width="300">
</div>

<div id="center1" align="center">
<h1 style="color:lightslategray">Eating</h1>
<img src="cake.png" height="260" width="300">
</div>

<div id="center2" align="center">
<h1 style="color:lightslategray">Playing</h1>
<img src="game.png" height="260" width="300">
</div>

<div id="right" align="center">
<h1 style="color:lightslategray">Sleeping</h1>
<img src="circus.png" height="260" width="300">
</div>

<div id="footer1">
<a name="con">
<br>
<h1 style="color: lightslategray;">let's learn with me
<br>
good good study, day day up
</h1>
</a>
<div style="background-color: orange; height: 450px;width: 400px;margin: 0 auto">
<img src="user.png" style="text-align: center">
<br /><br />
<form action="MAILTO:1101811211@qq.com" method="post" enctype="text/plain">
<h3>Send email to me </h3><br>
your name:<br>
<input type="text" name="name" value="yourname" size="20"><br>
your email:<br>
<input type="text" name="email" value="youremail" size="20"><br>
What you wanna say:<br>
<input type="text" name="comment"size="20"><br><br>
<input type="submit" value="send">
<input type="reset" value="rewrite">
</form>
</div>
</div>
<div id="footer2" align="center">
</div>
</div>
</body>
</html>

html+css test1的更多相关文章

  1. 关于前端CSS预处理器Sass的小知识！

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  2. CSS行高line-height的理解

    一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...

  3. CSS(一)

    开始学习css之旅:先照样式做一个 一.使用DIV设置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  4. (转)颜色渐变CSS

    本文转载自:http://www.cnblogs.com/yichengbo/archive/2012/10/27/2742618.html IE系列 filter: progid:DXImageTr ...

  5. HTML, CSS学习笔记（完整版）

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  6. 兼容IE与firefox、chrome的css 线性渐变（linear-gradient）

    现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF ...

  7. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  9. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

随机推荐

  1. VS 查看是否有内存泄露的方法

    加入下列宏定义: #ifdef _DEBUG #define DEBUG_CLIENTBLOCK new( _CLIENT_BLOCK, __FILE__, __LINE__) #else #defi ...

  2. 创建服务消费者(Feign)

    概述 Feign 是一个声明式的伪 Http 客户端,它使得写 Http 客户端变得更简单.使用 Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用 Feign 注解和 JAX-RS ...

  3. Python之二叉树Binarytree

    二叉树是树的简化版,除根节点之外的所有节点都有一个父节点,任意节点都可以最多有一个左子节点和右子节点. 二叉树的遍历是非常重要的算法,主要分为深度优先遍历和广度优先遍历. 其中深度优先遍历按照访问根节 ...

  4. Python连载8-datetime包函数介绍

    一.datetime包(上接连载7内容) 1.函数:datetime (1)用法:输入一个日期,来返回一个datetime类​ (2)格式:datetime.datetime(年,月,日,hour=, ...

  5. pytorch实现yolov3(2) 配置文件解析及各layer生成

    配置文件 配置文件yolov3.cfg定义了网络的结构 .... [convolutional] batch_normalize=1 filters=64 size=3 stride=2 pad=1 ...

  6. 用JavaScript刷LeetCode的正确姿势

    虽然很多人都觉得前端算法弱,但其实 JavaScript 也可以刷题啊!最近两个月断断续续刷完了 leetcode 前 200 的 middle + hard ,总结了一些刷题常用的模板代码.走过路过 ...

  7. ABP开发框架前后端开发系列---（5）Web API调用类在Winform项目中的使用

    在前面几篇随笔介绍了我对ABP框架的改造,包括对ABP总体的介绍,以及对各个业务分层的简化,Web API 客户端封装层的设计,使得我们基于ABP框架的整体方案越来越清晰化, 也越来越接近实际的项目开 ...

  8. web页面的时间传入servlet如何转换为可以存入MySQL的Date类型

    在web页面中当使用如下语句: <input type="date" name="startTime"/> 提交到servlet中 在servlet ...

  9. Django 你需要掌握的模型层（标签、过滤器、模板的继承与导入）

    Django 模型层(标签.过滤器.模板的继承与导入) 好文章来自超哥:https://www.cnblogs.com/guanchao/p/11006062.html   过滤器/自定义过滤器 模板 ...

  10. tar命令压缩和解压

    https://www.cnblogs.com/jyaray/archive/2011/04/30/2033362.html tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向 ...