文章标题

最新推荐文章于 2018-07-03 22:55:36 发布
最新推荐文章于 2018-07-03 22:55:36 发布
阅读量248 收藏
点赞数
分类专栏： html5 文章标签： android pc ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/49686637
版权

机器猫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机器猫</title>
    <style>
*{margin:0;padding: 0;}
.top
{
    width: 500px;
    height: 500px;
    background: #fff;
    margin: 100px auto;
}
.head
{
    width: 300px;
    height: 300px;
    border: 1px solid blue;
    border-radius: 150px;
    background: #008ce6;
    margin: 0 auto;
}
.face
{
    width: 250px;
    height: 250px;
    border: 1px solid blue;
    border-radius: 125px;
    background: #fff;
    margin: -242px auto ;

}

.eyes
{
    border-radius: 40px;
    height: 62px;
    left: 198px;
   top: -32px;
    width: 51px;
    background: #fff;
    border: 1px solid black;
    position: relative;
    transform:rotate(-20deg);
    -webkit-transform:rotate(-20deg);  

    -moz-transform:rotate(-20deg);     


}
.eyes_1{
     height: 20px;
     width: 20px;
     border-radius: 10px;
     border: 1px solid #000000;
     margin-left: 19px;
     margin-top: 20px;
     background:#000000;
}
.eye
{
    width: 51px;
    height: 62px;
    border-radius: 40px;
    background: #fff;
    border: 1px solid black;
    position: relative;
    top: -96px;
    left: 256px;
    transform:rotate(20deg);
    -webkit-transform:rotate(20deg);  

    -moz-transform:rotate(20deg);     
}
.eye_1 
{
    height: 20px;
     width: 20px;
     border-radius: 10px;
     border: 1px solid #000000;
     margin-left: 12px;
     margin-top: 20px;
     background:#000000;
}

.nose
{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background:#f50000;
    border: 1px solid red;
    position: relative;
    top: -117px;
    left: 235px;

}
.nose_1
{
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    background: #fff;
    border-radius: 5px;
    position: relative;
    top: -147px;
    left: 242px;

}
.nose_2
{
    width: 2px;
    height: 130px;
    background: #000000;
    position: relative;
    top: -129px;
    left: 254px;
}
.mouse
{
    width: 200px;
    height: 200px;
     border-bottom:3px solid #333; 
     border-radius:200px; 
    position:relative; 
    top:-329px; 
    left:150px; 
}

.beard_left
{

   position: relative;
   top: -443px;
   left:107px;
    transform:rotate(15deg);
    -webkit-transform:rotate(15deg);  

    -moz-transform:rotate(15deg); 
}
.beard_center
{
    position: relative;
    top: -413px;
    left: 107px;
}
.beard_right,.beard_center,.beard_left,.beard_left_1,.beard_right_1,.beard_center_1
{
  width: 100px;
   height: 2px;
   background: #000000;
}
.beard_right
{
    position: relative;
    top: -382px;
    left: 116px;
     transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);  

    -moz-transform:rotate(-15deg); 
}
.beard_left_1
{
    position: relative;
    top: -449px;
    left: 295px;
     transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);  

    -moz-transform:rotate(-15deg); 
}
.beard_center_1
{
    position: relative;
    top: -421px;
    left: 293px;
}
.beard_right_1
{
    position: relative;
    top: -389px;
    left: 284px;
     transform:rotate(15deg);
    -webkit-transform:rotate(15deg);  

    -moz-transform:rotate(15deg); 
}

