综合案例

  • 设置元素的 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. 金融量化分析【day111】:Matplotib-绘制K线图

    一.绘制k线图 1.使用金融包出错解决 1.错误代码 ImportError: No module named finance 2.解决办法 https://github.com/matplotlib ...

  2. matlab中cumsum函数

    matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者help cumsum即可获得该函数的帮助信息. 格式一:B = cumsum(A ...

  3. 从Socket入门到BIO,PIO,NIO,multiplexing,AIO(未完待续)

    Socket入门 最简单的Server端读取Client端内容的demo public class Server { public static void main(String [] args) t ...

  4. python GUI 之 tkinter

    写一个 登陆窗口来学习 tkinter ,还剩下一些问题 代码暂时如下 import tkinter as tk import webbrowser import pickle from tkinte ...

  5. MySQL的一些基本命令笔记(4)

    delete 语句嵌套子查询: delete from 表名1 where 列名 操作符 (select 列名 from 表名2 where 条件); 示例: delete from customer ...

  6. 集合各个实现类的底层实现原理 ----- 原文地址:https://blog.csdn.net/qq_25868207/article/details/55259978

    ArrayList实现原理要点概括 参考文献: http://zhangshixi.iteye.com/blog/674856l https://www.cnblogs.com/leesf456/p/ ...

  7. mysql语句实战

    请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号:   这个比较难, 3.查询平均成绩大于60分的同学的学号和平均成绩: 4.查 ...

  8. 双系统下Ubuntu扩展根目录空间方法

    最近,在Ubuntu16.04上装了个matlab,突然发现根目录空间只剩1G了,这哪儿够用啊,就想着有没有一种方法不用重装系统就可以扩展根目录空间呢?别说还真有,看下文. 开始之前先分出一些未分配空 ...

  9. make: 警告:检测到时钟错误。您的创建可能是不完整的。

    问题: make: 警告:检测到时钟错误.您的创建可能是不完整的. 原因:1. 文件时间不一致.(或者修改了系统时间) 如何解决:你touch *一下,然后重新编译 touch * touch命令有两 ...

  10. centos7中nfs文件系统的使用

    需求: file01:1.1.1.1(内网ip 172.20.103.212),file02:2.2.2.2(内网ip 172.20.103.211) 这两台机器的 /dev/mapper/myvg- ...