search

博客列表 >第五节课浮动和定位的运用仿写优酷头部导航-php培训五期线上班

第五节课浮动和定位的运用仿写优酷头部导航-php培训五期线上班

Morning的博客
Morning的博客原创
2019年03月26日 13:39:41964浏览

本节课主要是练习编写优酷头部导航和分类，熟练浮动和定位的使用，在布局前考虑清楚每个块的划分，把相同的功能和模块提取出来，即方便使用又能使代码简介。如果在同一个层级同一个标签写了class样式，那么要区分class，写法为 标签.class名

以下为本次练习完后的代码：

css代码如下：


实例

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a{
    text-decoration: none;
    color: #333333;
}

.l{
    float: left;
}

.r{
    float: right;
}

.mr{
    margin-right: 10px;
}

.mt{
    margin-top: 18px;
}

.ml{
    margin-left: 20px;
}

.clear {
    clear: both;
}

.contents {
    width: 1740px;
    margin: 0 auto;
}

.contentTitle {
    line-height: 70px;
}

.content {
    width: 100%;
    margin-top: 20px;
}

.hot_tv img {
    width: 240px;
    height: 360px;
}

small{
    color: #999999;
}

.tab li{
    margin-left: 25px;
    font-size: 16px;
}

.tab_tv img{
    width: 240px;
    height: 135px;
}

.header{
    width: 100%;
    height: 520px;
    background: #0D0181;
    position: relative;
}

.pic_show{
    width: 1740px;
    height: 520px;
    background: url("../images/bg.jpg") no-repeat;
    background-size: 100%;
    margin: 0px auto;
    position: relative;
}

.bg{
    width: 100%;
    height: 520px;
    background: url("../images/bg_1.png") no-repeat;
    background-size: 100%;
    position: absolute;top: 0px;left: 0px;z-index: 99;
}

.menu{
    width: 100%;
    height: 70px;
    position: absolute;top: 0px;left: 0;z-index: 999;
}

.menu_contents{
     width: 1740px;
     height: 70px;
     margin: 0 auto;
}

.menu_left{
    width: 1120px;
    height: 70px;

}

.menu_left img{
    margin: 20px;
}

.menu_left form{
    width: 500px;
    height: 40px;
    margin: 16px auto;
}

.input_text{
    width: 390px;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 20px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    background: rgba(234,234,234,0.5);
}

.input_button{
    width: 90px;
    height: 40px;
    border: none;
    outline: none;
    background: #B30702;
    color: #FFEABF;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.header_icon{
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background:url("../images/icon_sprite.png");
}



.icon_vip{
    width: 28px;
    height: 22px;
    margin: 0 auto;
    background:url("../images/icon_sprite.png") -32px -164px;
}

.icon_sub{
    background-position: -0px -40px;
}

.icon_record{
    background-position: -0px -60px;
}
.icon_upload{
    background-position: -0px -100px;

}
.icon_pc{
    background-position: -0px -80px;
}

.menu_right a{
    position:relative;
}
.menu_right a:hover .header_icon_span{
    color: #1F82FC;
}

.menu_right a:hover .icon_sub{
    background-position: -40px -40px;
}
.menu_right a:hover .icon_record{
    background-position: -40px -60px;
}

.menu_right a:hover .icon_upload{
    background-position: -40px -100px;
}

.menu_right a:hover .icon_pc{
    background-position: -40px -80px;
}

.user_icon_li:hover .user_under_pop{
    display: block;
}


.user_icon{
    width: 40px;
    height: 40px;
}

.menu_right{
    margin-top: 16px;
}

.menu_right li{
    width: 40px;
    margin-right: 10px;
    text-align: center;
}

.menu_right span{
    font-size: 12px;
    color: #E8E9EC;
}
/*登录下拉框*/
.user_under_pop{
    display: none;
    width: 260px;
    height: 120px;
    background: white;
    border-radius: 2px;
    position: absolute;top:70px;right:70px;z-index: 1001;
}

