您的位置：首页 > Web前端 > CSS

css3仿QQ网页播放器及分享功能实现

2015-06-06 12:53 671 查看

css3仿QQ网页播放器及分享功能实现

<!doctype html>

<html lang="en">

<head>



<meta charset="UTF-8">



<title>标题</title>

<meta name="Keywords" content="关键字">

<meta name="Description" content="描述">



<style type="text/css">

/*css样式里面注释符 px像素*/

*{margin:0px;/*外边距*/ padding:0px;/*内边距*/}/* * 通配符代表所有的标签 */

body{background:url("img/public-bg9.jpg");/*背景图 url 图片地址*/}

span{display:block; float:left;}/*span是行内元素要设置宽度和高度就必须给变属性*/

.music{width:680px;/*宽度 */ height:420px;/*高度 */ /*background:#66ffff;背景颜色 */ margin:120px auto; /*auto 自适应盒子水平居中*/}

    .cont{height:320px;/*高度 */ }

.cont .contleft{background:#cccccc;width:248px; height:300px; float:left; /*浮动*/}

.cont .contleft img{margin:8px 4px;}

.cont .contright{ width:400px;height:300px; float:right; /*浮动*/}

.cont .contright h1{color:#FFFFFF;/*文字颜色*/ line-height:40px; /*文字行间距*/}

.cont .contright h2{color:#FFFFFF; line-height:40px;}

.cont .contright p{color:#B2B2B2; line-height:24px; font-size:14px;/*设置文字字体大小*/}

.bottom .circle{width:60px;height:60px; border:2px solid #FFFFFF;/*边框*/ margin:10px; float:left; border-radius:30px;/*css3 圆*/}

/*制作小三角*/

.triangleLeft{width:0px; height:0px;border-Right: 30px solid #FFF;border-top: 25px solid transparent; border-bottom: 25px solid transparent; transform:scale(0.6,0.7);/*缩放*/}

.pre1{margin:5px -5px 0px 4px;/*上右下左*/}

.pre2{margin:5px 0px 0px -8px;/*上右下左*/}

.triangleRight{width:0px; height:0px;border-Left: 30px solid #FFF;border-top: 25px solid transparent; border-bottom: 25px solid transparent; transform:scale(0.6,0.7);/*缩放*/}

.next1{margin:5px 0px 0px 8px;/*上右下左*/}

.next2{margin:5px -5px 0px -12px;/*上右下左*/}

.pause{width:10px; height:35px; background:#ffffff;}

.pause1{margin:15px 5px 0px 15px;}

.pause2{margin:15px 10px 0px 5px;}

.circle:hover{box-shadow:0px 0px 15px rgba(255,255,255,0.6)/*css3阴影*/}/*鼠标经过效果*/

.share{ float:left;margin:25px 15px; }

</style>

</head>



<body>



<div class="music">

  <div class="cont">

    <div class="contleft">

    

    <img src="img/115663190.jpg"/>

    </div>

    <div class="contright">

    <h1>Grenade</h1>

    <p>《Doo-Wops & Hooligans》</p>

    <h2>Bruno Mars</h2>

    <p>Bruno Mars </p>

    <p>Easy come Easy go</p>

    <p>That's just how you live oh</p>

    <p>Take take take it all</p>

    <p>But you never give,</p>

    <p>Should of known you were trouble</p>

    <p>From the first kiss had your eyes wide open,</p>

    <p>Why were they open? </p>

    </div>

  </div>

  <div class="bottom">

   <div class="circle">

    <span class="triangleLeft pre1"></span>

    <span class="triangleLeft pre2"></span>

   </div>

   <div class="circle">

    <span class="pause pause1"></span>

    <span class="pause pause2"></span>

   </div>

   <div class="circle">

    <span class="triangleRight next1"></span>

    <span class="triangleRight next2"></span>

   </div>

   <div class="share">

   <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到腾讯微博" href="#" class="bds_tqq"
data-cmd="tqq"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到百度相册" href="#" class="bds_bdxc" data-cmd="bdxc"></a><a title="分享到腾讯朋友" href="#" class="bds_tqf" data-cmd="tqf"></a></div>

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","weixin","bdxc","tqf"],"viewText":"123","viewSize":"32"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","weixin","bdxc","tqf"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new
Date()/36e5)];</script>

   </div>

  <div>

</div>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航