实验六 html网页设计,网页设计.html · 谢泽华/面向对象与软件工程实验二：网页模仿 - Gitee.com...

网页

ul,

menu,

dir {

display: block;

list-style-type: disc;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 40px;

}

div {

display: block;

}

* {

margin: 0;

padding: 0;

}

.comm-head {

width: 100%;

height: 78px;

overflow: visible;

position: absolute;

top: 0;

left: 0;

z-index: 11;

}

.head-normal {

width: 100%;

max-width: 1358px;

min-width: 1230px;

height: 78px;

margin: 0 auto;

position: relative;

z-index: 10;

}

.comm-head .logo {

float: left;

width: 132px;

height: 49px;

margin-top: 14px;

}

.head-nav {

float: left;

width: 55%;

height: 78px;

box-sizing: border-box;

margin-left: 30px;

padding-top: 16px;

}

.head-nav-title {

display: block;

color: #fff;

font-size: 18px;

letter-spacing: 1px;

}

.head-nav-subtitle {

display: block;

color: #aeaeae;

font-size: 11px;

margin-top: -1px;

letter-spacing: 1px;

}

.comm-topact {

width: 100%;

min-width: 1230px;

height: 360px;

overflow: hidden;

position: relative;

background: center top no-repeat;

-webkit-transition: height .6s, background, .6s;

transition: height .6s, background, .6s;

}

.topact-small-img {

-webkit-transition: opacity .6s;

transition: opacity .6s;

opacity: 1;

width: 100%;

height: auto;

}

.topact-big-img,

.topact-small-img {

position: absolute;

left: 50%;

top: 0;

width: 1920px;

height: 100%;

margin-left: -960px;

}

img {

border: 0;

}

.comm-topact .dark-mask {

width: 100%;

height: 131px;

position: absolute;

left: 0;

top: 0;

background: url(//ossweb-img.qq.com/images/lol/v3/dark-jianbian-repeatx-0.png) repeat center top;

z-index: 1;

}

.comm-topact-inner {

width: auto;

max-width: 1358px;

min-width: 1230px;

height: 100%;

position: relative;

margin: 0 auto;

}

.biaoti1 {

color: white;

font-size: 20px;

}

.biaoti2 {

color: white;

font-size: 10px;

}

.wraper {

font: normal 12px/1.6em Microsoft YaHei, Tahoma, simsun;

color: #666;

min-width: 1240px;

margin: 0 auto;

background: #f7f8f8;

overflow: hidden;

}

.mainer {

position: relative;

z-index: 1;

overflow: hidden;

zoom: 1;

width: 1240px;

margin: 0 auto 50px;

}

.layout {

width: 1240px;

margin: 0 auto;

}

.website-path .icon-arrow-2 {

display: inline-block;

vertical-align: middle;

margin: -2px 21px 0 21px;

}

.icon-arrow-2 {

background-position: -381px -46px;

width: 5px;

height: 8px;

}

.wraper .website-path {

width: 1240px;

}

.website-path {

width: 1358px;

height: 96px;

margin: 0 auto;

text-align: left;

line-height: 96px;

font-size: 14px;

}

.website-path .icon-home {

display: inline-block;

vertical-align: middle;

margin: -3px 9px 0 0;

}

.icon-home {

background-position: -347px -71px;

width: 16px;

height: 16px;

}

.website-path .here {

color: #424242;

}

.website-path a {

color: #a9a9a9;

}

.colbox {

border: 0px solid #e1e1e1;

box-shadow: 0 0 0px rgba(0, 0, 0, .1);

background: #fff;

}

.pagetab {

border-top: 4px solid #d7d7d7;

border-bottom: 1px solid #e2e2e2;

height: 48px;

background: #f0f0f0;

}

.pagetab-list {

margin-top: -4px;

margin-bottom: -2px;

position: relative;

height: 53px;

}

.pagetab-list,

.pagetab-list li {

float: left;

}

li {

list-style-type: none;

}

a:hover,

a:visited {

text-decoration: none;

}

.pagetab-list-lnk {

display: block;

border-top: 4px solid #d7d7d7;

height: 49px;

line-height: 48px;

width: 160px;

text-align: center;

color: #525252;

font-size: 16px;

cursor: pointer;

}

.pagetab-list-lnk-now {

display: block;

border-top: 4px solid;

height: 49px;

line-height: 48px;

width: 160px;

text-align: center;

color: #525252;

font-size: 16px;

cursor: pointer;

}

a {

text-decoration: none;

}

.info-showbox {

padding: 30px 37px 30px 30px;

margin-top: -1px;

position: relative;

min-height: 500px;

_height: 500px;

}

.spell-list {

float: left;

width: 43%;

padding-left: 16px;

margin-right: 0;

border-right: 1px solid #f0f0f0;

}

.imgtextlist {

float: left;

padding: 30px 0 0;

position: relative;

}

.imgtextlist .current {

color: #00a383;

}

.imgtextlist li {

float: left;

width: 90px;

height: 100px;

margin-bottom: 22px;

text-align: center;

line-height: 15px;

cursor: pointer;

position: relative;

overflow: hidden;

}

.imgtextlist .current .sbg {

display: block;

}

.spell-list .sbg {

width: 0.1px;

height: 0.1px;

border: 0.1px solid #00a383;

background: 0 0;

}

.imgtextlist .sbg {

display: none;

position: absolute;

top: 0;

left: 12px;

background: #00a383;

opacity: .8;

cursor: pointer;

}

.imgtextlist .sbg,

.imgtextlist img {

width: 66px;

height: 65px;

}

.spell-defail {

float: left;

width: 100%;

padding-top: 30px;

padding-left: 40px;

}

.spell-title {

overflow: hidden;

zoom: 1;

}

.spell-title .cons {

float: left;

width: 60%;

color: #9a9a9a;

line-height: 30px;

font-size: 14px;

}

.spell-desc {

padding: 20px 0;

line-height: 18px;

color: #333;

font-size: 14px;

}

.imgchange

{

width: 64px;

height: 64px;

}

.imgchange:hover

{

transform: scale(1.2,1.2);

transition-duration: 200ms;

}

.wordchange

{

transition-duration: 500ms;

}

.wordchange:hover

{

background:darkgrey;

}

@media screen and (min-width:1045px)

{

.spell-defail

{

float:none;

}

.spell-title

{

float:none;

}

.spell-title .cons

{

float:none;

}

.spell-desc

{

float: none;

}

}

游戏资料	商城/合作	社区互动	赛事官网	自助系统
GAME INFO	STORE	COMMUNITY	ESPORTS	SYSTEM

英雄联盟主页

游戏资料

召唤师技能

• 英雄

• 物品

• 召唤师技能

• 符文

• 

  屏障

• 

  净化

• 

  点燃

• 

  虚弱

• 

  闪现

• 

  疾步

• 

  治疗

• 

  清晰

• 

  护驾

• 

  投掷

• 

  惩戒

• 

  标记

• 

  传送

屏障

召唤师等级：1级

为你的英雄套上护盾，吸收115-455(取决于英雄等级)伤害，持续2秒。

一键复制

编辑

Web IDE

原始数据

按行查看

历史