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用到的频率极高,指一行文字的 ...
随机推荐
- C#调用Delphi Dll返回字符串的示例（使用Move才能拷贝字符串）
//----------------------Delphi------------------- procedure GetSqlData(ASource: PChar; ADest: PChar; ...
- acl_cpp 的编译与使用
注:因为现在 acl_cpp 已经合并进 acl 项目中,本文仅是介绍了老版本的 acl_cpp 的编译过程,新版本的介绍及编译请参考:acl 框架库简介. acl_cpp 是基于 acl 为基础开发 ...
- 对Qt for Android的评价（很全面，基本已经没有问题了），可以重用QT积累20年的RTL是好事，QML效率是HTML5的5倍
现在Qt不要光看跨平台了,Qt也有能力和原生应用进行较量的.可以直接去Qt官网查看他和那些厂商合作.关于和Java的比较,框架和Java进行比较似乎不且实际.如果是C++和Java比较,网上有很多文章 ...
- web的seo
摘要:搜索引擎优化是一种具有很高技术性的活动,也是一种营销功能,必须将它作为营销活动处理.SEO从业者必须理解公司的服务.产品.总体业务战略.竞争形势.品牌.未来网站开发目标和相关的业务构成. SEO ...
- hive表批处理
对hive中的表进行批量处理,如下是一个简单的脚本 #给定一个hive数据库名,生成它的所有表的create SQL语句,并导出到文件 create_fun(){ hive -e } #显示一个表中所 ...
- 利用GitLab自动同步软件仓库
利用GitLab自动同步GitHub.Gitee.Bitbucket软件仓库 我在码云的账号:userName密码:password项目地址:https://gitee.com/Bytom/bytom ...
- 一线Python运维开发带你秒懂Flask框架
相信曾经纠结过这个问题:怎样才能彻底掌握flask? Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . ...
- Spring Boot：整合Swagger文档
综合概述 spring-boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于 ...
- 【转】Linux下添加FTP账号和服务器、增加密码和用户，更改FTP目录
转自:http://blog.csdn.net/cloudday/article/details/8640234 1. 启动VSFTP服务器 A:cenos下运行:yum install vs ...
- mount -o remount,rw /命令什么意思
1.关于如何改变linux中,对只有Read-only filesystem的文件,如何改为为可写.可读权限? I.可以执行 mount -o remount,rw /II.执行完毕后,会出现以下字样 ...