CSS3_综合案例
综合案例
- 设置元素的 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_综合案例的更多相关文章
- JavaScript:综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
- JavaEE Tutorials (30) - Duke综合案例研究示例
30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...
- jquery-easyUI第二篇【综合案例】
基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...
- Angular路由与多视图综合案例
Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...
- Winform开发框架中的综合案例Demo
在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...
- 【原创 Hadoop&Spark 动手实践 13】Spark综合案例:简易电影推荐系统
[原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统
- Ext.js入门:常用组件与综合案例(七)
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- Java11-java基础语法(十)类设计综合案例
Java11-java语法基础(十)类设计综合案例 一.类综合设计方法 1.类设计步骤 (1)分析数据成员 (2)分析成员方法和构造方法 (3)画出类图 (4)编码测试 2.具体问题 1)分析数据成员 ...
随机推荐
- SNMP学习——v3 VACM
目录: ☆ SNMPv3视图访问控制模型 ☆ SNMPv3报文格式 ☆ VACM参数 ☆ Context Table ☆ Security To Group Table ...
- Java中多态性的实现
class A ...{ public String show(D obj)...{ return ("A and D"); } public String show(A obj) ...
- SQLServer数据库文件由高版本向低版本转换
这个只能用2012的生成脚本功能,在高级里面把脚本兼容设置成2008,并且选择生成架构和数据(默认是只有架构)拿这个脚本在2008上跑一次就行了 sqlserver 中使用sqlcmd 执行*.sql ...
- APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows
APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows iTunes 12.9.4 for Windows is now available and addres ...
- 2.5 elif
elif 想一想: if能完成当xxx时做事情 if-else能完成当xxx时做事情1,否则做事情2 如果有这样一种情况:当xxx1满足时做事情1:当xxx1不满足.xxx2满足时做事情2:当xxx2 ...
- UE4 PostProcessVolume笔记
透镜:Lens Bloom 光溢出 VDirt Mask 光溢出泥土蒙版 Depth of Filed 景深 V Eye Adaptation (Auto-Exposure) 人眼适应 V这个效果有时 ...
- 本地图片上传与H5适配知识
最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...
- ActiveMQ的Destination高级特性
1. Composite Destinations 组合目的地 组合队列Composite Destinations : 允许用一个虚拟的destination代表多个destinations ...
- Python不能用于大型项目?关于Python的10大误解
 语言多元化是PayPal编程文化中一个重要的组成部分.在C++和Java长期流行的同时,更多的团队选择了Jva和Scala.同时,Braintree的收购也引入了一个久经世故的Ruby社区.Pyt ...
- JAVA中几种常用的RPC框架介绍
原文:https://blog.csdn.net/zhaowen25/article/details/45443951