制作在线简历(二)——基本信息

一、头像

1、先在顶部来个头像,头像再做几个动画特效,就是鼠标移上去的时候边框转180°,需要注意的是图片不能随着边框也转动

  所以得把图片和边框放在两个标签中,两个标签都用绝对定位来控制位置,我以前也做过一些动画的记录,可以在《CSS3中的动画效果记录》查看到。

<header>
    <img src="img/avatar.jpg" />
    <a href="javascript:void(0)"></a>
</header>

a标签和img标签的宽度和高度是一样的,这是为了在圆形边框中包住头像,transition就是用来做动画,边框颜色有两种,左边和上边是橙色,右边和下边是棕色的。:first-child是一个选择器。以前对选择器做些过记录,可以在《CSS选择器的一些记录》查看到。

.menu_container section:first-child > header{
    margin: 10px auto;
    width: 200px;
    height: 200px;
    position: relative;
}
.menu_container section:first-child > header a{
    position: absolute;
    z-index: 1;
    display: block;
    border: 10px solid #072256;
    border-left-color:#E07514;
    border-top-color:#E07514;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    -webkit-transition:all .5s ease-in;
            transition:all .5s ease-in;
       -moz-transition:all .5s ease-in;
         -o-transition:all .5s ease-in;
}
.menu_container section:first-child > header a:hover{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.menu_container section:first-child > header img{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top:10px;
    left: 10px;
}

我还做了个响应式的CSS,用来控制a标签、img标签和header标签的宽度高度。

@media screen and (max-width: 680px) {
    .menu_container section:first-child > header{
        width: 100px;
        height: 100px;
    }
    .menu_container section:first-child > header a{
        border-width: 5px;
        width: 90px;
        height: 90px;
    }
    .menu_container section:first-child > header img{
        width: 90px;
        height: 90px;
        top:5px;
        left: 5px;
    }
}

二、表格信息

1、做个列表信息,这里面用到了个选择器。一开始是用table实现的,但是发现用table做响应式的话有点困难,后面就用flex布局了。在媒体查询的时候再变成block布局。

  

.user_info{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding-top:10px;
    overflow:hidden;
}
@media screen and (max-width: 680px) {
    .user_info{
        display:block;
        font-size:1.6rem;
    }
}

2、接下来要做一个动画,就是移到懒羊羊这里做个效果。如下图所示:

  

<a href="javascript:void(0)">
        <span class="line line-top"></span>
        <span class="line line-right"></span>
        <span class="line line-bottom"></span>
        <span class="line line-left"></span>
        懒羊羊
</a>

原理就是用span做四根白线,要绝对定位的,a标签设置为相对定位,在加点动画上去就行了,麻烦的地方就是四根白线的位置定位。

.user_info > span > a .line{
    position:absolute;
    -moz-transition:all .4s ease;
      -o-transition:all .4s ease;
 -webkit-transition:all .4s ease;
         transition:all .4s ease;
}
.user_info > span > a:hover .line{
    background:#fff;
}
.user_info > span > a .line-top{
    width:0px;
   height:1px;
     left:-110%;
      top:-2px;
}
.user_info > span > a:hover .line-top{
    width:100%;
     left:-2px;
     padding-left:3px;
}
.user_info > span > a .line-right{
    width:1px;
    height:0px;
    right:-2px;
    top:-110%;
}
.user_info > span > a:hover .line-right{
    height:100%;
    top:-2px;
}
.user_info > span > a .line-bottom{
    width:1px;
    height:0px;
    left:-2px;
    bottom:-110%;
}
.user_info > span > a:hover .line-bottom{
    height:100%;
    bottom:1px;
}
.user_info > span > a .line-left{
    width:0px;
    height:1px;
    right:-110%;
    bottom:-2px;
}
.user_info > span > a:hover .line-left{
    width:100%;
    right:-2px;
    bottom:1px;
    padding-right:3px;
}

源码下载:

http://download.csdn.net/detail/loneleaf1/8849069

时间: 2024-11-13 08:50:05

制作在线简历(二)——基本信息的相关文章

制作在线简历(三)——技能介绍

一.结构 结构还是很朴素的,星星是在font-awsome选的一符号,整个结构又是用一张table表格来搭的,选了两种底色作为顶部和左边的底色. 这里由于使用了自定义字体,就碰到了个问题,就是当点到这张星星页面的时候,字体还没加载进来,这个时候星星的位置要么是乱码要么是没有的,后面就去找了个解决方法,使用webfont loader,在字体加载成功的回调函数中再应用相应的font-family的CSS样式. <script src="js/webfontloader.js">

制作在线简历(四)——工作经历

一.结构 倒序显示经历,第一行是时间与公司,第二行是行业,第三行是工作内容,这里也是用了flex布局,图表是用个canvas画布画出来的.下图是大屏幕下的显示方式: 移动端的显示如下: <article class="user_experience"> <div class="left"> <h5>2014/5--2014/9:大肥羊学校</h5> <h6>所属行业:金融/投资/证券</h6>

如何制作在线参考手册(转)

看到很多网站的在线的手册,自己很是好奇,准备自己也搞一个在线手册,下面是制作过程 制作在线参考手册 步骤: 要有chm版本的手册 转换chm为html,推荐工具:CHM Encoder绿色版 制作手册导航首页(这是难点) 上传服务器-ok 下面以制作jquery在线手册为例 jquery手册版本--jQuery 1.4.1中文版 把chm转换成html,工具是:CHM Encoder绿色版,转换之后可以看到有很多html页面,但是这样查找手册的话很不方便,需要一个良好的导航首页,但是如果自己手工

cocos2dx 制作单机麻将(二)

麻将逻辑2. 打乱麻将顺序2 前面讲解了如何打乱初始给定的麻将牌堆, 还有一种是打乱任意给定的麻将牌堆 //混乱扑克2 void RandAppointCardData(BYTE cbCardData[],BYTE cbMaxCount,BYTE OriginalData[]/*源牌堆数据*/) { //混乱扑克 BYTE cbRandCount=0,cbPosition=0; do { cbPosition=rand()%(cbMaxCount-cbRandCount); cbCardData

制作在线QQ

制作在线QQ的具体步骤 1.首先登录到http://is.qq.com/webpresence/code.shtml 网站2.选择风格3.填写相关数据4.生成网页代码5.复制代码到“写字板”,另存文件名为001.html6.创建自建栏目,将写字板里的图案样式部分复制到“自建栏目”中 7.全部完成以后,将图标设置链接,地址为:http://wpa.qq.com/msgrd?v=1&uin=你的QQ号码&site=240zt 保存发布就OK了!                        h

h5开发app之在线生成二维码

h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id="text" type="text" value="http://www.baidu.com" style="width:80%" /> 2.创建一个div以用来放置二维码图片(div的id定义为“qrcode”): &l

C#制作在线升级程序

//这是一个webservice private AppUpdate.UpdateServ UpdateSvr; private void button1_Click(object sender, System.EventArgs e) { if(LinkWebServices()==true) { this.label1.Text="连接服务器....... PASS"; if(CheckVer()==true) { this.label2.Text="检查最新版本并下载.

PHP在线生成二维码代码(google api)的例子

通过google在线生成二维码的api在线生成二维码. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l

jquery-qrcode在线生成二维码

通过bower进行获取: [email protected]:ydkt$ bower install jquery-qrcode --save bower not-cached git://github.com/gcusnieux/jquery-qrcode.git#* bower resolve git://github.com/gcusnieux/jquery-qrcode.git#* bower checkout jquery-qrcode#master bower resolved gi