index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Lmagic的个人主页</title>
    <link rel="shortcut icon" href="images/icons/site.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="homebodydiv">
        <div id="logo">
          <a href="#"></a>
        </div>
        <a name="home"></a>
        <div id="navdiv">
            <ul id="navul" class="allul mainbody">
                <li id="navfirstli"><a href="#home">首页</a></li>
                <li ><a href="#projects">项目</a></li>
                <li><a href="#"></a></li>
                <li ><a href="#blog">博客</a></li>
                <li ><a href="#life">生活</a></li>
            </ul>
            <hr class="hrstyle" />
        </div>
        <div id="homediv">
            <div class="linediv" style=" padding-top: 5px;"><hr class="hrstyle" /></div>
            <div id="homedivinner" class="mainbody">
                <div id="magicdiv"><p class="fontbazar">M A G I C</p></div>
                <div id="magicinfodiv" class="fontsize">LIFE IS MAGIC</div>
                <div id="picdiv">
                    <div id="imgdiv">
                       <img src="http://ojb21p87b.bkt.clouddn.com/back1.jpg" alt="#" />
                    </div>
                    <span class="fontsize" id="backimginfo">第一张照片介绍</span>
                    <div id="controdiv">
                        <a href="#" id="leftlink"><span><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></span></i></a>
                        <a href="#" id="rightlink"><span><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></span></i></a>
                    </div>
                </div>
                <p class="colorF6EDD8 fontsize" id="indexInfo">欢迎来到Lmagic的个人网站，您是第&nbsp;<span></span>&nbsp;位访问者~</p>
                <p id="userInfo" class="fontsize">
                    <span id="city" class="outerSpan"><i class="fa fa-map-marker"></i> <span class="text"></span></span>
                    <span id="temp" class="outerSpan"><i class="fa fa-thermometer-half" aria-hidden="true"></i> <span class="text"></span></span>
                </p>
            </div>
            <div class="linediv"><hr class="hrstyle" /></div>
        </div>
    </div>

    <a name="projects"></a>
    <div class="sessiondiv projectdiv ">
    <div class="projectline"><hr class="hrstyle" /></div>
    <div class="sessiondivinner" class="mainbody">
        <p class="fontsizebig fontbazar hshadow" style="margin:10px">MY PROJECTS</p>
        <p class="symbolp">&mdash;&mdash;&times;&times;&times;&mdash;&mdash;</p>
        <p class="fontsize infop" style="color:#606060">THINK AND ACT</p>
        <div class="projectinner">
            <a href="http://lmagic.site" target="_blank" title="爱奇艺全国高校大赛作品">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/projectiqiyi.jpg" alt="#" />
                    </div>
                    <span class="fontsize">爱奇艺比赛作品</span>
                </div>
            </a>
            <a href="pages/projects/caculator.html" target="_blank" title="简易功能的计算器">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project1.jpg" alt="#" />
                    </div>
                    <span class="fontsize">计算器</span>
                </div>
            </a>
            <a href="pages/projects/PomodoroClock.html" target="_blank" title="可倒计时的番茄钟">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project2.jpg" alt="#" />
                    </div>
                    <span class="fontsize">番茄钟</span>
                </div>
            </a>
            <a href="pages/projects/weather.html" target="_blank" title="可查询全球各地的天气预报">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project3.jpg" alt="#" />
                    </div>
                    <span class="fontsize">天气预报</span>
                </div>
            </a>
        </div>
        <div class="projectinner">
            <a href="pages/projects/wikiapp.html" target="_blank" title="wiki百科条目搜索">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project10.jpg" alt="#" />
                    </div>
                    <span class="fontsize">wiki条目检索</span>
                </div>
            </a>
            <a href="pages/projects/danmu.html" target="_blank" title="简易功能的弹幕室">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project8.jpg" alt="#" />
                    </div>
                    <span class="fontsize">弹幕室</span>
                </div>
            </a>
            <a href="pages/projects/formSearch.html" target="_blank" title="Vue实现表单搜索排序">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project12.jpg" alt="#" />
                    </div>
                    <span class="fontsize">Vue实现表单搜索排序</span>
                </div>
            </a>
            <a href="pages/projects/TwitchtvShow.html" target="_blank" title="Twitch Status">
                <div class="project">
                    <div class="projectimgdiv">
                       <img src="images/project13.jpg" alt="#" />
                    </div>
                    <span class="fontsize">Twitch 直播API</span>
                </div>
            </a>
        </div>
        <div class="seemore">
           <a href="pages/projectall/projectall.html" target="_blank">更多项目</a>
        </div>
    </div>
    <div class="projectline"><hr class="hrstyle" /></div>

    <a name="blog"></a>
    <div class="sessiondiv blogdiv">
        <div class="projectline" style="border-color:#e3e0dd;"><hr class="hrstyle" /></div>
        <div class="sessiondivinner blogdivinner mainbody">
           <p class="fontsizebig fontbazar hshadow" style="margin:10px">MY BLOG</p>
           <p class="symbolp">&mdash;&mdash;&times;&times;&times;&mdash;&mdash;</p>
           <p class="fontsize infop" style="color:#606060">ABOUT PROGRAMING</p>
           <div id="blogcontentdiv">
                <div class="oneblog">
                    <div class="titleback">
                        <div class="titleContainer">
                            <h3>HTTP知识点总结</h3>
                            <div class="blogdiva"><a href="pages/blogs/blog_https.html">点击查看</a></div>
                        </div>
                    </div>
                    <p class="oneblogContent">
                        内容：HTTP诞生，HTTP特点，HTTP报文，HTTP状态码，HTTPS，Web安全
                    </p>
                </div>
                <div class="oneblog">
                    <div class="titleback">
                        <div class="titleContainer">
                            <h3>JS知识点整理1-类型、值/引用复制、强制类型转换</h3>
                            <div class="blogdiva"><a href="pages/blogs/jsType.html">点击查看</a></div>
                        </div>
                    </div>
                    <p class="oneblogContent">
                        内容：类型，值/引用复制，强制类型转换
                    </p>
                </div>
                <div class="oneblog">
                    <div class="titleback">
                        <div class="titleContainer">
                            <h3>JS知识点整理2—作用域、闭包、模块</h3>
                            <div class="blogdiva"><a href="pages/blogs/closure.html">点击查看</a></div>
                        </div>
                    </div>
                    <p class="oneblogContent">
                        内容：作用域，提升，闭包，模块
                    </p>
                </div>
                <div class="oneblog">
                    <div class="titleback">
                        <div class="titleContainer">
                            <h3>JS知识点整理3—异步、回调、Promise</h3>
                            <div class="blogdiva"><a href="pages/blogs/asynchronous.html">点击查看</a></div>
                        </div>
                    </div>
                    <p class="oneblogContent">
                        内容：并发与并行、同步与异步、阻塞与非阻塞、事件循环、JavaScript单线程与异步、回调、Promise
                    </p>
                </div>
                <div class="oneblog">
                    <div class="titleback">
                        <div class="titleContainer">
                            <h3>JS知识点整理4—this</h3>
                            <div class="blogdiva"><a href="pages/blogs/this.html">点击查看</a></div>
                        </div>
                    </div>
                    <p class="oneblogContent">
                        内容：this的四种绑定规则
                    </p>
                </div>
           </div>
           <div class="seemore">
               <a href="pages/blogall/blogall.html" target="_blank">更多博客</a>
           </div>
        </div>
        <div class="projectline" style="border-color:#e3e0dd;"><hr class="hrstyle" /></div>
    </div>

    <a name="life"></a>
    <div class="sessiondiv lifediv">
        <div class="projectline" style="border-color:#e68966;"><hr class="hrstyle"/></div>
        <div class="sessiondivinner mainbody">
            <p class="fontsizebig fontbazar hshadow" style="margin:10px">MY LIFE</p>
            <p class="symbolp">&mdash;&mdash;&times;&times;&times;&mdash;&mdash;</p>
            <p class="fontsize infop" style="color:#282828">DO WHAT YOU LIKE,LIKE WHAT YOU DO.</p>
            <div class="projectinner">
                <a href="#" title="美食">
                    <div class="project">
                        <div class="projectimgdiv">
                           <img src="images/view1.jpg" alt="#" />
                        </div>
                        <span class="fontsize">美食</span>
                    </div>
                </a>
                <a href="#" title="美景">
                    <div class="project">
                        <div class="projectimgdiv">
                           <img src="images/view2.jpg" alt="#" />
                        </div>
                        <span class="fontsize">美景</span>
                    </div>
                </a>
                <a href="#" title="美物">
                    <div class="project">
                        <div class="projectimgdiv">
                           <img src="images/view3.jpg" alt="#" />
                        </div>
                        <span class="fontsize">美物</span>
                    </div>
                </a>
                <a href="#" title="音乐与电影">
                    <div class="project">
                        <div class="projectimgdiv">
                           <img src="images/music1.jpg" alt="#" />
                        </div>
                        <span class="fontsize">音乐与电影</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="projectline" style="border-color:#e68966;"><hr class="hrstyle" /></div>
    </div>
<script src="static/scripts/jquery.min.js"></script>
<script src="https://cdn.wilddog.com/js/client/current/wilddog.js" ></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>