前端作业一总结

最新推荐文章于 2022-05-01 12:01:31 发布

原创最新推荐文章于 2022-05-01 12:01:31 发布 · 744 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文分享了作者利用暑假时间进行网页设计的经历，重点介绍了使用Bootstrap框架完成的搜索框和导航栏的设计过程，包括样式调整和二级菜单实现等细节。

啦啦啦，暑假来了，开始尽情写页面啦，多写多百度多总结
这次主要用bootstrap的知识来写，不断完善修改完善样式~

部分代码如下：

搜索框：

使用iconfont的图标

这里写图片描述

 <div class="col-xs-4 search">
                <form>
                    <input type="text" placeholder="请输入相关内容搜索">
                    <button type="submit"><i class="searchIcon ">&#xe600;</i></button>
                </form>
            </div>

.search {
    margin-top: 20px;
    padding: 30px 0;
    background: #0A68AE;
}

.search form {
    position: relative;
    width: 282px;
    margin: 0 84px;
    background: #5494c3;
}

.search input, .search button {
    background: transparent;
    border: none;
    outline: none;
}

.search input {
    width: 100%;
    height: 42px;
    padding-left: 13px;
    color: #fff;
}

.search input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #fff;
    /* placeholder字体大小  */
    font-size: 14px;
    /* opacity:不透明度  */
    opacity: 0.3;
}


.search button {
    top: 0;
    right: 0;
    height: 42px;
    width: 42px;
    cursor: pointer;
    position: absolute;
}

.searchIcon {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}

@font-face {
    font-family: 'iconfont';  /* project id 332240 */
    src: url('http://at.alicdn.com/t/font_yi3ie5lgshlzyqfr.eot');
    src: url('http://at.alicdn.com/t/font_yi3ie5lgshlzyqfr.eot?#iefix') format('embedded-opentype'),
    url('http://at.alicdn.com/t/font_yi3ie5lgshlzyqfr.woff') format('woff'),
    url('http://at.alicdn.com/t/font_yi3ie5lgshlzyqfr.ttf') format('truetype'),
    url('http://at.alicdn.com/t/font_yi3ie5lgshlzyqfr.svg#iconfont') format('svg');
}

 <div class="container bgNav">
        <div class="row ">
            <div class="col-xs-10 col-xs-offset-1">
                <ul class="nav nav-pills nav-justified ">
                    <li role="presentation"><a href="#">首页</a></li>
                    <li role="presentation"><a href="#">部门简介</a>
                        <ul>
                            <li><a href="#">部门职责</a></li>
                            <li><a href="#">组织机构</a></li>
                        </ul>
                    </li>
                    <li role="presentation"><a href="#"></a></li>
                    <li role="presentation"><a href="#"></a></li>

                </ul>
            </div>
        </div>
    </div>

/*一级导航*/
.nav-pills > li > a {
    border-radius: 0px;
    padding: 18px 12px;
    color: #fff;

}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #1c95ee;
    color: #fff;
}

/* 设置二级导航绝对定位，并隐藏 */
.nav > li > ul {
    position: absolute;
    display: none;
}

/* 设置二级导航的li的样式 */

.nav > li > ul > li > a {
    float: none;
    color: #fff;
    width: 97px;
    padding: 20px;
    background-color: #1c95ee;
    display: block;
    z-index: 100;
    position: relative;
    text-align: center;
}



/* 鼠标放在一级菜单上，显示二级菜单 */
.nav > li:hover ul, .nav > li:focus ul {
    display: block;
}

.nav > li:hover ul a:hover {
    background-color: #f5874a;
}

左边栏

用bootstrap的按钮式下拉菜单，修改部分样式实现

这里写图片描述

.sectorMenu li.active a {
    border-left: 2px solid #f5874a;
    background: none;
    color: #666;
}

.sectorMenu li:hover a {
    border-left: 2px solid #f5874a;
    color: #666;
}