第四节课定位/伪选择器及优酷导航条布局练习及总结-php培训五期线上班 - web

首页 > 博客列表 > 第四节课定位/伪选择器及优酷导航条布局练习及总结-php培训五期线上班

博主信息

博文 7

粉丝 1

访问量 6808

专题推荐

更多>

实例

* {
    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;
}

.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;
}

.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;
    background: #B30702;
    color: #FFEABF;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

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

.icon_vip{
    background-position: -32px -164px;
}

.icon_record{
    background-position: -40px -60px;
}
.icon_upload{
    background-position: -40px -100px;
}
.icon_pc{
    background-position: -40px -80px;
}

.menu_right{
    margin-top: 16px;
}

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

.menu_right span{
    font-size: 12px;
    color: #E8E9EC;
}

运行实例 »

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

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>
    <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 icon"></div>
                            <span style="color: #FF8500">VIP</span>
                        </a>
                    </li>
                    <li class="l">
                        <a href="">
                            <div class="icon_record icon"></div>
                            <span >记录</span>
                        </a>
                    </li>
                    <li class="l">
                        <a href="">
                            <div class="icon_upload icon"></div>
                            <span >上传</span>
                        </a>
                    </li>
                    <li class="l">
                        <a href="">
                            <div class="icon_pc icon"></div>
                            <span >客户端</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </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>

运行实例 »

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

结果页面如下所示：

总结：浮动、固定定位、绝对定位都脱离了文档流，在布局的时候要注意当前元素时相对于那个元素的位置。还有父元素布局可能会影响子元素，如果不是该父元素下所以子元素都同一种效果，尽量分开写样式。

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端基础知识和页面布局练习及总结-2019年3月11号20时00分

2019-03-12 14:16:56