学成在线案例素材及代码

头部标签

 

顶部一行案例分五个盒子：

       顶部居中header大盒子，学成在线图片logo盒子，导航栏nav盒子， 搜索栏search盒子，用户user盒子

<div class="header w">
        <div class="logo">
            <img src="使用的图片6/logo.png">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <div class="user">
            <img src="使用的图片6/images/user_03.png">
            qq-gztbr
        </div>
    </div>

 中间大盒子案例

分左中右三个盒子：

 <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li> <a href="#">前端开发<span>></span></a> </li>
                    <li><a href="#">后端开发<span>></span></a> </li>
                    <li> <a href="#">移动开发<span>></span></a> </li>
                    <li><a href="#">人工智能<span>></span></a> </li>
                    <li><a href="#">商业预测<span>></span></a> </li>
                    <li><a href="#">云计算&大数据<span>></span></a> <