正文

h5新手快速入门简单布局

author  author  2022-09-22  109

关键词：


布局
*{
    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>

如何让一个java新手快速入门？

问题中问到如何让java新生快速入门，既然想快速入门的话那最简单粗暴的方法就是多看视频，加上跟着视频敲代码，刚开始可能不知道是什么意思，敲得多了就慢慢知道是什么意思了。刚开始建议在网上找那种结合自己大学课... 查看详情

android基础01快速入门&布局

Android基础01快速入门&布局01.01 手机制式第一代模拟制式手机（1G）:1G就是大哥大，手机类似于简单的无线电双工电台，通话是锁定在一定频率，所以使用可调频电台就可以窃听通话。第二代GSM、CDMA等数字手机（2G）:... 查看详情

h5-新手入门1

引言：对于一个计算机相关专业的，又一直对编程不太感冒的女生来说，h5是一门比较好上手的语言，适合女生，也适合还想在编程路上走一走的人。先贴几张我目前用h5做的东西，后面会给代码（学习过程会一直记录... 查看详情

h5前端性能测试快速入门

说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什... 查看详情

软件测试的快速入门一（新手必看，老手绕道）

1.软件测试的定义软件测试是通过使用更高效的方法和工具来提升软件开发的效率及软件开发的质量，简单粗俗的说就是找bug。2.测试的目标软件测试的目标应该服从于软件项目的目标。3.软件测试的原... 查看详情

h5py快速入门指南(代码片段)

...Python语言用来操作HDF5的模块。下面的文章主要介绍h5py的快速入门指南，翻译自h5py的官方文档：http://docs.h5py.org/en/latest/quick.html。该翻译仅为个人学习h5py为目的，如有翻译不当之处，请速联系笔者或提供正确的翻译，非常感谢！... 查看详情

全栈开发系列

一、全栈开发之HTML全栈开发之HTML快速入门（一）二、全栈开发之CSSCSS快速入门-引入方式CSS快速入门-基本选择器CSS快速入门-组合选择器CSS快速入门-属性和伪类CSS快速入门-盒子模型CSS快速入门-实用技巧CSS快速入门-float和positionCS... 查看详情

15天快速入门安卓开发布局知识(代码片段)

文章目录三布局知识3.1布局理论3.2线性布局LinearLayout3.3帧布局FrameLayout3.4相对布局RelativeLayout3.5表格布局TableLayout3.6网格布局GridLayout3.7百分比布局（PercentRelativeLayout、PercentFrameLayout）3.8常用的控件3.9主题切换3.10Android中的查看详情

css快速入门-前端布局2(唯品会1)

上一篇我模仿了抽屉网站，这一节我来对唯品会主页进行模仿。我觉得写一个主页大概思路如下：1、确定整体布局方式；(html)2、针对每一块进行细化，尽量做到模块化。（css）3、加上特效效果。（js）先看效果图：查看详情

css快速入门-前端布局1(抽屉）

一、效果图前面对CSS基础知识有了一定的了解，是时候开始实战了！以下我对抽屉（https://dig.chouti.com/）主页进行模拟布局。官方网站效果图：模拟网站图：二、实现步骤1、整体布局（header、body、footer）抽屉的首页主... 查看详情

worldpress快速入门篇

...软件安装起来很简单，但是配置起来很复杂，所以不建议新手手动分别安装。建议新手使用所谓的集成环境，也就是安装一款集成软件，就相当于安装了上述的三款软件，而且不需要你进行复杂的配置。集成环境其实也是一款软... 查看详情

idea如何快速搭建java开发环境,intellijideamac新手入门

作为IntelliJIDEAmac新手，IDEA如何快速搭建Java开发环境呢？今天小编就给大家带来了IntelliJIDEAmac使用教程，想知道IDEA如何快速搭建Java开发环境？赶快来跟小编一起学习吧！全局JDK（默认配置）具体步骤：顶部工具栏 File->Other... 查看详情

h5简单布局练习

<body><headerclass="header"><h1>XXX公司</h1><nav><ahref="#">a</a><ahref="#">b</a><ahref="#">c</a><ahref="#">d</a><ahref=" 查看详情

新手快速生成springbootmaven工程

　　Springboot本人实际使用也有一定时间了，最近抽空看了点官方文档，然后发现官网提供了自动生成简单SpringBoot工程的功能。　　很喜欢这个功能，太适合入门同学使用了，特别是联想到以前自己刚学这部分时花了不少时间在... 查看详情

Apollo 与 Angular 快速入门：未知错误

...布时间】：2017-10-1907:55:23【问题描述】：我是网络开发的新手，我完全迷路了。我想开发一个Web应用程序，其后端使用Django开发，前端使用Angular开发。我希望通过Apollo和GraphQL来完成后端和前端之间的交互。考虑到这一点，我开... 查看详情

移动端自动测试工具appium快速入门(代码片段)

文章目录一、前言二、Appium概述1、架构图2、UI自动化收益三、环境安装1、桌面版本安装2、DOS命令安装3、安装SDK四、常用操作方法五、常见定位方式1、ID定位2、name定位3、xpath定位4、定位h5页面六、简单demo示例七、运行效果八... 查看详情

✍python模块与包保姆式教学，新手快速入门(代码片段)

👳前言这是新手教程的第四期了，前面已经出过了Python的基础入门、面向对象编程和正则三期，今天的内容是Python的模块与包。如果你还没有看过前面的教程，有时间可以回去看一下，欢迎订阅我的专栏，... 查看详情

█qt-4-快速入门(代码片段)

目录QML语法基元素①Item元素②Rectangle元素③Text元素④Image元素⑤MouseArea元素组件简单的变换⑥定位元素布局Items⑦键盘输入元素⑧键元素高级技术QML语法rectangle.qml://一般来说会导入QtQuick2.5来作为初始元素的引用importQtQuick2.5//导... 查看详情