本来早在就要写日记的,但跟风双十一后忙着退货耽误了时间o(╥﹏╥)o,淘宝不如写代码!况且现在淘宝都已经开始思考看到的页面怎么用布局实现了(* ̄︶ ̄)~
今天讲了固定定位position:fixed;学了做完练习之后,对定位的运用算是拨云见日了,所以有点嗨森~
固定定位讲完了,那现在一起复习下三种定位和相对的特性吧~一、
相对定位position:relative;特性:
1.不影响元素本身的特性;
2.不脱离文档流(元素移动之后原始位置会被保留);
3.如果没有设置定位偏移量,对元素本身的特性没有任何影响;
4.提升层级。
二、
绝对定位position:absolute;特性:
1.使内联元素支持设宽高;
2.块标签没有设宽度的时候内容撑开宽度;
3.完全脱离文档流;
4.有定位父级的时候相对定位父级发生偏移,没有定位父级的时候相对document发生偏移;
5.相对定位一般配合绝对定位使用;
6.提升层级。
三、
固定定位position:fixed;特性:
1.使内联元素支持设宽高;
2.块元素没有设宽度的时候内容撑开宽度;
3.完全脱离文档流;
4.相对document发生偏移;
5.提升层级;
6.IE6不支持固定定位。
四、
三种定位使用的场景:固定定位:
始终显示在浏览器可视区域某一个固定位置
相对定位:
需要提升元素层级
子孙元素有绝对定位时,与其配合
绝对定位:
用在内容中某一个装饰性的区域上
今天的课程要求是:1.做下图练习:
2.背诵定位以及相应的特性。
做这个练习的时候用到的知识:
1.盒模型;
2.无序列表(ul的子级只能是li);
3.hover伪类;
4.相对定位relative和绝对定位absolute;
5.透明度opacity;
今天做题过程中出现的问题:
1.浮动父级没有设置高度,忘记清浮动了,导致父级高度塌陷,使用浏览器“审查功能发现错误及时纠正了[要谨记浮动元素的父级一定要清浮动;浮动元素的同级一定要浮动];
2.右侧新闻列表的图片忘记用a标签包裹(已经写进了伪代码但没有用)[做完之后一定要到网页中去看效果然后做相应的调整]。
以下是我今天的练习代码和效果图【因为新闻图上面要加文字,但老师给的是JPG的图,所以自己用了一张网页下载的图】
1.html代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="css/index.css" />
- <!--伪代码:
- 模块容器section#news
- 头部区域header.head
- 标题h3.title
- 导航nav.news-nav
- a*3
- 内容区域div.box
- 左侧div.box-left
- 大图新闻div.big-pic-new
- 大图a.big-pic
- img
- 标题h4.big-pic-title
- 杂项div.big-pic-others
- 电视台a.TV
- 播放量span.big-pic-play
- 评论span。big-pic-comment
- 热点新闻ul.hot-news
- 新闻列表li*4.hot-news-list
- 深度阅读div.deep-reading
- span
- a
- 右侧新闻ul.box-right
- 右侧新闻子项li.box-right-list
- 新闻大图区div.list-pic
- 大图a.list-pic
- img
- 透明背景条div.bg
- 背景条文字a.bg-text
- 新闻标题div.right-list-title
- 其他div.right-list-other
- 播放量span.list-other-play
- 评论量span.list-other-comments
- 新闻子项弹窗div.right-list-popup
- 头部区域h4.popup-tilte
- 内容区域div.popup-content
- 新闻描述article.describe
- a
- 杂项div.content-other
- 播放span.content-other-play
- 评论span.content-other-comments
- 顶踩span.content-other-gototop
- 底部标签footer.tag
- -->
- </head>
- <body>
- <!--模块容器section#news-->
- <section id="news">
- <!--头部区域header.head-->
- <header class="head">
- <!--标题h3.title-->
- <h3 class="title fl">
- <a href="">今日头条</a>
- </h3>
- <!--导航nav.news-nav-->
- <nav class="news-nav fr">
- <a class="fl" href="">热点</a>
- <a class="fl" href="">深度</a>
- <a class="fl mr" href="">青春季</a>
- </nav>
- </header>
- <!--内容区域div.box-->
- <div class="box clearfix">
- <!--左侧div.box-left-->
- <div class="box-left fl">
- <!--大图新闻div.big-pic-new-->
- <div class="big-pic-new">
- <!--大图a.big-pic
- img-->
- <a href="" class="big-pic">
- <img src="img/big-pic.png" alt=""/>
- </a>
- <!--标题h4.big-pic-title-->
- <div class="big-pic-title">
- <a href="">实拍二炮跨区联合演习千里机动发射导弹</a>
- </div>
- <!--杂项div.big-pic-others-->
- <div class="big-pic-others">
- <!--电视台a.TV-->
- <a href="" class="TV fl">安徽卫视</a>
- <!--播放量span.big-pic-play-->
- <span class="big-pic-play fl" >2,974,128</span>
- <!--评论span.big-pic-comment-->
- <span class="big-pic-comment fl" >1804</span>
- </div>
- </div>
- <!--热点新闻ul.hot-news-->
- <ul class="hot-news">
- <!--新闻列表li*4.hot-news-list-->
- <li class="hot-news-list">
- <a href="">[热点]中国将提交东海划界案 大陆架延伸到冲绳海槽</a>
- </li>
- <li class="hot-news-list">
- <a href="">[热点]中国将提交东海划界案 大陆架延伸到冲绳海槽</a>
- </li>
- <li class="hot-news-list">
- <a href="">[热点]中国将提交东海划界案 大陆架延伸到冲绳海槽</a>
- </li>
- <li class="hot-news-list">
- <a href="">[热点]中国将提交东海划界案 大陆架延伸到冲绳海槽</a>
- </li>
- </ul>
- <!--深度阅读div.deep-reading-->
- <div class="deep-reading">
- <span class="fl">深度阅读:</span>
- <a class="fl" href="">军演</a>
- </div>
- </div>
- <!--右侧新闻ul.box-right-->
- <ul class="box-right fl">
- <!--右侧新闻子项li.box-right-list-->
- <li class="box-right-list fl">
- <!--新闻大图区div.list-pic-->
- <div class="list-pic">
- <!--大图a.list-pic -->
- <a href="">
- <img src="img/u=2183226645,816591154&fm=27&gp=0.jpg" alt=""/>
- </a>
- <!--透明背景条div.bg-->
- <div class="bg"></div>
- <!--背景条文字a.bg-text-->
- <a class="bg-text" href="">原拟10月赴华</a>
- </div>
- <!--新闻标题div.right-list-title-->
- <div class="right-list-title">
- <a href="">实拍早教阿姨暴力喂饭</a>
- </div>
- <!--其他div.right-list-other-->
- <div class="right-list-other">
- <!--播放量span.list-other-play-->
- <span class="list-other-play fl">789,535</span>
- <!--评论量span.list-other-comments-->
- <span class="list-other-comments fl">2,284</span>
- </div>
- <!--新闻子项弹窗div.right-list-popup-->
- <div class="right-list-popup">
- <!--弹窗list-popup-content-->
- <div class="list-popup-content">
- <!--头部区域h4.popup-tilte-->
- <h4 class="popup-content-tilte">
- <a href=""><新白发魔女>故地重逢</a>
- </h4>
- <!--新闻描述article.describe-->
- <article class="content-describe">
- 《新白发魔女转》根据梁羽生武侠小所改编。明朝天启四年,广元地区连年饥荒。户部侍郎卓继贤奉太子之命运送粮草前往灾区,行至玉龙…
- </article>
- <!--杂项div.content-other-->
- <div class="content-other clearfix">
- <!--播放span.content-other-play-->
- <span class="content-other-play fl">
- 播放:6,,398,475
- </span>
- <!--评论span.content-other-comments-->
- <span class="content-other-comments fl">
- 评论:8,486
- </span>
- <!--顶踩span.content-other-gototop-->
- <span class="content-other-gototop fl">
- 顶踩:45,236/4,772
- </span>
- </div>
- <!-- 底部标签footer.tags-->
- <footer class="tags">
- <!--节目span.name-->
- <span class="name">
- 节目:
- <a href="">新白发魔女</a>
- </span>
- <!--分类span.type-->
- <span class="type">
- 分类:
- <a href="">电视剧</a>
- </span>
- </footer>
- </div>
- <!--弹窗阴影div.list-popup-shadow-->
- <div class="list-popup-shadow"></div>
- </div>
- </li>
- <!--右侧新闻子项li.box-right-list-->
- <li class="box-right-list fl nomargin">
- <!--新闻大图区div.list-pic-->
- <div class="list-pic">
- <!--大图a.list-pic -->
- <a href="">
- <img src="img/u=2183226645,816591154&fm=27&gp=0.jpg" alt=""/>
- </a>
- <!--透明背景条div.bg-->
- <div class="bg"></div>
- <!--背景条文字a.bg-text-->
- <a class="bg-text" href="">原拟10月赴华</a>
- </div>
- <!--新闻标题div.right-list-title-->
- <div class="right-list-title">
- <a href="">实拍早教阿姨暴力喂饭</a>
- </div>
- <!--其他div.right-list-other-->
- <div class="right-list-other">
- <!--播放量span.list-other-play-->
- <span class="list-other-play fl">789,535</span>
- <!--评论量span.list-other-comments-->
- <span class="list-other-comments fl">2,284</span>
- </div>
- <!--新闻子项弹窗div.right-list-popup-->
- <div class="right-list-popup">
- <!--弹窗list-popup-content-->
- <div class="list-popup-content">
- <!--头部区域h4.popup-tilte-->
- <h4 class="popup-content-tilte">
- <a href=""><新白发魔女>故地重逢</a>
- </h4>
- <!--新闻描述article.describe-->
- <article class="content-describe">
- 《新白发魔女转》根据梁羽生武侠小所改编。明朝天启四年,广元地区连年饥荒。户部侍郎卓继贤奉太子之命运送粮草前往灾区,行至玉龙…
- </article>
- <!--杂项div.content-other-->
- <div class="content-other clearfix">
- <!--播放span.content-other-play-->
- <span class="content-other-play fl">
- 播放:6,,398,475
- </span>
- <!--评论span.content-other-comments-->
- <span class="content-other-comments fl">
- 评论:8,486
- </span>
- <!--顶踩span.content-other-gototop-->
- <span class="content-other-gototop fl">
- 顶踩:45,236/4,772
- </span>
- </div>
- <!-- 底部标签footer.tags-->
- <footer class="tags">
- <!--节目span.name-->
- <span class="name">
- 节目:
- <a href="">新白发魔女</a>
- </span>
- <!--分类span.type-->
- <span class="type">
- 分类:
- <a href="">电视剧</a>
- </span>
- </footer>
- </div>
- <!--弹窗阴影div.list-popup-shadow-->
- <div class="list-popup-shadow"></div>
- </div>
- </li>
- <!--右侧新闻子项li.box-right-list-->
- <li class="box-right-list fl">
- <!--新闻大图区div.list-pic-->
- <div class="list-pic">
- <!--大图a.list-pic -->
- <a href="">
- <img src="img/u=2183226645,816591154&fm=27&gp=0.jpg" alt=""/>
- </a>
- <!--透明背景条div.bg-->
- <div class="bg"></div>
- <!--背景条文字a.bg-text-->
- <a class="bg-text" href="">原拟10月赴华</a>
- </div>
- <!--新闻标题div.right-list-title-->
- <div class="right-list-title">
- <a href="">实拍早教阿姨暴力喂饭</a>
- </div>
- <!--其他div.right-list-other-->
- <div class="right-list-other">
- <!--播放量span.list-other-play-->
- <span class="list-other-play fl">789,535</span>
- <!--评论量span.list-other-comments-->
- <span class="list-other-comments fl">2,284</span>
- </div>
- <!--新闻子项弹窗div.right-list-popup-->
- <div class="right-list-popup">
- <!--弹窗list-popup-content-->
- <div class="list-popup-content">
- <!--头部区域h4.popup-tilte-->
- <h4 class="popup-content-tilte">
- <a href=""><新白发魔女>故地重逢</a>
- </h4>
- <!--新闻描述article.describe-->
- <article class="content-describe">
- 《新白发魔女转》根据梁羽生武侠小所改编。明朝天启四年,广元地区连年饥荒。户部侍郎卓继贤奉太子之命运送粮草前往灾区,行至玉龙…
- </article>
- <!--杂项div.content-other-->
- <div class="content-other clearfix">
- <!--播放span.content-other-play-->
- <span class="content-other-play fl">
- 播放:6,,398,475
- </span>
- <!--评论span.content-other-comments-->
- <span class="content-other-comments fl">
- 评论:8,486
- </span>
- <!--顶踩span.content-other-gototop-->
- <span class="content-other-gototop fl">
- 顶踩:45,236/4,772
- </span>
- </div>
- <!-- 底部标签footer.tags-->
- <footer class="tags">
- <!--节目span.name-->
- <span class="name">
- 节目:
- <a href="">新白发魔女</a>
- </span>
- <!--分类span.type-->
- <span class="type">
- 分类:
- <a href="">电视剧</a>
- </span>
- </footer>
- </div>
- <!--弹窗阴影div.list-popup-shadow-->
- <div class="list-popup-shadow"></div>
- </div>
- </li>
- <!--右侧新闻子项li.box-right-list-->
- <li class="box-right-list fl nomargin">
- <!--新闻大图区div.list-pic-->
- <div class="list-pic">
- <!--大图a.list-pic -->
- <a href="">
- <img src="img/u=2183226645,816591154&fm=27&gp=0.jpg" alt=""/>
- </a>
- <!--透明背景条div.bg-->
- <div class="bg"></div>
- <!--背景条文字a.bg-text-->
- <a class="bg-text" href="">原拟10月赴华</a>
- </div>
- <!--新闻标题div.right-list-title-->
- <div class="right-list-title">
- <a href="">实拍早教阿姨暴力喂饭</a>
- </div>
- <!--其他div.right-list-other-->
- <div class="right-list-other">
- <!--播放量span.list-other-play-->
- <span class="list-other-play fl">789,535</span>
- <!--评论量span.list-other-comments-->
- <span class="list-other-comments fl">2,284</span>
- </div>
- <!--新闻子项弹窗div.right-list-popup-->
- <div class="right-list-popup">
- <!--弹窗list-popup-content-->
- <div class="list-popup-content">
- <!--头部区域h4.popup-tilte-->
- <h4 class="popup-content-tilte">
- <a href=""><新白发魔女>故地重逢</a>
- </h4>
- <!--新闻描述article.describe-->
- <article class="content-describe">
- 《新白发魔女转》根据梁羽生武侠小所改编。明朝天启四年,广元地区连年饥荒。户部侍郎卓继贤奉太子之命运送粮草前往灾区,行至玉龙…
- </article>
- <!--杂项div.content-other-->
- <div class="content-other clearfix">
- <!--播放span.content-other-play-->
- <span class="content-other-play fl">
- 播放:6,,398,475
- </span>
- <!--评论span.content-other-comments-->
- <span class="content-other-comments fl">
- 评论:8,486
- </span>
- <!--顶踩span.content-other-gototop-->
- <span class="content-other-gototop fl">
- 顶踩:45,236/4,772
- </span>
- </div>
- <!-- 底部标签footer.tags-->
- <footer class="tags">
- <!--节目span.name-->
- <span class="name">
- 节目:
- <a href="">新白发魔女</a>
- </span>
- <!--分类span.type-->
- <span class="type">
- 分类:
- <a href="">电视剧</a>
- </span>
- </footer>
- </div>
- <!--弹窗阴影div.list-popup-shadow-->
- <div class="list-popup-shadow"></div>
- </div>
- </li>
- <!--右侧新闻子项li.box-right-list-->
- <li class="box-right-list fl">
- <!--新闻大图区div.list-pic-->
- <div class="list-pic">
- <!--大图a.list-pic -->
- <a href="">
- <img src="img/u=2183226645,816591154&fm=27&gp=0.jpg" alt=""/>
- </a>
- <!--透明背景条div.bg-->
- <div class="bg"></div>
- <!--背景条文字a.bg-text-->
- <a class="bg-text" href="">原拟10月赴华</a>
- </div>
- <!--新闻标题div.right-list-title-->
- <div class="right-list-title">
- <a href="">实拍早教阿姨暴力喂饭</a>
- </div>
- <!--其他div.right-list-other-->
- <div class="right-list-other">
- <!--播放量span.list-other-play-->
- <span class="list-other-play fl">789,535</span>
- <!--评论量span.list-other-comments-->
- <span class="list-other-comments fl">2,284</span>
- </div>
- <!--新闻子项弹窗div.right-list-popup-->
- <div class="right-list-popup">
- <!--弹窗list-popup-content-->
- <div class="list-popup-content">
- <!--头部区域h4.popup-tilte-->
- <h4 class="popup-content-tilte">
- <a href=""><新白发魔女>故地重逢</a>
- </h4>
- <!--新闻描述article.describe-->
- <article class="content-describe">
- 《新白发魔女转》根据梁羽生武侠小所改编。明朝天启四年,广元地区连年饥荒。户部侍郎卓继贤奉太子之命运送粮草前往灾区,行至玉龙…
- </article>
- <!--杂项div.content-other-->
- <div class="content-other clearfix">
- <!--播放span.content-other-play-->
- <span class="content-other-play fl">
- 播放:6,,398,475
- </span>
- <!--评论span.content-other-comments-->
- <span class="content-other-comments fl">
- 评论:8,486
- </span>
- <!--顶踩span.content-other-gototop-->
- <span class="content-other-gototop fl">
- 顶踩:45,236/4,772
- </span>
- </div>
- <!-- 底部标签footer.tags-->
- <footer class="tags">
- <!--节目span.name-->
- <span class="name">
- 节目:
- <a href="">新白发魔女</a>
- </span>
- <!--分类span.type-->
- <span class="type">
- 分类:
- <a href="">电视剧</a>
- </span>
- </footer>
- </div>
- <!--弹窗阴影div.list-popup-shadow-->
- <div class="list-popup-shadow"></div>
- </div>
- </li>
- <!--右侧新闻子项li.box-right-list-->
- <li class="box-right-list fl nomargin">
- <!--新闻大图区div.list-pic-->
- <div class="list-pic">
- <!--大图a.list-pic -->
- <a href="">
- <img src="img/u=2183226645,816591154&fm=27&gp=0.jpg" alt=""/>
- </a>
- <!--透明背景条div.bg-->
- <div class="bg"></div>
- <!--背景条文字a.bg-text-->
- <a class="bg-text" href="">原拟10月赴华</a>
- </div>
- <!--新闻标题div.right-list-title-->
- <div class="right-list-title">
- <a href="">实拍早教阿姨暴力喂饭</a>
- </div>
- <!--其他div.right-list-other-->
- <div class="right-list-other">
- <!--播放量span.list-other-play-->
- <span class="list-other-play fl">789,535</span>
- <!--评论量span.list-other-comments-->
- <span class="list-other-comments fl">2,284</span>
- </div>
- <!--新闻子项弹窗div.right-list-popup-->
- <div class="right-list-popup">
- <!--弹窗list-popup-content-->
- <div class="list-popup-content">
- <!--头部区域h4.popup-tilte-->
- <h4 class="popup-content-tilte">
- <a href=""><新白发魔女>故地重逢</a>
- </h4>
- <!--新闻描述article.describe-->
- <article class="content-describe">
- 《新白发魔女转》根据梁羽生武侠小所改编。明朝天启四年,广元地区连年饥荒。户部侍郎卓继贤奉太子之命运送粮草前往灾区,行至玉龙…
- </article>
- <!--杂项div.content-other-->
- <div class="content-other clearfix">
- <!--播放span.content-other-play-->
- <span class="content-other-play fl">
- 播放:6,,398,475
- </span>
- <!--评论span.content-other-comments-->
- <span class="content-other-comments fl">
- 评论:8,486
- </span>
- <!--顶踩span.content-other-gototop-->
- <span class="content-other-gototop fl">
- 顶踩:45,236/4,772
- </span>
- </div>
- <!-- 底部标签footer.tags-->
- <footer class="tags">
- <!--节目span.name-->
- <span class="name">
- 节目:
- <a href="">新白发魔女</a>
- </span>
- <!--分类span.type-->
- <span class="type">
- 分类:
- <a href="">电视剧</a>
- </span>
- </footer>
- </div>
- <!--弹窗阴影div.list-popup-shadow-->
- <div class="list-popup-shadow"></div>
- </div>
- </li>
- </ul>
- </div>
- </section>
- </body>
- </html>
- /*css reset*/
- body,h3,h4{
- margin:0;
- }
- ul{
- margin:0;
- padding:0;
- list-style: none;
- }
- img{
- vertical-align:top;
- border:none;
- }
- a{
- color: #343434;
- text-decoration: none;
- }
- /*tools*/
- .clearfix{
- zoom:1;
- }
- .clearfix:after{
- content:"";
- display: block;
- clear: both;
- }
- .fl{
- float: left;
- }
- .fr{
- float: right;
- }
- /*main*/
- body{
- font:12px arial,"微软雅黑";
- }
- #news{
- padding:10px 0 0 14px;
- width:601px;
- height:447px;
- margin:20px auto;
- }
- #news .head{
- padding-left:10px;
- height:30px;
- line-height:30px;
- font-size:14px;
- margin-bottom: 14px;
- background-color: #eaf9fe;
- }
- #news .head .title{
- color:#2d3538;
- }
- #news .news-nav a{
- color:#60686a;
- margin-right:11px;
- }
- #news .news-nav .mr{
- margin-right:10px;
- }
- #news .box .box-left{
- width:290px;
- margin-right:24px;
- }
- #news .box-left .big-pic-new{
- margin-bottom: 3px;
- }
- #news .big-pic-new .big-pic-others,
- #news .big-pic-new .big-pic-title{
- height:23px;
- line-height:23px;
- }
- #news .big-pic-new .big-pic-title{
- font-size:14px;
- font-weight: bold;
- }
- #news .big-pic-new .big-pic{
- display: block;
- font-size:14px;
- margin-bottom: 4px;
- }
- #news .big-pic-new .big-pic-others{
- }
- #news span,
- #news .list-popup-content .content-describe{
- color: #a69490;
- }
- #news .big-pic-others .TV{
- padding-left:19px;
- background: url(../img/ico-tv.png) no-repeat 0 4px;
- margin-right: 13px;
- }
- #news .big-pic-others .big-pic-play{
- padding-left:18px;
- margin-right: 7px;
- background: url(../img/ico-play.png) no-repeat 0 6px;
- }
- #news .big-pic-others .big-pic-comment{
- padding-left:20px;
- background: url(../img/ico-commtent.png) no-repeat 0 6px;
- }
- #news .box-left .hot-news{
- margin-bottom: 5px;
- }
- #news .hot-news .hot-news-list,
- #news .box-left .deep-reading,
- .box-right-list .right-list-popup .list-popup-content{
- height:20px;
- line-height:20px;
- }
- #news .hot-news .hot-news-list{
- padding-left:6px;
- background: url(../img/ico-list-style.png) no-repeat 0 8px;
- }
- #news .box .box-right{
- width:285px;
- }
- #news .box-right .box-right-list{
- position: relative;
- width:128px;
- margin-right:28px;
- margin-bottom: 8px;
- }
- #news .box-right .nomargin{
- margin-right:0;
- }
- #news .list-pic img{
- width:128px;
- height:82px;
- }
- #news .box-right-list .list-pic{
- position: relative;
- margin-bottom: 6px;
- }
- #news .list-pic .bg,
- #news .list-pic .bg-text{
- position: absolute;
- left: 0;
- bottom: 0;
- height:17px;
- width:100%;
- line-height:17px;
- }
- #news .list-pic .bg{
- background-color: black;
- opacity: .5;
- }
- #news .list-pic .bg-text{
- padding-left: 1px;;
- color:#ffffff;
- z-index: 1;
- background:url(../img/list-pic-bg.png) no-repeat 98px 0;
- }
- #news .box-right-list .right-list-title,
- #news .box-right-list .right-list-other{
- padding-left: 1px;
- height:19;
- line-height:19px;
- }
- #news .right-list-other .list-other-play{
- padding-left:17px;
- margin-right: 2px;
- background:url(../img/ico-play.png) no-repeat 1px 3px;
- }
- #news .right-list-other .list-other-comments{
- padding-left:17px;
- background:url(../img/ico-commtent.png) no-repeat 0 3px;
- }
- #news .box-right-list .right-list-popup{
- position: absolute;
- left: 138px;
- top:-68px;
- display: none;
- }
- #news .box-right-list:hover .right-list-popup{
- display: block;
- }
- #news .box-right-list:hover .right-list-other .list-other-comments{
- display: none;
- }
- #news .right-list-popup .list-popup-content{
- position: absolute;
- top:0;
- left: 0;
- z-index: 2;
- width:252px;
- height:188px;
- padding: 8px 17px 0 9px;
- border:1px solid #909090;
- background-color: #ffffff;
- }
- #news .right-list-popup .list-popup-shadow{
- position: absolute;
- top:7px;
- left: 7px;
- opacity: .7;
- z-index: 1;
- width:280px;
- height:198px;
- background-color: #bfbfbf;
- }
- #news .right-list-popup .popup-content-tilte{
- height:22px;
- line-height: 22px;
- font-size: 14px;
- }
- #news .popup-content-tilte a{
- color: #004bcb;
- }
- #news .list-popup-content .content-describe{
- margin-bottom: 5px;
- }
- #news .list-popup-content .content-other{
- margin-bottom: 5px;
- }
- #news .content-other span{
- width:121px;
- }
- #news .content-other .content-other-play{
- margin-right: 9px;
- }
- #news .tags .name{
- margin-right: 20px;
- }
- #news .name a{
- color: #134baa;
- }
- #news .name span{
- color:#fefefe;
- }
3.效果图[老师给的图片是JPG格式,不能直接用,就用了自己下载的图哦]
今天讲固定定位的时候,又涉及到锚点的相关知识,自查对锚点的印象太浅,又复习下整个a超链接的内容
a超链接[anchor],把笔记和整章的内容看了一遍,终于记住了锚点怎么用,明天还得再看一遍,以加深影响
来源: http://www.qdfuns.com/notes/48074/b00ecb1f86a14e3269427adbb90a69c5.html