css 图标定位二三事

来源：互联网发布：jsp 获取手机mac地址编辑：程序博客网时间：2024/04/29 17:08

</pre><pre>

<!doctype html><html><head><meta charset="utf-8"><title>图标定位二三事</title><style>body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }body, h3, h5 { margin: 0; }img { border: 0 none; vertical-align: bottom; }.l { float: left; }.r { float: right; }.constr { width: 1200px; margin-left: auto; margin-right: auto; }.header { background-color: #2A2C2E; }.nav { height: 60px; }.nav-list { float: left; font-size: 14px; font-weight: 400; }.nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }.nav-a:hover { color: #fff; }.course { padding-top: 10px; }.course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }.course-list-img { background-color: #6396F1; }.course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }.course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }.icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }.icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }</style></head><body><div class="header">    <div class="constr">        <div class="nav">            <h3 class="nav-list">                <a href="http://www.imooc.com/course/list" class="nav-a">课程</a>            </h3>            <h3 class="nav-list">                <a href="http://www.imooc.com/wenda" class="nav-a">问答</a>            </h3>            <h3 class="nav-list">                <a href="http://www.imooc.com/seek/index" class="nav-a">                    求课<i class="icon-hot"></i>                </a>            </h3>        </div>    </div></div><div class="main">    <div class="constr">        <div class="course">            <a href="http://www.imooc.com/view/121" class="course-list">                <div class="course-list-img">                    <span class="icon-recom">推荐</span>                    <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--                    --><i class="icon-vip">vip</i>                </div>                <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>                <div class="course-list-tips">                    <span class="l">已完结</span>                    <span class="r">3514人学习</span>                </div>            </a>        </div>    </div></div></body></html>

0 0