Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 第四节课定位/伪选择器及优酷导航条布局练习及总结-php培训五期线上班
Blogger Information
Blog 7
fans 1
comment 2
visits 6142
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第四节课定位/伪选择器及优酷导航条布局练习及总结-php培训五期线上班
Morning的博客
Original
888 people have browsed it

第四节课内容总结如下：

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

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

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post