.arrow{
    width: 0px;
    height: 7px;
    border: 7px solid ;
    border-color: transparent transparent #fff transparent ;/*上右下左*/
    position: absolute;top: -20px;right: 33px;
}

.user_under_pop p{
    line-height: 60px;
    color: #929292;
    font-size: 16px;
}

.user_under_pop button{
    background: #2798ff;
    color: #fff;
    border: none;
    height: 36px;width: 220px;
    border-radius: 30px;
}

/*轮播下 网站分类 */
.head_r_menu{
    width: 190px;
    padding: 0px 15px;
    background: rgba(0,0,0,0.5);
    position: absolute;top: 100px;right: 10px;
    z-index:999;
}

.head_r_menu a{
    display: block;
    line-height: 25px;
    font-size: 14px;
    color: rgba(254,254,254,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 0;
    border-bottom: 1px rgba(147,147,147,0.4) solid;
}

.head_r_menu a:hover span{
    display: block;
    color: #fff;
    font-size: 20px;
}

.head_r_menu a:hover{
    color: #fff;
}
.voltage li{
    width: 230px;
    font-size: 15px;
    line-height: 30px;
    float: left;
}
.voltage a{
    padding-right: 40px;
    color: #666666;
}

.b_r{
    height: 45px;
    border-right: 2px #F3F3F3 solid;
    display: inline-block;
    float: left;
    margin-top: 7px;
    margin-right: 45px;
}

li.hot{
    width: 100px;
    text-align: center;
    padding: 0 10px;
}

.hot_icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    background:url("../images/icon_sprite.png");
}

.hot_icon_1{
    background-position: -64px -129px;
}

.hot_icon_2{
    background-position: -38px -129px;
}

.hot_icon_3{
     background-position: -120px -129px;
 }

.hot_icon_4{
    background-position: -92px -129px;
}