/*头部结束*/
.scarf
{

    border-radius: 10px;
    background: #f50000;
    height: 22px;
    left: 158px;
    position: relative;
    top: -307px;
    width: 182px;
}
.bell 
{
    width: 40px; 
 height: 40px; 
 _verflow: hidden; /*IE6 hack*/
 border: 2px solid #000; 
 border-radius: 50px; 
 background: #f9f12a; 
 background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); 
 background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
 background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
 box-shadow: -5px 5px 10px rgba(0,0,0,0.25); 
 position: relative; 
 top: -328px; 
 left: 230px; 
}
 .bell_line { 
 width: 36px; 
 height: 4px; 
 background: #f9f12a; 
 border: 2px solid #333; 
 border-radius: 3px 3px 0 0; 
 position: relative; 
 top: 10px; 
 left: 0px;
 } 
 .bell_circle{ 
 width:12px; 
 height:10px; 
 background:#000; 
 border-radius:5px; 
 position:relative; 
 top:13px; 
 left:14px; 
 } 
 .bell_under{ 
 width: 3px; 
 height:11px; 
 background:#000; 
 position:relative; 
 left: 19px; 
 top:13px; 
}
.boy_body
{
    width: 166px;
    height: 96px;
    background: #009eec;
    z-index: 9999;
    margin-top: -351px;
    margin-left: 165px;
    border-width:1px;
        border-style:solid;
    -moz-border-right-colors:#000;
    -moz-border-left-colors:#000;
}

.circle
{
    width: 30px;
    height: 20px;
    border-radius: 20px 20px 0 0;
    margin-left: 233px;

    margin-top: -17px;
    background: #fff;

}
.foot_left
{
    width: 90px;
    height: 15px;
    border-radius: 15px;
    border: 1px solid #000;
    background: #fff;
    margin-left: 254px;
    margin-top: -5px;
}
.foot_right
{
    width: 90px;
    height: 15px;
    border-radius: 15px;
    border: 1px solid #000;
    background: #fff;
    margin-left: 150px;
    margin-top: -17px;
}
.arm_left
{
    height: 30px;
    width: 80px;
    border-radius: 55px;
    background:#009eec;
     transform:rotate(-20deg);
     -webkit-transform:rotate(-20deg);  
     -moz-transform:rotate(-20deg); 
     margin-top: -104px;
     margin-left:102px;
}
.arm_right
{
    height: 30px;
    width: 80px;
    border-radius: 55px;
    background:#009eec;
     transform:rotate(20deg);
     -webkit-transform:rotate(20deg);  
     -moz-transform:rotate(20deg); 
     margin-top: -30px;
     margin-left:315px;
}
.boy 
{
    height: 70px;
    width:140px;
    border-radius: 0 0 70px 70px;
    border: 1px solid #000;
    background: #fff;
    z-index: 9999;
    margin-top: -39px;
    margin-left: 177px;
}
.boy_1
{
    background: #fff none repeat scroll 0 0;
    border: 1px solid #000;
    border-radius: 0 0 40px 40px;
    height: 40px;
    z-index: 9999;
    margin-left: 30px;
    margin-top: 27px;
    width: 80px;
}
.hand_left
{
    height: 40px;
     width: 40px;
     border: 1px solid #000;
     border-radius: 20px;
     background: #fff;
     position: relative;
     top: -57px;
     left: 88px;

}
.hand_right
{
    height: 40px;
     width: 40px;
     border: 1px solid #000;
     border-radius: 20px;
     background: #fff;
     position: relative;
     top: -95px;
     left: 374px;
}
</style>
    type="text/css">
