简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

Morning的博客
Morning的博客原创
2019年03月15日 15:07:02788浏览

第四节课内容总结如下：

CSS中的定位(Position)属性允许你对元素进行定位：(fixed/relative/absolute)

  • fixed:元素的位置相对于浏览器窗口是固定位置; eg：position: fixed;top:20px ;left:40px;脱离文档流，固定在页面上不随页面滚动而滚动

  • relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块;

  • absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块。特点：绝对定位使元素的位置与文档流无关，因此不占据空间。子绝父相：如果子元素使用了绝对定位，通常父元素需使用相对定位，使子元素的位置更灵活

  • z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效。数字越大层级越高

伪选择器:hover：当鼠标移上该元素时会显示的效果

以下为作业部分，仿优酷导航条

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

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

运行实例 »

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

结果页面如下所示：

895A1OY5D$]$E~63BCNUCB3.jpg

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

上一条：3月12日表单及CSS样式练习下一条：优酷首页顶部菜单布局
html、css
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多