html中展开的小箭头,HTML5 移动网页应用中的展开式标签（带上下指示箭头）

最新推荐文章于 2024-05-20 16:18:49 发布

lover bacon

最新推荐文章于 2024-05-20 16:18:49 发布

阅读量750

点赞数

文章标签： html中展开的小箭头

本文详细介绍了CSS样式的使用方法，包括如何设置字体大小、颜色、背景等属性，以及如何使用动画效果增强页面交互体验。同时，文章还展示了如何通过CSS控制布局，实现不同元素间的定位与对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

@charset "utf-8";

* {

box-sizing: border-box;

margin: 0px;

padding: 0px;

}

*:before,

*:after {

box-sizing: inherit;

}

html {

overflow-y: scroll;

width: auto;

min-height: 100%;

box-sizing: border-box;

}

body {

font-size: 62.5%;

min-height: 100%;

width: auto;

background-color: #313131;

text-align: center;

color: #fff;

}

img {

border: none;

}

a {

outline: 0;

_noFocusLine: expression(this.hideFocus=true);

text-decoration: none;

color: #848484;

}

a:hover {

-webkit-animation: a_hover 3s;

animation: a_hover 3s;

color: #fff;

}

@-webkit-keyframes a_hover {

0% {

color: #848484;

}

50% {

color: #fff;

}

@keyframes a_hover {

0% {

color: #848484;

}

50% {

color: #fff;

}

.terms.active .terms_bar,

.terms.active .terms_bar:hover {

-webkit-animation: terms_bar_hover 3s;

animation: terms_bar_hover 3s;

color: #fff;

background-color: #4a4a4a;

border-top: 1px solid #6a6a6a;

}

@-webkit-keyframes terms_bar_hover {

0% {

color: #848484;

background-color: #2f2f2f;

}

50% {

color: #fff;

background-color: #4a4a4a;

border-top: 1px solid #6a6a6a;

}

@keyframes terms_bar_hover {

0% {

color: #848484;

background-color: #2f2f2f;

}

50% {

color: #fff;

background-color: #4a4a4a;

border-top: 1px solid #6a6a6a;

}

h5 {

font: 100 16px/18px Roboto, sans-serif;

text-align: left;

color: #fff;

}

#terms {

position: relative;

display: block;

padding: 0px;

width: auto;

background-color: #313131;

overflow: hidden;

}

.terms_conditions {

position: relative;

display: none;

margin: 0px auto 0px;

padding: 10px 10px 20px 10px;

width: auto;

background-color: #313131;

border-top: 1px solid #000;

overflow: hidden;

}

#terms.active .terms_conditions {

display: block;

}

.terms_bar {

position: relative;

display: block;

margin: 0px auto 0px;

padding: 15px 0px 15px 10px;

font: normal 12px/14px arial;

color: #b1b1b1;

background-color: #2f2f2f;

border-top: 1px solid #4a4a4a;

border-bottom: 1px solid #000;

text-align: left;

overflow: hidden;

cursor: pointer;

}

.arrow {

position: absolute;

display: inline-block;

*display: inline;

top: 15px;

right: 10px;

height: 11px;

width: 16px;

background-image: url('//desktop-akamai.gaming-assets.com/landing_pages/images/common/sprites/circles-arrow.png?20');

background-position: 0px -363px;

background-repeat: no-repeat;

zoom: 1;

-webkit-animation: arrow_turn_anticlockwise 0.3s linear;

animation: arrow_turn_anticlockwise 0.3s linear;

}

@-webkit-keyframes arrow_turn_anticlockwise {

0% {

-webkit-transform: rotate(-180deg);

transform: rotate(-180deg);

}

@keyframes arrow_turn_anticlockwise {

0% {

-webkit-transform: rotate(-180deg);

transform: rotate(-180deg);

}

#terms.active .arrow {

background-position: 0px -352px;

-webkit-animation: arrow_turn_clockwise 0.3s linear;

animation: arrow_turn_clockwise 0.3s linear;

}

@-webkit-keyframes arrow_turn_clockwise {

0% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

@keyframes arrow_turn_clockwise {

0% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

ol {

display: block;

padding: 10px;

width: auto;

font: normal 14px/16px Roboto, sans-serif;

overflow: hidden;

}

ol li {

margin: 0px 0px 0px 20px;

padding: 10px 0px 10px 0px;

list-style-type: decimal;

text-align: left;

color: #ccc;

}

ul {

display: block;

padding: 10px;

width: auto;

font: normal 14px/16px Roboto, sans-serif;

overflow: hidden;

}

ul li {

margin: 0px 0px 0px 15px;

padding: 10px 0px 10px 0px;

list-style-type: disc;

text-align: left;

color: #ccc;

}