</head>
<body>
    <div class="top">
         <div class="head"></div> 
         <!-- 头部 -->
        <div class="face"></div>
        <!-- 脸 -->
        <div class="eyes">
            <!-- 左眼眶 -->
            <div class="eyes_1"></div>
            <!-- 右眼眶 -->
        </div>
        <div class="eye">
            <!-- 左眼睛 -->
            <div class="eye_1"></div>
            <!-- 右眼睛 -->
        </div>

        <div class="nose"></div>
        <!-- 鼻子 -->
        <div class="nose_1"></div>
        <!-- 鼻子上圈圈 -->
        <div class="nose_2"></div>
        <!-- 鼻子线 -->
        <div class="mouse"></div>
        <!-- 嘴巴 -->
        <div class="beard_left"></div>
        <!-- 左边上胡须 -->
        <div class="beard_center"></div>
        <!-- 左边中胡须 -->
        <div class="beard_right"></div>
        <!-- 左边下胡须 -->
        <div class="beard_left_1"></div>
         <!-- 右边上胡须 -->
        <div class="beard_center_1"></div>
        <!-- 右边中胡须 -->
        <div class="beard_right_1"></div>
        <!-- 右边下胡须 -->


    <!-- 头部结束 -->
            <div class="scarf"></div>
            <!-- 围脖 -->
        <div class="bell">
            <!-- 铃铛 -->
            <div class="bell_line"></div>
            <!-- 铃铛上线 -->
            <div class="bell_circle"></div>
            <!-- 铃铛黑点 -->
        <div class="bell_under"></div>
        <!-- 铃铛下线 -->
    <!-- 铃铛结束 -->
    </div>
    <div class="boy_body"></div>
    <!-- 身体 -->

    <div class="circle"></div>
    <!-- 脚中间圆圈 -->
    <div class="foot_left"></div>
    <!-- 左脚 -->
    <div class="foot_right"></div>
    <!-- 右脚 -->
    <div class="arm_left"></div>
    <!-- 左手臂 -->
    <div class="arm_right"></div>
    <!-- 右手臂 -->
    <div class="boy">
        <!-- 身体白 -->
        <div class="boy_1"></div>
        <!-- 肚兜 -->
    </div>
    <div class="hand_left"></div>
    <!-- 左手 -->
    <div class="hand_right"></div>
    <!-- 右手 -->

</div>

</body>
</html>
诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Wordpress自定义函数控制文章标题长度
09-29
主要为大家介绍了Wordpress自定义函数控制文章标题长度,需要的朋友可以参考下
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
PHPCMS内容页文章标题添加页码的方法教程
09-29
如何让PHPCMS的内容页标题显示页码呢？让每篇文章的标题都不一样，这样不但提高了网页体验率，同时也可以达到SEO优化的效果，让百度、谷歌等多收录一些。
html5九宫格布局
诸葛苍穹
03-18 9548
<!DOCTYPE html> <html> <head> <title>html5响应式九宫格</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inita
SVG:linearGradient渐变在直线上失效的问题解决方案
诸葛苍穹
07-03 3028
SVG:linearGradient渐变在直线上失效的问题解决方案 SVG开发里有个较为少见的问题。 对x1=x2或者y1=y2的直线（line以及path），比如： &lt;path d="M200,10 200,100" stroke="url(#orange_red)"/&gt; 如果，stroke里使用的是渐变效果，那么，在各种浏览器上都会出现同一个BUG，这条线消失了。 原因不...
canvas把SVG渲染成图片
诸葛苍穹
12-02 1686
canvas把SVG渲染成图片<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> <script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script> <script
文本域字数统计
诸葛苍穹
10-20 1188
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> textarea{ width: 20%; resize: none; border: 1px so
canvas 画图板Demo
诸葛苍穹
06-03 1096
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body style="backgroun
Bootstar常用样式表
诸葛苍穹
11-11 671
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content=" device-width, initial-scale=1.0"> <title>无标题文档</title> <style> body{ ba
登录页面
诸葛苍穹
10-20 613
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-image: url("http://www.pptbz.com/pptpic/UploadFiles_6909/
canvas画钟表demo
诸葛苍穹
10-30 369
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>钟表</title> </head> <body style="background: #000;"><canvas width="500" height="500" style="background: #fff;" id="cvs"></ca
3D轮播
诸葛苍穹
12-13 341
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <style type="text/css"> body{ margin: 0; padding: 0; } .main{
canvas画时钟
诸葛苍穹
12-13 325
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script> window.onload = function() {
如何让IE9以下版本认识html5元素
诸葛苍穹
12-13 322
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
html5动画
诸葛苍穹
12-15 262
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">*{margin: 0;padding: 0;} .content{width: 200px; height: 200px;border-radius: 100px;ba
js 倒计时
诸葛苍穹
11-26 256
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
wordpress 改写文章标题
最新发布
03-20
您可以使用以下代码来改写 WordPress 文章标题： function custom_title( $title ) { $new_title = '新标题'; return $new_title; } add_filter( 'the_title', 'custom_title' ); 将“新标题”替换为您想要的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值