一个好看的Input样式

Posted 2020-08-15 绵山

<div class="search">
    <input type="text">
</div>

.search{
    text-align: center;
}
.search input{
    margin: 0 auto;
    padding: 0 10px;
    width: 536px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 2px;
    color: #fff;
    background: rgba(0,0,0,.15);

　　//font-family: "helvetica neue",arial,sans-serif;

}

fullPage插件使用:
head引入css文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css">

在body最后引入cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>

<div id="fullpage">
    <div class="section">
        <div>
            <div class="search">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="section">第二页</div>
    <div class="section">第三页</div>
    <div class="section">第四页</div>
</div>

$(document).ready(function(){
    $(‘#fullpage‘).fullpage({
        sectionsColor:[‘green‘,‘blue‘,‘gray‘,‘yellow‘],
        controlArrows:false,
        scrollingSpeed:2000,
        anchors:[‘page1‘,‘page2‘,‘page3‘,‘page4‘],
        loopTop:true,
        loopBottom:true,
        loopHorizontal:false,
        scrollBar:true,
        continuousVertical:true,
        menu:‘#menu‘,
        navigation:true,
        navigationTooltips:[‘aaa‘,‘bbb‘,‘ccc‘,‘ddd‘],

    });
})