<html>
<head>
<title>CSS3 Tencent QQ Logo</title>
<link rel="stylesheet" type="text/css" href="css3-tencent-QQ-logo.css">
</head>
<body>
<div id="wrapper">
<div class="head">
<div class="left eye">
<div class="innerLeftEye"><!--::after--></div>
</div>
<div class="right eye">
<div class="innerRightEye">
<div class="fix">
<div class="fixCricle1"></div>
<div class="fixCricle2"></div>
</div>
</div>
</div>
<div class="mouthWrapper">
<div class="mouthTop"></div>
<div class="mouthBottom"></div>
<div class="lips"></div>
</div>
</div>
<div class="body">
<div class="bodyOuter"></div>
<div class="bodyInner"></div>
<div class="scarf">
<div class="scarfLeftFold"></div>
<div class="scarfRightFold"></div>
</div>
<div class="scarfEnd"><!--::after--></div>
<div class="leftHand"></div>
<div class="rightHand"></div>
</div>
<div class="foot">
<div class="leftFoot"><!--::after--></div>
<div class="rightFoot"><!--::after--></div>
</div>
</div>
</body>
</html> body{
padding: 0
margin: 0
}
#wrapper {
position: absolute
width: 400px
height: 450px
left: 35%
top: 20%
background-color: #9c80fb
}
.head{
position: absolute
z-index: 2
top: 0
left: 80px
width: 227px
height: 199px
background-color: black
border-top-left-radius: 117px 117px
border-top-right-radius: 117px 117px
border-bottom-left-radius: 100px 100px
border-bottom-right-radius: 102px 100px
behavior: url(ie-css3.htc) /* IE6+*/
}
.eye{
width: 44px
height: 66px
border: 1px solid #000
border-radius: 50% 50%
behavior: url(ie-css3.htc) /* IE6+*/
position: absolute
background: #fff
}
.left.eye{
top: 57px
left: 50px
}
.right.eye{
top: 57px
left: 123px
}
.innerLeftEye{
position: absolute
top: 20px
left: 20px
width: 18px
height: 24px
border-radius:50%
behavior: url(ie-css3.htc) /* IE6+*/
background-color: black
border: 1px solid black
}
.innerLeftEye:after{
content: ""
position: absolute
top: 6px
left: 9px
width: 6px
height: 8px
border-radius: 50%
behavior: url(ie-css3.htc) /* IE6+*/
background-color: white
}
.innerRightEye{
position: absolute
top: 20px
left: 8px
width: 16px
height: 19px
border-radius: 50%
background-color: black
border: 1px solid black
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.73)
behavior: url(ie-css3.htc) /* IE6+*/
}
.fix{
content: ""
position: absolute
top: 5px
left: 0
width: 16px
height: 19px
border-radius: 50%
behavior: url(ie-css3.htc) /* IE6+*/
background-color: white
}
.fixCricle1{
position: absolute
top: 5px
left: -1px
width: 2px
height: 4px
border-radius: 50%
background-color: black
behavior: url(ie-css3.htc) /* IE6+*/
}
.fixCricle2{
position: absolute
top: 5px
left: 15px
width: 2px
height: 4px
border-radius: 50%
behavior: url(ie-css3.htc) /* IE6+*/
background-color: black
}
.mouthWrapper{
position: absolute
top: 125px
left: 31px
}
.mouthTop {
width: 158px
height: 34px
position: absolute
z-index:3
border: 1px solid #FFA600
background: #FFA600
top: 0
left: 0
border-top-left-radius: 45% 34px
border-top-right-radius: 45% 34px
behavior: url(ie-css3.htc) /* IE6+*/
}
.mouthBottom{
width: 158px
height: 18px
position: absolute
z-index: 1
border: 1px solid #FFA600
background: #FFA600
top: 35px
left: 0
border-bottom-left-radius: 45% 24px
border-bottom-right-radius: 45% 24px
behavior: url(ie-css3.htc) /* IE6+*/
}
.lips{
width: 126px
height: 34px
position: absolute
z-index: 2
background-color: black
top: 25px
left: 17px
border-bottom-left-radius: 50% 50%
border-bottom-right-radius: 50% 50%
behavior: url(ie-css3.htc) /* IE6+*/
}
.lips:after{
content: ""
width: 132px
height: 34px
position: absolute
background-color: #FFA600
top: -6px
left: -3px
border-bottom-left-radius: 50% 50%
border-bottom-right-radius: 50% 50%
behavior: url(ie-css3.htc) /* IE6+*/
}
.body {
z-index: 1
width: 400px
height: 300px
position: absolute
top: 158px
left: 0
}
.bodyOuter {
width: 289px
height: 237px
position: absolute
top: 0
left: 52px
border-bottom-left-radius: 150px 150px
border-bottom-right-radius: 150px 150px
border-top-left-radius: 150px 141px
border-top-right-radius: 150px 151px
background-color: black
behavior: url(ie-css3.htc) /* IE6+*/
}
.bodyInner{
width: 240px
height: 200px
position: absolute
top: 26px
left: 76px
border-bottom-left-radius: 90px 90px
border-bottom-right-radius: 90px 90px
border-top-left-radius: 49px 100px
border-top-right-radius: 49px 100px
background-color: white
behavior: url(ie-css3.htc) /* IE6+*/
}
.scarf {
width: 236px
height: 110px
background: #FB0009
position: absolute
z-index: 2
top: -30px
left: 70px
border: 4px solid #000
border-top-left-radius: 30px 34px
border-top-right-radius: 38px 34px
border-bottom-left-radius: 50% 76px
border-bottom-right-radius: 50% 76px
border-top: none
behavior: url(ie-css3.htc) /* IE6+*/
}
.scarfLeftFold{
position: absolute
top: 11px
left: 154px
width: 70px
height: 70px
border-right: 6px solid black
border-bottom-right-radius: 70px 70px
behavior: url(ie-css3.htc) /* IE6+*/
}
.scarfRightFold{
position: absolute
top: 7px
left: 8px
width: 70px
height: 70px
border-left: 6px solid black
border-bottom-left-radius: 70px 70px
behavior: url(ie-css3.htc) /* IE6+*/
}
.scarfEnd{
position: absolute
z-index: 1
top: 44px
left: 101px
width: 65px
height: 74px
background-color: #FB0009
border: 4px solid black
border-bottom-left-radius: 31px 91px
border-bottom-right-radius: 33px 80px
behavior: url(ie-css3.htc) /* IE6+*/
}
.scarfEnd:after {
content: ""
position: absolute
top: -10px
left: 29px
width: 41px
height: 70px
border-left: 4px solid black
border-bottom-left-radius: 21px 31px
behavior: url(ie-css3.htc) /* IE6+*/
}
.leftHand{
width: 139px
height: 40px
background-color: black
position: absolute
top: 75px
left: -26px
border-top-left-radius: 555px 328px
border-top-right-radius: 551px 340px
border-bottom-left-radius: 500px 181px
border-bottom-right-radius: 279px 112px
behavior: url(ie-css3.htc) /* IE6+*/
transform: rotate(-70deg)
-moz-transform: rotate(-70deg)
-webkit-transform: rotate(-70deg)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
}
.rightHand {
width: 142px
height: 40px
background-color: black
position: absolute
top: 75px
left: 271px
border-top-left-radius: 382px 186px
border-top-right-radius: 454px 145px
border-bottom-left-radius: 510px 323px
border-bottom-right-radius: 508px 353px
behavior: url(ie-css3.htc) /* IE6+*/
transform: rotate(-114deg)
-moz-transform: rotate(-114deg)
-webkit-transform: rotate(-114deg)
-ms-transform: rotate(-114deg)
-o-transform: rotate(-114deg)
}
.leftFoot {
width: 114px
height: 69px
position: absolute
top: 354px
left: 46px
background-color: #FFA600
border: 3px solid black
border-top-left-radius: 70px 49px
border-top-right-radius: 30px 30px
border-bottom-left-radius: 55px 33px
border-bottom-right-radius: 51px 53px
behavior: url(ie-css3.htc) /* IE6+*/
}
.leftFoot:after{
content: ""
position: absolute
top: 31px
left: 0
width: 38px
height: 19px
border-top: 4px solid black
border-top-right-radius: 41px 31px
behavior: url(ie-css3.htc) /* IE6+*/
transform: rotate(-49deg)
}
.rightFoot {
width: 114px
height: 69px
position: absolute
top: 354px
left: 229px
background-color: #FFA600
border: 3px solid black
border-bottom-left-radius: 70px 49px
border-bottom-right-radius: 59px 30px
border-top-left-radius: 55px 33px
border-top-right-radius: 51px 53px
behavior: url(ie-css3.htc) /* IE6+*/
}
.rightFoot:after{
content: ""
position: absolute
top: 31px
left: 75px
width: 38px
height: 19px
border-top: 4px solid black
border-top-left-radius: 41px 31px
behavior: url(ie-css3.htc) /* IE6+*/
transform: rotate(40deg)
}
CSS完全可以做到啊cursor -- 定义鼠标样式
<style="cursor:url('鼠标图片的网址')">
*{crusor:url('鼠标图片的网址')}
详细介绍：
取值: [ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
[<uri>,]*: 根据用户定义的资源显示
auto: 正常鼠标
crosshair: 十字鼠标
default: 默认鼠标
pointer: 点状鼠标
move: 移动鼠标
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标
text: 文字鼠标
wait: 等待鼠标
help: 求助鼠标
progress: 过程鼠标
inherit: 继承
引用网址:http://www.dreamdu.com/css/property_cursor/
初始值: auto
继承性: 是
适用于: 所有元素
cursor: 中文"鼠标"的意思.
如果网页设计课程只是你大学多个科目中的一个，倒是无所谓，如果这是你所学的主要课程，到要交作业的时候却还想着叫别人帮忙，那我就真为你感到堪忧，当年我大学也是啥都没学会，一到学期末要交作业就到处找人帮忙，结果毕业了啥也不会，花了很长的时间自学后工作才慢慢有起色；我经常回答百度问题，帮人解决网页设计方面的问题，但是所有的求作业的我都不予理睬，你这个问题我也是忍不住了才说句话的，帮学生做作业不是真正的帮人，绝大部分都是在害人，一旦有人帮忙自己就不会再去学习了，而学生的职责就是学习啊，我现在最多给你一些素材网站，自己试着做一下吧，网页设计没你想得那么难，即使你现在还不会，但用别人的东西拼出一个作业出来总行吧http://www.lanrentuku.com/js/website.html
http://www.divcss5.com/css-texiao/
