前端开发醒目入门级写法

顶部导航

基础结构

需要达到的效果

 css样式参考代码

注释:网页结构部分默认样式自行清楚

.warpper {

            margin: 0 auto;

            width: 1240px;

        }

       

        .logo {

            width: 207px;

            height: 70px;

        }

       

        .logo h1 {

            width: 100%;

            height: 100%;

        }

       

        .logo a {

            display: block;

            width: 207px;

            height: 70px;

            background: url(../images/logo.png) no-repeat 0 0/100%;

            font-size: 0;

        }

       

        .nav {

            margin-left: 40px;

        }

       

        .nav li {

            float: left;

            margin-right: 48px;

            height: 70px;

            line-height: 70px;

            font-size: 16px;

        }

       

        .nav li a:hover {

            color: #27ba9b;

            padding-bottom: 8px;

            border-bottom: 1px solid #27ba9b;

        }

       

        .search {

            position: relative;

            width: 172px;

            height: 30px;

            margin-top: 23px;

            margin-left: 34px;

        }

       

        .search input {

            width: 172px;

            height: 30px;

            padding-left: 31px;

            border-bottom: 2px solid #e7e7e7;

        }

       

        .search input::placeholder {

            color: #ccc;

        }

       

        .search::before {

            position: absolute;

            content: '';

            left: 2px;

            top: 6px;

            width: 18px;

            height: 18px;

            background: url(../images/sprites.png) -80px -70px;

        }

       

        .cart {

            position: relative;

            margin-top: 23px;

            margin-left: 15px;

            width: 23px;

            height: 23px;

            background: url(../images/sprites.png) -120px -70px;

        }

       

        .cart span {

            position: absolute;

            top: -5px;

            right: -10px;

            width: 20px;

            height: 15px;

            line-height: 15px;

            border-radius: 7px;

            text-align: center;

            color: white;

            font-size: 13px;

            background-color: #e26237;

        }