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++的类型转换：static_cast、dynamic_cast、reinterpret_cast和const_cast（dynamic_cast还支持交叉转换，const_cast将一个类的const、volatile以及__unaligned属性去掉）
在C++中,存在类型转换,通常意味着存在缺陷(并非绝对).所以,对于类型转换,有如下几个原则:(1)尽量避免类型转换,包括隐式的类型转换(2)如果需要类型转换,尽量使用显式的类型转换,在编译期间转换( ...
- C++中代理类和句柄类
指针是 C 与其他语言区别的重要特征之一,在 C++ 中,指针也被广泛运用,我们通过指针实现多态.然而,众所周知,指针的使用必须小心,否则很容易造成内存泄漏 Memory Leak.当我们有几个指针指 ...
- 【Linux】Linux下跟踪记录每个用户对主机服务器进行的操作
linux中跟踪每个用户对主机的操作,看有人之前已经写过如此shell,可直接参考,参考如下: 1.记录操作信息 这个脚本需添加至/etc/profile 脚本如下: history USER_IP= ...
- 第四章 自定义sol合约转化java代码，并实现调用
鉴于笔者以前各大博客教程都有很多人提问,早期建立一个技术交流群,里面技术体系可能比较杂,想了解相关区块链开发,技术提问,请加QQ群:538327407 准备工作 1.官方参考说明文档 https:/ ...
- 高并发 Nginx+Lua OpenResty系列（2）——Nginx Lua API
Nginx Lua API 和一般的Web Server类似,我们需要接收请求.处理并输出响应.而对于请求我们需要获取如请求参数.请求头.Body体等信息:而对于处理就是调用相应的Lua代码即可:输出 ...
- Django 的路由系统
Django 的路由系统 Django 的路由系统 路由层 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$',views.ho ...
- 导入lxml找不到etree，报ImportError：DLL load failed：找不到指定的程序
1.是pip install lxml后,安装好了lmx-3.8.0,然后执行sacpy的scrapy crawl jobbole命令报导入lxml的etree无法导入,找不到指定的程序 2.这是因为 ...
- 前端学习【第一篇】： HTML内容
内容概要: HTML介绍 常用标签介绍 一. HTML介绍 web服务的本质 #!/usr/bin/env python3 # _*_ coding:utf- _*_ import socket sk ...
- 设计模式-桥接模式（Bridge）
桥接模式是构造型模式之一.把抽象(Abstraction)与行为实现(Implementor)分离开来,从而可以保持各部分的独立性以及应对它们的功能扩展. 角色和职责: 1.抽象类(Abstracti ...
- 网络下载器 EagleGet v2.0.4.60 Full 绿色便携版
下载地址:点我 基本介绍 EagleGet(亦称 EG Download Accelerator)是一个用于 Windows 系统的下载管理器,它是免费软件.EagleGet 使用多线程技术,支持从Y ...