使用了这一周所学的知识,关键是定位(相对定位,绝对定位.),练习了浮动的知识点. hover事件的触发,使用display:none black来控制元素的隐藏于显示,通过z-index来控制元素的层级显示,边框的使用以及禁止换行,超出使用...来代替,练习了元素的属性见的相互转换(块级元素 行内元素 行内块元素)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="icon" href="static/images/1.ico"> <!-- 引入字体库 --> <link rel="stylesheet" href="static/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/style.css" charset="utf-8"> <title>优酷-这世界很酷</title> </head> <body> <!-- 页面头部 --> <div class="header pr"> <img src="static/images/b1.png" alt="轮播图背景"height="420px"width="100%"> <a href="#"> <abbr title="Youku 优酷"><img src="static/images/logo.png" alt="logo" class="logo_pa"></abbr></a> <!-- 轮播图 <--></--> <div class="h_imgs"> <img src="static/images/d1.jpg" alt="都挺好"height="420px" width="100%"> </div> <form class="pr" action="index.html" method="post"> <input type="text" name="" value="" class=""> <button type="button" name="button"class="s_butt">搜全网</button> </form> <!-- 右侧导航条与图标 --> <div class="fonts pr"> <ul class="d_pa"> <li class="lf"><a href="#" class="yel d_yellow"> <i class="fa fa-diamond fa-2x"></i><br>vip</a></li> <li class="lf d_padd"><a href="#"class="d_blue"><i class="fa fa-feed fa-2x"></i><br>订阅</a></li> <li class="lf d_padd"> <a href="#"class="d_blue pr"> <i class="fa fa-clock-o fa-2x"> </i><br>记录 </a> <div class="d_box2"> <div class="d_xjt"></div> <div class="d_padd_top d_padd_b"> <form action=""> <button type="button" name="button">登录</button><span class="font_b"> 同步各端记录</span> </form> </div> <div class="d_box3 d_padd_top"> <img src="static/images/gk1.png" alt="观看记录"width="80px"height="80px"><br> 您暂时没有观看记录哟~ </div> </div> </li> <li class="lf d_padd"><a href="#"class="d_blue"><i class="fa fa-upload fa-2x"></i><br>上传</a></li> <li class="lf d_padd"><a href="#"class="d_blue"><i class="fa fa-television fa-2x"></i><br>客户端</a></li> <li class="lf d_img"><a href="#"><img src="static/images/80.png" alt=""width="40px"height="40px"></a></li> </ul> <div class="clear"></div> </div> <div class="l_box1"> <div class="l_box2"> <ul> <li><a href=""><span>这!就是原创:</span>方言摇滚引老肖王嘉尔蹦迪</a></li> <li><a href=""><span>乡村爱情11:</span>宋晓峰!遭暴打</a></li> <li><a href=""><span>王牌对王牌:</span>天龙八部主演感人重聚</a></li> <li><a href=""><span>以团之名:</span>6进3公演超燃来袭</a></li> <li><a href=""><span>都挺好:</span>石天冬救美出糗</a></li> <li><a href=""><span>只为遇见你:</span>于直再次深情表白高洁</a></li> <li><a href=""style="border:none"><span>一吻定情:</span>少女心!林允甜蜜告白王大陆</a></li> </ul> </div> </div> </div> <!-- 主图下面导航条 --> <div class="boxf"> <div class="fonta x_box1 lf"> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </div> <div class="fonta x_box1 lf x_bord"> <a href="">少儿</a> <a href="">来疯</a> <a href="">音乐</a> <a href="">搞笑</a> <a href="">直播</a> <a href="">片库</a> </div> <div class="fonta x_box1 lf x_bord"> <a href="">纪实</a> <a href="">公益</a> <a href="">体育</a> <a href="">汽车</a> <a href="">科技</a> <a href="">财经</a> </div> <div class="fonta x_box1 lf x_bord"> <a href="">文化</a> <a href="">旅游</a> <a href="">时尚</a> <a href="">亲子</a> <a href="">教育</a> <a href="">游戏</a> </div> <div class="fonta x_box2 lf x_bord"> <a href="">资讯</a><br> <a href="">VR</a> </div> <div class="x_box3 fonta lf x_bord"> <a href=""><i class="fa fa-file-video-o fa-2x"></i><br>优酷片库</a> <a href=""><i class="fa fa-bar-chart-o fa-2x"></i><br>指数排行</a> <a href=""><i class="fa fa-gift fa-2x"></i><br>大鱼号精选</a> <a href=""><i class="fa fa-desktop fa-2x"></i><br>下载应用</a> </div> <div class="clear"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/* 去除边框效果 */
*{
margin: 0;
padding: 0;
}
/* 去除a连接效果 */
a{
text-decoration: none;
color: #666666;
}
/* 清除浮动 */
.clear{
clear: both;
}
/* 去除li标签格式 */
li{
list-style: none;
}
/* 设置头部div宽高背景 */
.header{
width: 100%;
}
/* 轮播图设置 */
.h_imgs{
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/* 绝对定位 position: relative; */
.pr{
position: relative;
}
/* logo图片相对定位 */
.logo_pa{
position: absolute;
top: 25px;
left: 75px;
}
/* form表单text */
form input{
width: 330px;
height: 40px;
color: #fff;
border-radius: 30px;
border: none;
outline: none;
position: absolute;
top:-410px;
left:485px;
background: rgba(255, 255, 255, 0.3);
font-size: 15px;
}
/* button 搜全网按钮设置 */
.s_butt{
width: 83px;
height: 40px;
color: #fff;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border: none;
background: #1F82FC;
position: absolute;
top: -410px;
left:770px;
}
/* 右侧导航条vip颜色 */
.yel{
color: #F1D45F;
font-weight: bold;
}
/* 统一字体 */
.fonts
{
font-size: 12px;
text-align: center;
}
/* 左浮动 */
.lf{
float: left;
}
/* 导航条位置 */
.d_pa{
position: absolute;
top:-410px;
left:973px;
}
/* 导航条间距 */
.d_padd{
padding-left: 25px;
color: #AAAAB0;
}
/* 导航条图片间距 */
.d_img{
padding-left: 40px;
}
/* 导航条鼠标移入字体变黄 */
.d_yellow:hover{
color:yellow;
}
/* 导航条鼠标移入字体变蓝 */
.d_blue:hover{
color: #35B8F1;
}
/* 导航条记录按钮div box2 */
.d_box2{
width: 330px;
height: 190px;
background: #fff;
display: none;
position: absolute;
top: 50px;
left:-45px;
z-index: 2;
}
/* 内部button按钮 设置 */
.d_box2 button{
width: 60px;
height: 30px;
border-radius: 15px;
background: #1F82FC;
color: #fff;
border: none;
}
/* 黑色字体 */
.font_b{
color: black;
}
/* 上边距 */
.d_padd_top{
padding-top: 15px;
}
/* 下边距 */
.d_padd_b{
padding-bottom: 15px;
}
/* 内部div设置box3 */
.d_box3{
border-top: 1px solid #EBEBEB;
}
/* 小箭头 */
.d_xjt{
width: 0;
height: 7px;
border: 7px solid ;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -20px;
left: 150px;
}
/* 鼠标移入显示div */
.d_pa li:hover .d_box2 {
display: block;
}
/* 右侧轮播图设置 */
.l_box1{
width: 220px;
height: 335px;
background:rgba(92, 95, 98, 0.7);
position: absolute;
top: 70px;
right: 75px;
}
/* 右侧轮播图内部div */
.l_box2{
width: 180px;
height: 310px;
padding-left: 20px;
padding-top: 5px;
font-size: 15px;
}
/* 轮播图a连接设置 */
.l_box2 ul li a{
display: block;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid rgba(80, 80, 80, 0.2);
padding: 10px 0px;
color: #BEC0C0;
}
/* a连接触发事件 span设置 */
.l_box2 ul li a:hover span{
font-size: 18px;
display: block;
color: #fff;
}
/* a连接字体 间距 */
.l_box2 ul li:hover a{
color: #fff;
padding: 3px 0px;
}
/* 主图下导航条设置 */
.x_box1{
width: 180px;
height: 50px;
}
/* 内部a连接 */
.x_box1 a{
padding-left: 18px;
line-height: 25px;
}
/* 设置大div宽度 */
.boxf{
width: 1200px;
margin: 10px auto;
}
/* 设置字体 全局基本使用此字体 */
.fonta{
font-size: 15px;
color: #666666;
}
/* 设置导航条间隔线 */
.x_bord{
border-left: 2px solid #F3F3F3;
}
/* 导航条内部小div 资讯 vr*/
.x_box2{
width: 75px;
}
/* 设置内部a连接 */
.x_box2 a{
padding-left: 21px;
line-height: 25px;
}
/* 设置最后带图标导航条div */
.x_box3{
width: 375px;
line-height: 25px;
}
/* 内部a连接 */
.x_box3 a{
display: block;
float: left;
padding-left: 30px;
text-align: center;
}
/* 触发效果 导航条所有a连接 鼠标移动上变蓝 */
.boxf a:hover{
color: #35B8F1;
}
/* 图标不变色 */
.x_box3 a:hover i{
color: #666666;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
通过练习熟悉了前端元素与css样式表的操作,对以前掌握十分模糊的浮动 定位 块级 行内等元素的相互转换,各种特点有了明确的认识和了解,现在可以在不看老师代码的情况下 做出作业内容,速度有待提高 感谢老师