.hot a:hover span{
    color: #1F82FC;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

html代码如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优酷-这世界很酷</title>
    <link rel="icon" type="image/x-icon" href="static/images/1.ico">
    <link type="text/css" rel="stylesheet" href="static/css/myStyle.css">
</head>
<body>
<div class="header">
    <div class="pic_show">
        <div class="head_r_menu r">
            <a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
            <a href=""><span>以团之名 :</span>6进3公演神仙舞台</a>
            <a href="" ><span>都挺好:</span>明玉报复抄解气!</a>
            <a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
            <a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
            <a href="" style="color: white"><span style="  display: block;color: #fff;font-size: 20px;">这!就是原则 :</span>全程回顾解读热点</a>
            <a href="" style="border: none;"><span>重耳传奇 : :</span>王龙华王艳母子温馨团聚</a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="bg"></div>
    <div class="menu">
        <div class="menu_contents">
            <div class="menu_left l" >
                <img src="static/images/logo.png">
                <form method="" action="" class="r">
                    <input type="text" class="input_text">
                    <input type="button" class="input_button r" value="搜全网">
                </form>
                <div class="clear"></div>
            </div>
            <div class="menu_right r">
                <ul>
                    <li class="l">
                        <a href="">
                            <div class="icon_vip"></div>
                            <span style="color: #FF8500">VIP</span>
                        </a>
                    </li>
                    <li class="l ">
                        <a href="" >
                            <div class="icon_sub header_icon"></div>
                            <span class="header_icon_span">订阅</span>
                        </a>
                    </li>
                    <li class="l "  >
                        <a href="">
                            <div class="icon_record header_icon"></div>
                            <span class="header_icon_span">记录</span>
                        </a>
                    </li>
                    <li class="l  ">
                        <a href=""  >
                            <div class="icon_upload header_icon"></div>
                            <span class="header_icon_span">上传</span>
                        </a>
                    </li>
                    <li class="l ">
                        <a href=""  >
                            <div class="icon_pc header_icon"></div>
                            <span  class="header_icon_span">客户端</span>
                        </a>
                    </li>
                    <li class="l ml user_icon_li">
                        <a href="">
                            <img class="user_icon" src="static/images/user_icon.png"></a>
                            <div class="user_under_pop">
                                <span class="arrow"></span>
                                <p class="">登录使用更多功能</p>
                                <button>登录/注册</button>
                            </div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<!-- 开始顶部搜索导航 -->
<div class="contents">
    <ul class="content voltage">
        <li>
            <a href="">剧集</a>
            <a href="">电影</a>
            <a href="">综艺</a>
            <a href="">动漫</a>
            <a href="">娱乐</a>
            <a href="">生活</a>
        </li>
        <span class="b_r"></span>
        <li>
            <a href="">剧集</a>
            <a href="">电影</a>
            <a href="">综艺</a>
            <a href="">动漫</a>
            <a href="">娱乐</a>
            <a href="">生活</a>
        </li>
        <span class="b_r"></span>
        <li>
            <a href="">剧集</a>
            <a href="">电影</a>
            <a href="">综艺</a>
            <a href="">动漫</a>
            <a href="">娱乐</a>
            <a href="">生活</a>
        </li>
        <span class="b_r"></span>
        <li>
            <a href="">剧集</a>
            <a href="">电影</a>
            <a href="">综艺</a>
            <a href="">动漫</a>
            <a href="">娱乐</a>
            <a href="">生活</a>
        </li>
        <span class="b_r"></span>
        <li style="width:80px;">
            <a href="">资讯</a>
            <a href="">VR</a>
        </li>
        <span class="b_r"></span>
        <li class="hot">
            <a href="">
                <div class="hot_icon hot_icon_1"></div><br>
                <span>优酷片库</span>
            </a>
        </li>
        <li class="hot">
            <a href="">
                <div class="hot_icon hot_icon_2"></div><br>
                <span>指数排行</span>
            </a>
        </li>
        <li class="hot">
            <a href="">
                <div class="hot_icon hot_icon_3"></div><br>
                <span>大鱼号精选</span>
            </a>
        </li>
        <li class="hot">
            <a href="">
                <div class="hot_icon hot_icon_4"></div><br>
                <span>下载应用</span>
            </a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

<div class="contents">

    <div class="content">
        <div class="contentTitle">
            <h2>正在热播</h2>
        </div>
        <ul class="hot_tv">
            <li class="mr l">
                <a href="">
                    <img src="static/images/a.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
            <li class="mr l">
                <a href="">
                    <img src="static/images/b.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
            <li class="mr l">
                <a href="">
                    <img src="static/images/c.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
            <li class="mr l">
                <a href="">
                    <img src="static/images/d.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
            <li class="mr l">
                <a href="">
                    <img src="static/images/e.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
            <li class="mr l">
                <a href="">
                    <img src="static/images/f.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
            <li class="l">
                <a href="">
                    <img src="static/images/g.jpg"><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="content">
        <div class="contentTitle">
            <h2 class="l mr">剧集 ></h2>
            <ul class="tab l">
                <li class="l"><a href=""> 最新</a></li>
                <li class="l"><a href="">大陆剧</a></li>
                <li class="l"><a href=""> 日剧</a></li>
                <li class="l"><a href=""> 韩剧</a></li>
                <li class="l"><a href=""> 美剧</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="tv_show">
            <div class="big_show l mr">
                <a href="">
                    <img src="static/images/tv.jpg"><br>
                    <span>逆流而上的你</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
            </div>
            <ul class="tab_tv l">
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>

            </ul>

            <ul class="tab_tv l mt">
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="mr l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>
                <li class="l">
                    <a href="">
                        <img src="static/images/tv1.jpg"><br>
                        <span>都挺好</span>
                    </a><br>
                    <small>姚晨郭京飞陷亲情旋涡</small>
                </li>

            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果截图如下：

P~7D_1D%~8HBJ3TP{1R`HH4.png



上一条：lnmp安装管理运行下一条：使用foreach/if替代语法循环遍历二维数组、模拟员工管理系统—2019年2月21日
html、css
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多