前端开发常用素材库

最新推荐文章于 2024-05-21 09:26:22 发布

weixin_33817333

最新推荐文章于 2024-05-21 09:26:22 发布

阅读量745

点赞数

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/owengao/blog/496703

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、圆圈里面的倒三角箭头

需要font-awesome.min.css的支持

class="fa fa-chevron-up" 是向上的三角箭头

<link rel="stylesheet" href="css/font-awesome.min.css" />

HTML：

<a href="" class="down-arrow-btn"><i class="fa fa-chevron-down"></i></a>

CSS：

a.down-arrow-btn{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    border-radius: 50%;
    background: #000000;
    color: #FFFFFF;
    font-size: 20px;
    margin-top: 250px;
}
a.down-arrow-btn:hover,a.down-arrow-btn:focus{
    background: #3DC9B3;
}

2、每页标题下方的图标背景颜色

HTML：

<div class="news-list">
    <h3 class="news-title">这里是小标题</h3>
    <span></span>
</div>

CSS：

.news-list{
    text-align: center;
}
    .news-list .news-title{
    margin-bottom: 20px;
}
.news-list span{
    display: block;
    width: 100px;
    height: 5px;
    background: #37A898;
    margin: 0 auto;
}

3、每页标题下方的下箭头背景图片

可以作为全局的 h3.site-title-arrow 增加复用性

HTML：

<h3 class="site-title-arrow">我们都是好孩子</h3>
<h3 class="site-title-arrow">男人哭吧哭吧不是罪</h3>

CSS：

.site-title-arrow{
    background: url(img/h1-bg.png) no-repeat center bottom;
    padding-bottom: 30px;
    text-align: center;
    font-weight: bold;
}

4、设置不全部显示的背景图片，随着下拉而下滑

HTML：

<div style="height: 200px;"></div>
<div class="product-list text-center">
    <h2>狼爱上羊，并不荒唐</h2>
    <p>狼爱上羊，并不荒唐,他们穿破世俗的城墙</p>
</div>
<div style="height: 100px;"></div>
<div class="team-list text-center">
    <h2>狼爱上羊，并不荒唐</h2>
    <p>狼爱上羊，并不荒唐,他们穿破世俗的城墙</p>
</div>
<div style="height: 2000px;"></div>

CSS：

.team-list{
    background: url(img/plants-bg.jpg) no-repeat center center;
    background-size: cover ;
    background-attachment: fixed;
    color: #FFFFFF;
    padding: 30px 0;
}

5、社交图标icons的设置

第一个icon为鼠标经过的样式

HTML：

<ul class="social-icons text-center">
    <li><a href=""><i class="fa fa-facebook"></i></a></li>
    <li><a href=""><i class="fa fa-google"></i></a></li>
    <li><a href=""><i class="fa fa-twitter"></i></a></li>
    <li><a href=""><i class="fa fa-instagram"></i></a></li>
</ul>

CSS：

ul.social-icons li{
    display: inline-block;
}
ul.social-icons li a{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    background: #000000;
    border-radius: 50%;
    font-size: 16px;
    border: 1px solid #000000;
}
ul.social-icons li a:hover,ul.social-icons li a:focus{
    background: #FFFFFF;
    border: 1px solid #000000;
    color: #000000;
}