html+css test1
模拟实验楼提供的一个网页。。
【可由 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的更多相关文章
- 关于前端CSS预处理器Sass的小知识！
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS行高line-height的理解
一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...
- CSS(一)
开始学习css之旅:先照样式做一个 一.使用DIV设置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- (转)颜色渐变CSS
本文转载自:http://www.cnblogs.com/yichengbo/archive/2012/10/27/2742618.html IE系列 filter: progid:DXImageTr ...
- HTML, CSS学习笔记（完整版）
第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...
- 兼容IE与firefox、chrome的css 线性渐变（linear-gradient）
现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF ...
- 【CSS学习笔记】CSS选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
随机推荐
- Delphi中取得汉字的首字母（十分巧妙）
function Tdm.GetHzPy(const AHzStr: string): string;const ChinaCode: array[0..25, 0..1] of Integer = ...
- 海康威视频监控设备Web查看系统（二）：服务器篇
声明:本系列文章只提供交流与学习使用.文章中所有涉及到海康威视设备的SDK均可在海康威视官方网站下载得到.文章中所有除官方SDK意外的代码均可随意使用,任何涉及到海康威视公司利益的非正常使用由使用者自 ...
- YARN分析系列之三 -- 从脚本入口分析 ResourceManager的初始化过程
1. 由脚本找到 RM 主类 这部分,我们从脚本作为入口去逐步深入ResourceManager源码. 从 Hadoop 官方文档 中可以看到 ResourceManager 的启动命令为: Usag ...
- Eclipse远程代码调试
前提:远程服务器上运行的WEB项目class对应的源码与本地项目中必须保持一致 也就是远程tomcat部署的项目就是本机项目打包过去的,而本机项目没有发生变动. 1.配置$tomcat_home/bi ...
- Python自学day-12
一.Mysql概述 RDBMS:关系型数据库管理系统.Mysql是一种RDBMS. Oracle:收费 Mysql:Oracle旗下免费 Sqlserver:微软 DB2:IBM Postgresql ...
- MyBatis 源码分析
MyBatis 运行过程 传统的 JDBC 编程查询数据库的代码和过程总结. 加载驱动. 创建连接,Connection 对象. 根据 Connection 创建 Statement 或者 Prepa ...
- Scala 学习之路（九）—— 继承和特质
一.继承 1.1 Scala中的继承结构 Scala中继承关系如下图: Any是整个继承关系的根节点: AnyRef包含Scala Classes和Java Classes,等价于Java中的java ...
- php __autoload 在有命名空间的时候失效(使用的局限性)
如果要使用__autoload方法,则不能再之前使用namespace, 使用命名空间,则至少php5.3不再调用__autoload方法 因此如果需要使用__autoload和命名空间, ...
- linux下svn安装
1.环境centos6.4 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svnserve -d -r /www/sv ...
- ES5_04_Array扩展
介绍什么是Array对象? # Array 对象用于在单个的变量中存储多个值 1. 创建 Array 对象的语法: 2. Array 对象属性 3. Array 对象方法 补充: 1. Array.p ...