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用到的频率极高,指一行文字的 ...
随机推荐
- jQuery.media.js的使用方法
该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等,前提 ...
- 如何在 Xcode 中进行 Qt 开发（可使用使用 Homebrew 来安装qt）
第一步 安装 Qt 分为两种情况: 1. 希望使用 Qt Quick 等先进Qt5技术, 2. 只需要 Qt 4.8的类库即可. 第一种, 直接去官网下载 Mac安装包, 在此不作过多说明, 开发时也 ...
- 设置Windows服务的访问权限
作者:beyond 默认情况下,只有管理员组成员.LocalSystem和Power Users组成员帐户才有权启动.停止服务.为了让普通用户也可以控制该服务,我们可以手动设置其访问权限.可能有些初学 ...
- 如何打造VUCA时代的敏捷型组织？
王明兰 --原华为.微软创新与转型教练.华为云SaaS产品总监,著名精益&敏捷转型专家 VUCA最早来源于冷战时期,在现代世界意指商业世界越来越不确定性,越来越易变,越来越不可预测,我们已经进 ...
- 【转】子弹短信内部技术分享：Redis
原理 Redis 是一个内存型「数据库」,除存储之外,它还有许多强大的命令,使之远远超出了数据库的定义,所以官方称之为「data structure store」,数据结构存储系统. 通过 Redis ...
- 视频直播技术之iOS端推流
随着网络基础建设的发展和资费的下降,在这个内容消费升级的时代,文字.图片无法满足人们对视觉的需求,因此视频直播应运而生.承载了实时性Real-Time和交互性的直播云服务是直播覆盖各行各业的新动力.网 ...
- 针对Linux 文件完整性监控的实现
针对Linux 文件完整性监控的实现 摘要 计算机和互联网是20世纪以来最伟大的发明之一,随着计算机技术的不断发展,人们的生活方式发生了巨大的变化.计算机和互联网的发展给人们的生产生活带来了极大的便利 ...
- Appium+python自动化（十三）- 与Capability完美懈垢之解读（超详解）
简介 Capability又叫Appium Desired Capabilities,前边写了那么多实例代码,小伙伴可以发现一些规律,就是有一部分代码总是重复的出现在你的视线中.这部分就是对Capab ...
- Ruby字符串(1)：String基本用法
String字符串 字符串由String类提供,除了直接使用单双引号或其它字面量创建字符串,也可以使用String.new()方法来创建. a = "hello" b = Stri ...
- MagicBook屏幕频闪解决方案（Windows、MacOS）
对于已经看到这篇文章的小伙伴们,就不解释何为PWM调光频闪了. MagicBook笔记本性价比高,但屏幕素质确实很一般,我们人眼看不出来的频闪,实际对眼睛损害很大,如图(需要设置快门参数,如1/400 ...