创建index html的命令,index.html-CSDN博客

这篇博客介绍了一种独特的命令入门教程，通过JavaScript的$(document).ready()函数和fullpage.js库，展示了如何创建具有动态效果的网页背景颜色渐变和按钮样式变换。内容涵盖CSS3过渡效果、渐变背景、边框阴影以及响应式设计，适合前端开发者学习。

摘要由CSDN通过智能技术生成

命令入门

$(document).ready(function() {

$('#fullpage').fullpage({

sectionsColor: ['#1bbc9b', '#4BBFC3'],

//easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'

});

book{

margin: 10px 0 0 0;

padding: 15px 10px;

color: #fff;

text-shadow: 0 -1px 0 rgba(0,0,0,0.25);

background-color: #49afcd;

background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);

border-color: #2f96b4 #2f96b4 #1f6377;

border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

vertical-align: middle;

cursor: pointer;

display: inline-block;

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);

-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);

box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);

}

#book a{

text-decoration:none;

color:#fff;

}

#book:hover{

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

background-color: #2F96B4;

background-position: 0 -15px;

-webkit-transition: background-position .1s linear;

-moz-transition: background-position .1s linear;

-ms-transition: background-position .1s linear;

-o-transition: background-position .1s linear;

transition: background-position .1s linear;

}

h1 {

font-size: 6em

}

h2 {

font-size: 4em

}

p {

font-size: 2em;

}

.section {

text-align: center

}

.button {

margin: 20px 15px 0 0;

vertical-align: middle;

display: inline-block

}

.button a {

color: #fff;

background: #316f68;

padding: 15px 30px;

border-radius: 5px;

display: block

}

.button a:hover {

color: #316f68;

background-color: #fff

}

@media screen and (max-height: 580px) {

h1 {

font-size: 4.5em

}

h2 {

font-size: 1.3em

}

命令入门

可能是世界上最逗的命令入门教程

点击阅读

一键复制

编辑

Web IDE

原始数据

按行查看

历史