个人简历2

码云链接：

https://gitee.com/zyyyyyyyyyyy/codes/q3kxjudetbpaiwm69vfl555

效果图

源代码：

1.简历

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<title>自我介绍</title>
</head>
<style type="text/css">
.a{margin:0 auto;}
.b{margin:0 auto;text-align:center;}
.c{list-style-type:none;}
.above{margin-top:30px;margin-bottom: 20px;}
.right{margin-left: 20px;margin-top: 20px;float: left;}
.left{margin-right: 30px;margin-top: 20px;float: left;}
p{margin-left: 20px; margin-right: 20px;}
</style>
<body>
<div style="width:800px" class="a">
    <div style="height:60px ; width:800px ; background:#EEEED1 ;" class="above"></div>
    <div>
     <div style=" width:500px ;height:280px; background:#EEEED1 ;" class="left">
    <h3 style="align-content: center;vertical-align:middle" class="b"><br>自我评价：</h3>
       <p>       雨晨者,金城人氏也。诞于乙亥年九月,吾与父母吾妹四人齐聚一室,尝以嬉戏游乐,其乐融融也。</p>
       <p>       吾之桑梓于陇西河谷。古来黄河流,今来做耕地。山峦起伏,林壑尤美。冬暖夏凉,生机盎然。偶有黄沙肆虐,然今人勤以护林,效果尤显。乃古之商贾显赫,丝绸之路必经之地也。</p>
       <p>       吾眠极浅,如有如鼠般作作索索,必不能眠。性情恬淡,亦柔亦弱矣。行事较彷徨,少果断之感。</p>

     </div>
     <div style="width:244px ; height:280px ;background:#EEEED1;"class="right">
     <div class="b">
     <br>
  <img src="img/zy.jpg" width="200" height="240" >
     </div>
      </div>
    </div>
    <diV>
    <div style=" width:500px ;height:480px; background:#EEEED1 ;" class="left">
    <h3 style="align-content: center;vertical-align:middle" class="b"><br>喜欢的文章：归去来兮辞</h3>
       <p>       会有四方之事10，诸侯以惠爱为德11，家叔以余贫苦12，遂见用于小邑13。于时风波未静14，心惮远役15，彭泽去家百里16，公田之利，足以为酒。故便求之。及少日，眷然有归欤之情17。何则18？质性自然19，非矫厉所得。饥冻虽切20，违己交病。尝从人事21，皆口腹自役22。于是怅然慷慨23，深愧平生之志。犹望一稔24，当敛裳宵逝25。寻程氏妹丧于武昌26，情在骏奔27，自免去职。仲秋至冬28，在官八十余日。因事顺心29，命篇曰归去来兮。乙巳岁十一月也30。</p>
       <p>       归去来兮，田园将芜胡不归31？既自以心为形役32，奚惆怅而独悲33？悟已往之不谏34，知来者之可追35。实迷途其未远36，觉今是而昨非37。舟遥遥以轻飏38，风飘飘而吹衣。问征夫以前路39，恨晨光之熹微40。</p>
    <p>       乃瞻衡宇，载欣载奔41。僮仆欢迎，稚子候门42。三径就荒，松菊犹存43。携幼入室，有酒盈樽44。引壶觞以自酌45，眄庭柯以怡颜46。倚南窗以寄傲47，审容膝之易安48。园日涉以成趣49，门虽设而常关。策扶老以流憩50，时矫首而遐观51。云无心以出岫52，鸟倦飞而知还。景翳翳以将入53，抚孤松而盘桓54。</p>
    </div>
    <div>
           <div style="width:244px ; height:255px ;background:#EEEED1;"class="right">
         <h3 style="align-content: center;vertical-align:middle" class="b"><br>个人信息：</h3>
         <ul class="c">
         <li>姓名：张*</li>
         <li>性别：女</li>
         <li>年龄：30</li>
         <li>电话：97256529</li>
         <li>邮箱：[email protected]</li>
         <li>喜欢的音乐：往后余生</li>
         </ul>
         <EMBED src="img/往后余生.mp3" width=244 height=50 type=audio/mpeg loop="-1" autostart="0" volume="0"></EMBED>
           </div>
          <div style="width:244px ; height:200px ;background:#EEEED1;"class="right">
         <h3 style="align-content: center;vertical-align:middle" class="b"><br>教育背景：</h3>
         <ul class="c">
         <li>学校名称：青海大学</li>
         <li>就读时间：2017.9.1至2021.6.1</li>
         <li>所学专业：计算机</li>
         <li>学历学位：本科</li>
           </ul>
           </div>
        </div>
    </div>

<div>
<div style=" width:500px ;height: 330px; background:#EEEED1 ;" class="left">
<div class="b">
     <h3 style="align-content: center;vertical-align:middle" class="b"><br>喜欢的美食：北京烤鸭</h3><br>
        <video width="500" height="310" controls autoplay>
        <source src="img/kaoya.mp4" type="video/mp4">
        </video>
</div></div>
<div style="width:244px ; height:300px ;background:#EEEED1;"class="right">
         <h3 style="align-content: center;vertical-align:middle" class="b"><br>家庭住址（右移可见）</h3>
         <br>
          <iframe src="GPS.html" width="244" height="310" frameborder="0" scrolling="no" align="center"></iframe>
   </div>
</div>
</div>
</diV>
</div>
</body>

2.地图（取自百度地图）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>

<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body>

<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
        addPolyline();//向地图中添加线
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(114.287938,22.766766);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{title:"我的标记",content:"我的备注",point:"114.252082|22.71403",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
   ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
   var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
   var iw = createInfoWindow(i);
   var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
   marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });

   (function(){
    var index = i;
    var _iw = createInfoWindow(i);
    var _marker = marker;
    _marker.addEventListener("click",function(){
        this.openInfoWindow(_iw);
       });
       _iw.addEventListener("open",function(){
        _marker.getLabel().hide();
       })
       _iw.addEventListener("close",function(){
        _marker.getLabel().show();
       })
    label.addEventListener("click",function(){
        _marker.openInfoWindow(_iw);
       })
    if(!!json.isOpen){
     label.hide();
     _marker.openInfoWindow(_iw);
    }
   })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
//标注线数组
    var plPoints = [{style:"solid",weight:4,color:"#f00",opacity:0.6,points:["114.28792|22.768975","114.287058|22.769075","114.287112|22.768725","114.287956|22.768625","114.28792|22.768925"]}
   ];
    //向地图中添加线函数
    function addPolyline(){
  for(var i=0;i<plPoints.length;i++){
   var json = plPoints[i];
   var points = [];
   for(var j=0;j<json.points.length;j++){
    var p1 = json.points[j].split("|")[0];
    var p2 = json.points[j].split("|")[1];
    points.push(new BMap.Point(p1,p2));
   }
   var line = new BMap.Polyline(points,{strokeStyle:json.style,strokeWeight:json.weight,strokeColor:json.color,strokeOpacity:json.opacity});
   map.addOverlay(line);
  }
}

    initMap();//创建和初始化地图
</script>
</html>

音频二维码：

视频二维码：

猜你喜欢