您的位置：首页 > Web前端 > CSS

精选WPHTML+CSS代码举例

2014-01-06 10:53 323 查看

HTML+CSS代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow by CoolWP.com</title>
    <style>
html{font-size:62.5%;}
body{
    width:90%;
    position: relative;
    margin:0;
    margin-left:5%;
    margin-top:100px;
    padding:0;
    color:#fff;
    background-color: #D2D057;
    font-size:16px;
    font-size:1.6rem;
}
div{
    display: block;
    color: #005480;
}
@font-face {
    font-family: 'ChristopherhandRegular';
    src: url('font/comesinhandy-webfont.eot');
    src: url('font/comesinhandy-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/comesinhandy-webfont.woff') format('woff'),
         url('font/comesinhandy-webfont.ttf') format('truetype'),
         url('font/comesinhandy-webfont.svg#ChristopherhandRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2{
font-size:30px;
    font-size: 3rem;
    line-height: 0.8;
    color: #333;
    font-family: 'ChristopherhandRegular', Arial, Helvetica, sans-serif;
    font-weight: normal;
}


.box {
    background-color: #F8F299;
    border: 10px solid #fff;
    padding: 15px 20px 5px 20px;
    margin: 0 0 30px 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 5px 10px 3px #333;
    -moz-box-shadow: 5px 10px 3px #333;
    box-shadow: 5px 10px 3px #333;
}

.arrow {
    display: block;
    width: 100px;
    height: 100px;
    background: url(img/arrows-sprite.png ) no-repeat 0 0 transparent;
    position: absolute;
}
.arrow.arrow-1 {
    background-position: 0 0;
}
.arrow.arrow-2 {
    background-position: 0 -100px;
}
.arrow.arrow-3 {
    background-position: 0 -203px;
    width: 43px;
    height: 52px;
}
.arrow.arrow-4 {
    background-position: -50px -200px;
    width: 50px;
    height: 60px;
}
.arrow.arrow-5 {
    background-position: 0 -304px;
    width: 81px;
    height: 72px;
}
.arrow.arrow-6 {
    background-position: 0 -400px;
    width: 50px;
    height: 60px;
}
.arrow.arrow-7 {
    background-position: -50px -400px;
    width: 45px;
    height: 60px;
}
.arrow.arrow-8 {
    background-position: 0 -464px;
    width: 30px;
    height: 38px;
}
.box  {
    width: 20%;
    float: left;
    margin-left:5%;
    min-height:450px;

}
.clearer {
    float: none;
    clear: both;
}
span{line-height:60px;}
</style>
</head>
<body>
    <div>
        <h2 style="">Arrows by CoolWP.com</h2>
    </div>
    <div class="box">
        <span class="arrow arrow-1 "></span>
            &l
cd70
t;h2 style="padding-top:60px">Arrow 1</h2>
        <span class="arrow arrow-2"></span>
            <h2 style="padding-top:90px">Arrow 2</h2>
        <span class="arrow arrow-3"></span>
            <h2 style="padding-top:60px">Arrow 3</h2>
    </div>

    <div class="box  boxright">
        <span class="arrow arrow-4"></span>
            <h2 style="padding-top:60px">Arrow 4</h2>

        <span class="arrow arrow-5"></span>
            <h2 style="padding-top:90px">Arrow 5</h2>

    </div>
    <div class="box  boxright">
        <span class="arrow arrow-6"></span>
            <h2 style="padding-top:60px">Arrow 6</h2>

        <span class="arrow arrow-7"></span>
            <h2 style="padding-top:60px">Arrow 7</h2>
        <span class="arrow arrow-8"></span>
            <h2 style="padding-top:40px">Arrow 8</h2>
    </div>
<div class="clearer"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航