H5新手快速入门 简单布局
布局
*{
margin: 0;
padding: 0;
}
.quan{
width: 100%;
height: 2000px;
background: black url("../ima/bg.jpg") no-repeat; }
.zhuo{
margin-top: 90px;
width: 60%;
height: 1000px; float: left;
}
.you{
margin-top: 90px;
width: 30%;
height: 1000px; float: right;
}
.tou{
width: 100px;
height: 80px;
margin: 60px 150px;
font-size: 50px;
color: white;
transition: all 1s ease;
}
.tou:hover {
transform: scale(1.5);
color: yellow;
}
.z1{ width: 100px;
height: 80px;
margin: 60px 150px;
font-size: 50px;
color: white;
transition: all 1s ease;
}
.z1:hover {
transform: rotate(360deg);
}
.z2{
width: 200px;
height: 200px;
margin: 60px 150px;
font-size: 30px;
color: white;
} .wei{
width: 270px;
height: 60px;
margin: 60px auto;
background: black url("../ima/003.png") no-repeat;
transition: all 1s ease;
}
.wei:hover{
background: black url("../ima/001.png") no-repeat;
}
.tu{
width: 60%;
margin: 20px auto;
transition: all 1s ease;
}
.tu:hover{
transform: skew(-25deg);
}
@media screen and (max-width: 1100px) {
.zhuo{
width: 100%; margin: 0 auto;
float: none;
}
.you{ width: 100%;
margin: 0 auto;
float: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
</head>
<body>
<!--布局-->
<div class="quan">
<div class="zhuo">
<!--布局-->
<div class="tou">BlueAppTemplate</div>
<div class="z1">OnepageResponsiveHTML5parallax businesslandingpage</div>
<div class="z2">Loremipsumdolorsitamet,consecteturadipisicingelit.Similiqueautem,
atqueinvoluptatibusrepellatnostrumiustoarchitectovelplaceat
numquamomnisassumenda.</div>
<div class="wei"></div>
<!--布局-->
</div>
<!--布局-->
<div class="you">
<div class="tu"><img src="ima/phone.png"></div>
</div>
</div>
</body>
</html>
H5新手快速入门 简单布局的更多相关文章
- GitHub新手快速入门日常操作流程
GitHub新手快速入门日常操作流程 1. 注册帐号 打开https://github.com/,填写注册信息并提交. 2. 登录帐号 打开https://github.com/login,输入注册的 ...
- PDF.NET SOD 开源框架红包派送活动 && 新手快速入门指引
一.框架的由来 快速入门 有关框架的更多信息,请看框架官方主页! 本套框架的思想是借鉴Java平台的Hibernate 和 iBatis 而来,兼有ORM和SQL-MAP的特性,同时还参考了后来.N ...
- 如何让一个Java新手快速入门?
问题中问到如何让java新生快速入门,既然想快速入门的话那最简单粗暴的方法就是多看视频,加上跟着视频敲代码,刚开始可能不知道是什么意思,敲得多了就慢慢知道是什么意思了. 刚开始建议在网上找那种结合自己 ...
- WPF新手快速入门系列 1.布局
[概要] 该系列文章主要描述,新手如何快速上手做wpf开发.看过网上部分的教程,主要讲述的是介绍控件.这并没有问题,但是没有把自己的使用经验也完整的描述出来. 所以特此编写此系列文章希望能帮助到,因为 ...
- WPF新手快速入门系列 2.绑定
[概要] 上一章讲了布局,按照市面上的书籍每一本讲的顺序都不一样,本系列是希望大家能快速上手去应对工作需要,所以本章就直接开始讲绑定. 如有学习过程中想交流学习.疑惑解答可以来此QQ群交流:58074 ...
- CSS快速入门-前端布局1(抽屉)
一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整 ...
- CSS快速入门-后端布局
一.后台框架概述 我们在网上随便搜索后台框架,你会发现大部分都查不多.正所谓:好看的皮囊千篇一律,有趣的灵魂万里挑一. 第一个是H-ui,H-ui.admin是用H-ui前端框架开发的轻量级网站后台模 ...
- CSS快速入门-前端布局2(唯品会1)
上一篇我模仿了抽屉网站,这一节我来对唯品会主页进行模仿. 我觉得写一个主页大概思路如下: 1.确定整体布局方式:(html框架布局) 2.针对每一块进行细化,尽量做到模块化.(css) 3.加上特效效 ...
- Jmeter 快速入门--简单的http压测
1.添加线程组 打开jmeter主窗口后,选择左侧树形结构里的"测试计划",然后右键选择添加,选择"threads(users)",选择"线程组&qu ...
随机推荐
- 如何使用phpstudy本地搭建多站点(每个站点对应不同的端口)
到http://phpstudy.net/a.php/208.html下载phpstudy 1.装完phpstudy后,(假设安装在D盘,安装后开启服务) 在D:\phpStudy\WWW\路径下创建 ...
- Windows10 VS2015下分别编译libevent 32位和64位库
Libevnt 在Windows10 VS2015下分别编译32位和64位库 直接上王道 libevent代码地址: https://github.com/libevent/libevent git ...
- 个人作业1——四则运算题目生成程序(java代码,基于控制台)
一.题目描述: 从<构建之法>第一章的 "程序" 例子出发,像阿超那样,花二十分钟写一个能自动生成小学四则运算题目的命令行 "软件",满足以下需求: ...
- 团队作业4---第一次项目冲刺(ALpha版本)第一天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完成登录界面 2.功能 完成数据结构设计及数据交互模块代码 完成爬虫博客页面数据采集模块 四.困难与问题 1.因为要 ...
- 201521044091 《Java学习笔记》 第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结.注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面 ...
- 201521123090 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 继承与多态的概念与实现 父类与之类的关系 解决代码复用的办法 2. 书面作业 注释的应用 使 ...
- 201521123096《Java程序设计》第二周学习总结
1.本周学习总结 (1)学会使用码云管理代码: (2)了解数组和字符串的操作: (3)对完全限定类名有一定的认识. 2.书面作业 (1)使用Eclipse关联jdk源代码,并查看String对象的源代 ...
- 201521123006 《java程序设计》 第13周学习总结
1. 本周学习总结 1.以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.j ...
- Markdown例子
一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...
- Vue跨门槛系列之实例的阐述
学习.使用中结合vue官网的api和教程极佳! 前前篇文章上有提及到vue的简单介绍,详情请戳这里 (初试 Vue.js) 第一部分: 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue ...