综合案例

  • 设置元素的 width，还可以利用 left 和 right
  • 为了防止图片太小，background-size: 100% 100%;
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
    
        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">
    
            * {
    
                margin: 0;
    
                padding: 0;
    
            }

            html,body{
    
                height: 100%;
    
            }

            header {
    
                position: absolute;
    
                top: 0px;
    
                left: 0px;

                right: 0px;
    
                height: 130px;
    
                padding: 8px 15px;

                background-color: rgba(0, 0, 0, 0.7);

                display: flex;
    
                justify-content: space-between;
    
            }

            #we_are {
    
                display: flex;
    
                align-items: center;
    
                transform: skewY(20deg) translate(40px, 10px);

                font-size: 48px;
    
                color: #a798f5;
    
            }

            #we_are::after {
    
                content:"Venom";
    
                transform-origin: left top;
    
                transform: skewX(-20deg) translateX(40px) rotateZ(-20deg);

                color: #7375b9;
    
                font-size: 96px;
    
                text-shadow: 0 0 30px #82def3;
    
            }

            header ul {
    
                list-style: none;

                display: flex;
    
                flex-flow: 0;
    
                align-grow: 1;

                align-items: center;
    
            }

            a {
    
                color: #7375b9;
    
            }

            a:hover {
    
                font-size: 24px;
    
                text-shadow: 0 0 4px #82def3;
    
            }

            a:active {
    
                font-size: 18px;
    
                text-shadow: 0 0 2px #82def3;
    
            }

            header ul li {
    
                width: 85px;
    
                height: 35px;
    
                margin-right: 10px;
    
                display: flex;
    
                align-items: center;
    
                justify-content: center;

                font-size: 16px;
    
                border: 1px solid #fff;
    
                border-radius: 10px;
    
            }

            header ul li:last-child {
    
                margin-right: 0px;
    
            }

            article ul li a img {
    
                width: 120px;
    
                height: 80px;
    
            }

            article {
    
                width: 100%;
    
                height: 100%;
    
                background: url(./img/venomBg.jpg) no-repeat;
    
                background-size: 100% 100%;

                display: flex;
    
                justify-content: flex-start;
    
            }

            article ul {
    
                list-style: none;
    
                padding-top: 146px;
    
                padding-left: 292px;

                display: flex;
    
                flex-direction: column;
    
            }

            article ul li{
    
                width: 200px;
    
                height: 200px;

                display: flex;
    
                justify-content: center;
    
                align-items: center;
    
            }

            article ul li a{
    
                color: #000;
    
                display: flex;
    
                flex-direction: column;
    
                justify-content: center;
    
                align-items: center;
    
            }
    
        </style>
    
    </head>

    <body>

        <header>
    
            <div id="we_are">
    
                We are
    
            </div>
    
            <ul>
    
                <li><a href="javascript:;">毒液</a></li>
    
                <li><a href="javascript:;">屠杀</a></li>
    
                <li><a href="javascript:;">嚎叫</a></li>
    
            </ul>
    
        </header>

        <article>
    
            <ul>
    
                <li><a href="javascript:;">
    
                    <img src="./img/venom1.jpg"/>
    
                    毒液的味道
    
                </a></li>

                <li><a href="javascript:;">
    
                    <img src="./img/venom2.png"/>
    
                    暴虐
    
                </a></li>

                <li><a href="javascript:;">
    
                    <img src="./img/venom3.png"/>
    
                    Spider
    
                </a></li>

                <li><a href="javascript:;">
    
                    <img src="./img/venom6.png"/>
    
                   埃迪·布洛克
    
                </a></li>
    
            </ul>
    
        </article>
    
    </body>
    
</html>

CSS3_综合案例的更多相关文章

  1. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  2. DOM综合案例、SAX解析、StAX解析、DOM4J解析

    今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...

  3. JavaEE Tutorials (30) - Duke综合案例研究示例

    30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...

  4. jquery-easyUI第二篇【综合案例】

    基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...

  5. Angular路由与多视图综合案例

    Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...

  6. Winform开发框架中的综合案例Demo

    在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...

  7. 【原创 Hadoop&Spark 动手实践 13】Spark综合案例：简易电影推荐系统

    [原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统

  8. Ext.js入门：常用组件与综合案例（七）

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  9. Java11-java基础语法（十）类设计综合案例

    Java11-java语法基础(十)类设计综合案例 一.类综合设计方法 1.类设计步骤 (1)分析数据成员 (2)分析成员方法和构造方法 (3)画出类图 (4)编码测试 2.具体问题 1)分析数据成员 ...

随机推荐

  1. LFYZ-OJ ID: 1009 阶乘和

    思路 循环n次,每次计算i的阶乘i!,并加入sum中. n的范围从1~100,这里一定要使用高精度运算,涉及到"高精度乘低精度","高精度加高精度". 避免每次 ...

  2. LFYZ-OJ ID: 1015 统计数字（NOIP2007）

    分析 本体思路很简单:读入数据,排序.统计.输出.难点在于数据量较大,选择何种排序方法就极为重要,否则很容易发生内存或时间超限.可以考虑以下几种思路: 桶排序 桶排序是可以想到的最简单方法,可在O(n ...

  3. redis发布/订阅

    发布订阅简介 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息,消息之间通过channel传递. 准备工作 两台安装了redis的机器(虚拟 ...

  4. VS Code中编写C

    Visual Studio Code如何编写运行C.C++? Visual Studio Code的C/C++扩展功能 vscode配置C/C++的编译调试环境

  5. Blender 2.78 突然卡顿

    之前一直好好的直到这两天打开就一直延迟半拍,重启重装无效. 解决方法: NVIDIA控制面板→管理3d设置→程序设置→选择blender,更改显卡为集成显卡→应用 亲测有效.

  6. 高并发秒杀系统--Service接口设计与实现

    [DAO编写之后的总结] DAO层    -->    接口设计 + SQL编写 DAO拼接等逻辑    -->    统一在Service层完成 [Service层的接口设计] 1.接口 ...

  7. ubuntu16.04降级内核版本至3.13.0-85

    1.前言 采用ubuntu16.04在编译实验课程的实例代码simplefs 时,发现编译时报如下错误: 因此需要将ubuntu16.04的内核版本降级为 3.13.0-85-generic 2.修改 ...

  8. ubuntu 16.04扩充root 分区

    ubuntu使用过程中,提示root分区剩余空间不足,剩余200多M时还可以进行一些操作,剩余几M时拷贝等命令都不能够执行. 扩充root分区步骤如下: 1.查看root分区所在位置: 命令: sud ...

  9. 将DataTable转换为List<T>对象遇到问题：类型“System.Int64”的对象无法转换为类型“System.Int32”。

    可以利用反射将DataTable转换为List<T>对象:原始链接http://www.jb51.net/article/67386.htm 但是该方法在DataTable里某个字段类型是 ...

  10. 【python3 自动化之mysql操作】python3下的mysql入门基础

    1.所需资源:pycharm,python3.6,module:pymysql 2.pycharm配置mysql: 新添加一个mysql数据库 ip:192.168.112.54    端口:3306 ...