主要运用绝对定位,相对定位功能,将页面logo 与搜索条 button按钮更改样式并放置妥当, 右侧导航条没有做完,但是大意已经明白 ,css使用的外联样式,试过将边框加上向内阴影,但是效果不理想 ,应该是层级关系导致,继续努力尽量让页面趋于完美
实例
<!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="stylesheet" href="static/css/style.css" type="text/css"> <link rel="stylesheet" href="static/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="icon" href="static/images/1.ico"> <title>优酷-这世界很酷</title> <style type="text/css"> </style> </head> <body> <div class="header rel"> <div class="m box2 rel"> <img src="static/images/logo.png" alt="" class="abs"> <a href="#" class=""> <img src="static/images/11.jpg" alt="" class=""> </a> <form class="" action="index.html" method="post" class="rel"> <input type="text" name="" value="" class="fo abs1"> <button type="button" name="button" class="butt abs2">搜全网</button> </form> </div> <div class="name1 abs3"> <i class="fa fa-ravelry fa-2x" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> </div> </div> <!-- 旧课程 --> <div class="m box1"> <div> <p class="heads tops">正在热播</p> </div> <div class="tops" > <ul> <li class="l"> <a href=""> <img src="static/images/a.jpg" alt="第一幅图" class="img1"><br><abbr title="瞰中国:宁夏">瞰中国:宁夏</abbr></a><br> <small>低调的宁夏 美了四季</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/b.jpg" alt="第二幅图" class="img1"><br><abbr title="大冰小将 第一季">大冰小将 第一季</abbr></a><br> <small>千玺雷佳音冰雪大狂欢</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/c.jpg" alt="第三幅图" class="img1"><br><abbr title="海王">海王</abbr></a><br> <small>温子仁开启“海鲜盛宴”</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/d.jpg" alt="第四幅图" class="img1"><br><abbr title="德云社己亥年开箱庆典 2019">德云社己亥年开箱庆典 2019</abbr></a><br> <small>明星阵容19年开箱演出</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/e.jpg" alt="第五幅图" class="img1"><br><abbr title="偶像">偶像</abbr></a><br> <small>独立音乐系列纪录长片</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/e.jpg" alt="第六幅图" class="img1"><br><abbr title="悠哉日常大王剧场版:假期活动">悠哉日常大王剧场版:假期活动</abbr></a><br> <small>暑假就是要出去玩呀</small><br> </li> </ul> <div class="clear"></div> </div> <div class="heads tops"><span>剧集 ></span> <span class="name"> 最新 大陆剧 日韩剧 港台剧 英美剧</span></div> <div class="l tops"> <a href=""> <img src="static/images/tv.jpg" alt="大图" class="big"><br><abbr title="逆流而上的你·爆笑">逆流而上的你·爆笑</abbr></a><br> <small>新晋辣妈萌爸！潘粤明马丽咸鱼夫妻带娃逆袭！</small><br> </div> <div class="tops"> <ul> <li class="l le"> <a href=""> <img src="static/images/tv1.jpg" alt="剧小图1" class="img2"><br><abbr title="都挺好">都挺好</abbr></a><br> <small>姚晨郭京飞陷亲情旋涡</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv2.jpg" alt="剧小图2" class="img2"><br><abbr title="乡村爱情11">乡村爱情11</abbr></a><br> <small>刘能赵四争C位</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv1.jpg" alt="剧小图3" class="img2"><br><abbr title="老中医">老中医</abbr></a><br> <small>陈宝国冯远征许晴弘扬医道</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv4.jpg" alt="剧小图4" class="img2"><br><abbr title="国宝奇旅">国宝奇旅</abbr></a><br> <small>刘烨袁姗姗携手护国宝</small><br> </li> </ul> </div> <div> <ul> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图5" class="img2"><br><abbr title="重耳传奇">重耳传奇</abbr></a><br> <small>春秋版“王子历险记”</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图6" class="img2"><br><abbr title="春暖花又开">春暖花又开</abbr></a><br> <small>姚芊羽李建上演新农村创业</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图7" class="img2"><br><abbr title="只为遇见你·甜蜜开播">只为遇见你·甜蜜开播</abbr></a><br> <small>霸气帅总撩动你的少女心</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图8" class="img2"><br><abbr title="小女花不弃">小女花不弃</abbr></a><br> <small>林依晨张彬彬苏甜来袭</small><br> </li> </ul> </div> <div class="clear"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS外联样式表
实例
/* 清除内外边距 */
*{
margin: 0;
padding: 0;
}
/* 清除li标签格式 */
li{
list-style: none;
}
/* 清除a标签格式 设置字体 */
a{
text-decoration: none;
color: #333333;
}
/* abbr样式清除 设置字体 */
abbr{
text-decoration:none;
font-size: 15px;
}
.box1{
width: 1200px;
}
/* 设置电影名字体 */
.name{
font-size: 15px;
}
/* 设置清除浮动 */
.clear{
clear: both;
}
/* 头文字 */
.heads{
font-size: 25px;
color: #333333;
}
/* 上边距 */
.tops{
margin-top: 20px;
}
/* margin居中 */
.m{
margin: 0 auto;
}
/* 热播区图片大小设置 */
.img1{
width: 190px;
height: 288px;
}
/* small字体颜色设置 */
small{
color: #999999;
}
/* 设置左浮动 */
.l{
float: left;
}
/* 设置左边距 */
.le{
padding-left: 10px;
}
/* 剧集区大图设置 */
.big{
width: 395px;
height: 280px;
}
/* 剧情小图尺寸 */
.img2{
width: 190px;
height: 110px;
}
/* 头部div样式 */
.header{
height: 520px;
background: #A83736;
width: 100%;
}
/* 图片div */
.box2{
width: 1667px;
}
/* 相对定位 relative */
.rel{
position:relative;
/* top: 24px;
left: 182px; */
}
/* 绝对定位 absolute*/
.abs{
position: absolute;
top: 24px;
left: 102px;
}
/* 搜索条 */
.fo{
width: 475px;
height: 40px;
border-radius: 50px;
border: none;
font-size: 17px;
line-height: 40px;
color: #fff;
background: #C19696;
outline: none;
}
/* buttom按钮 */
.butt{
width: 80px;
height: 40px;
color: #F3EA95;
background: #B30702;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: none;
outline: none;
}
/* 搜索条绝对定位 */
.abs1{
position: absolute;
top: 20px;
left: 602px;
}
.abs2{
position: absolute;
top: 20px;
left: 1002px;
}
/* 设置右侧导航栏间距 */
.le1{
padding-left: 20px;
}
/* 导航条字体 */
.name1{
font-size: 10px;
color: #A59FAA;
}
/* 导航条绝对定位 */
.abs3{
position: absolute;
top: 20px;
left: 1402px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
我的笔记
2019-3-14
04:Position定位,.hover伪选择器,
4-1:css中的定位属性允许对元素进行定位(fixed/relative/absolute)
4-2:fixed:元素的位置相对于浏览器窗口是固定位置 如何都不会变
例:.fix{position:fixed;top:20px;left:40px;}
4-3:relative:相对定位元素的定位是相对其自身正常位置,相对定位元素经常被用来作为绝对定位元素的容器块(也就是参照物)
例:.rel{position:relative;}如果不给上下左右属性,元素是不会动的,依旧会按照自身原本的位置存在
4-4:absolute:绝对定位的元素的位置相对于最近的已经定位的父级元素,如果元素没有已定位的父元素,那么它的位置相对于初始包含块(一般是body),特点:绝对定位使元素的位置与文档流无关,因此不占据空间,飘着
例:.a{position:absolute;left:300px;}
4-5:z-index设置元素的堆叠顺序,只有结合固定定位才有效果 默认值是1,必须是整数,可以为负数
4-6:关于元素的定位,子绝父相(子元素要做绝对定位,父元素就要做相对定位)
4-7:.hover伪选择器,鼠标移上移除效果
例a:hover{font-weight:bold;text-decoration:underline}//鼠标移上字体加粗 加上下划线
总结:以前定位十分迷糊,通过老师讲课,慢慢明白了定位的作用于区别,在作业中,完全脱离老师的代码,对照原网页,自己能写出来,但是速度与个别问题还需要多加练习.