响应式个人主页

主页模板

h5+js+css3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1899
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * Created by Administrator on 2017/6/1.
 */
(function(main) {
    var args = {};
    main(args);
})(function(args) {

//        'use strict';

var c = document.getElementById('c');
    var cxt = c.getContext('2d');
    var WIDTH = c.width = document.body.scrollWidth - 18;
    var HEIGHT = c.height = window.innerHeight;

var mouse = {
        x: WIDTH / 2,
        y: HEIGHT / 2
    };

var Circle = function(x, y, r, c) {
        this.x = x;
        this.y = y;
        this.ox = x;
        this.oy = y;
        this.r = r;
        this.c = c;
        this.alpha = Math.random() * 1;
    };

Circle.prototype = {
        constructor: Circle,
        update: function(target) {

var dx = target.x - this.x;
            var dy = target.y - this.y;
            var d = Math.sqrt(dx * dx + dy * dy);

this.x += dx / d;
            this.y += dy / d;

var vx = this.x - this.ox;
            var vy = this.y - this.oy;

this.ox = this.x;
            this.oy = this.y;

this.x += vx;
            this.y += vy;

this.c += 1;

},
        render: function(cxt) {
            cxt.save();
            cxt.globalAlpha = this.alpha;
            cxt.fillStyle = 'hsla(' + this.c + ', 100%, 50%, 1)';
            cxt.translate(this.x, this.y);
            cxt.beginPath();
            cxt.arc(0, 0, this.r, 0, Math.PI * 2);
            cxt.fill();
            cxt.restore();

cxt.strokeStyle = 'hsla(' + this.c + ', 100%, 50%, 1)';
            cxt.beginPath();
            cxt.moveTo(this.x, this.y);
            cxt.lineTo(this.ox, this.oy);
            cxt.stroke();

}
    };
    var circle = null;
    var circleList = [];
    var circleCount = 500;
    var color = Math.random() * 360;

for (var i = 0; i < circleCount; i++) {
        circle = new Circle(
            WIDTH / 2 + Math.cos(Math.random() * Math.PI * 2) * 400 * Math.random(),
            HEIGHT / 2 + Math.sin(Math.random() * Math.PI * 2) * 400 * Math.random(),
            Math.random() * 5,
            color
        );
        circleList.push(circle);
    }

c.addEventListener('mousemove', function(e) {
        var rect = c.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });

requestAnimationFrame(function loop() {
        requestAnimationFrame(loop);
        cxt.globalCompositeOperation = 'source-over';
        cxt.fillStyle = 'rgba(0, 0, 0, 1)';
        cxt.fillRect(0, 0, WIDTH, HEIGHT);
        cxt.globalCompositeOperation = 'lighter';
        for (var i = 0; i < circleCount; i++) {
            circle = circleList[i];
            circle.update(mouse);
            circle.render(cxt);
        }
    });

});

var se0 = document.getElementById("s0");
var se1 = document.getElementById("s1");
var se2 = document.getElementById("s2");
var se3 = document.getElementById("s3");
var se4 = document.getElementById("s4");
se0.style.height = window.innerHeight + "px";
var mun;
if (window.innerWidth > 768) {
    mun = window.innerHeight;
    se0.style.height = mun + "px";
    se1.style.height = mun + "px";
    se2.style.height = mun + "px";
    se3.style.height = mun + "px";
    se4.style.height = mun - 160 + "px";
}

var u0 = document.getElementById("u0");
var u1 = document.getElementById("u1").getElementsByTagName("li");

var op = document.getElementsByTagName("option");

var str = 1;
u1[0].style.backgroundColor = "rgba(255, 255, 255, 0.4)";

var img1 = document.getElementById("pic");
var img2 = document.getElementById("pic1");
var arr = new Array;
for (var i = 0; i < 3; i++) {
    arr[i] = "/uploads/user_upload/34099/timg" + (i + 1) + ".jpg";
}
var Time = setInterval(play1, 3000);
var count = 1;

function play1() {
    if (count == arr.length) {
        count = 0;
    }
    img1.src = arr[count];
    img2.src = arr[count];
    count++;
}

function stop1() {
    clearInterval(Time);
}

function start1() {
    Time = setInterval(play1, 3000);
}

function onMousedown(obj) {
    stop1();
    img1.src = arr[obj.value - 1];
    img2.src = arr[obj.value - 1];

}

var big = document.getElementById('big');
var close = document.getElementById("close");

var big1 = document.getElementById('big1');
var close1 = document.getElementById("close1");

var close2 = document.getElementById("close2");

function picBig() {
    big.style.display = "none";
    close.style.display = "block";
}

function picClose() {
    big.style.display = "block";
    close.style.display = "none";
}

function picBig1() {
    big1.style.display = "none";
    close1.style.display = "block";
}

function picClose1() {
    big1.style.display = "block";
    close1.style.display = "none";
}

function picBig2() {
    close2.style.display = "block";
}

function picClose2() {
    close2.style.display = "none";
}
var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");

function video() {
    video1.style.display = "block";
    video2.autoplay = "true";
}

function stop() {
    video2.pause();
    video2.currentTime = 0;
    video1.style.display = "none";
}

var ca1 = document.getElementById("ca1");
var con = ca1.getContext("2d");
ca1.height = 25;
var n = 0;

function color1() {
    var col1 = Math.floor(Math.random() * 255);
    var col2 = Math.floor(Math.random() * 255);
    var col3 = Math.floor(Math.random() * 255);
    con.fillStyle = 'rgb(' + col1 + ',' + col2 + ',' + col3 + ')';
    con.strokeStyle = 'rgb(' + col1 + ',' + col2 + ',' + col3 + ')';
}

function line() {
    ca1.width = window.innerWidth;
    con.clearRect(0, 0, ca1.width, 25);
    con.beginPath();
    con.lineWidth = 2;
    color1();
    con.arc(10 + 10 * n, 12, 10, 0, Math.PI * 2, true);
    n++;
    con.fill();
    con.stroke();
    con.closePath();

var lg = con.createLinearGradient(0, 23, ca1.width, 23);
    lg.addColorStop(0, "#111111");
    lg.addColorStop(0.1, "#222222");
    lg.addColorStop(0.2, "#333333");
    lg.addColorStop(0.3, "#444444");
    lg.addColorStop(0.4, "#555555");
    lg.addColorStop(0.5, "#666666");
    lg.addColorStop(0.6, "#555555");
    lg.addColorStop(0.7, "#444444");
    lg.addColorStop(0.8, "#333333");
    lg.addColorStop(0.9, "#222222");
    lg.addColorStop(1, "#111111");
    con.strokeStyle = lg;
    con.beginPath();
    con.lineWidth = 3;
    con.moveTo(0, 23);
    con.lineTo(ca1.width, 23);
    con.stroke();

if (10 + 10 * n >= ca1.width) {
        n = 0;
    }
}

window.onload = function t1() {
    setInterval(line, 100);
};

编译

CSS

/************PC端***********/

* {
    margin: 0;
    padding: 0;
}
html {
    min-width: 320px;
}
body {
    background-color: black;
    overflow-x: hidden;
    min-width: 320px;
}
/*导航栏*/

.nav1 {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.nav1 div span {
    position: absolute;
    color: #000;
    text-decoration: none;
    font-size: 1.8rem;
    top: 5px;
    left: 50px;
    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}
.nav1 a img {
    border-radius: 25px;
    opacity: 0.8;
}
.nav1 ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}
.nav1 li {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}
.nav1 li + li {
    border-left: solid 2px grey;
}
.nav1 li a {
    text-decoration: none;
    font-size: 1.3rem;
    color: #c3c3c3;
}
.nav1 li a:hover {
    color: #ffffff;
}
/*首页*/

#ca {
    position: absolute;
    border-radius: 250px;
    top: 100px;
    left: calc(50% - 200px);
}
.section0 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: black;
    height: 100%;
}
/*个人信息*/

.section0-div0 {
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: black;
}
.section0-div0 img {
    width: 300px;
    height: 300px;
    animation-name: myani;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}
.section0-div0_1 {
    opacity: 0.8;
    text-align: center;
    margin-top: 50px;
}
.section0-div0 div {
    width: calc(100% / 3 - 0px);
    transition: 2s;
}
.section0-div0_2 ul {
    width: 100%;
    list-style: none;
    color: #c3c3c3;
    padding-top: 50px;
    transition-property: all;
    transition-duration: 3s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;
}
.section0-div0_2_ul {
    opacity: 0.9;
    transform: scale(1.1, 1.1);
}
.section0-div0_2 ul li {
    padding-left: 10px;
    line-height: 3;
    color: #c3c3c3;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    cursor: default;
    text-align: center;
}
.section0-div0_2 ul li:hover {
    font-size: 1.3rem;
    color: #c60;
}
/*兴趣爱好*/

.section1 {
    height: 100%;
}
.section1 .section1-div1 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: black;
}
.p {
    width: 100%;
    padding-top: 100px;
    text-align: center;
    font-size: 2.5rem;
    color: #c3c3c3;
    cursor: default;
    animation-name: myani2;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}
.section1 .section1-div1_1 {
    text-align: center;
    width: calc(100% / 4 - 24px);
    padding-top: 20px;
    margin: 5px;
    opacity: 0.8;
    color: #dedede;
    font-size: 1.0rem;
    border: solid 1px slategrey;
    cursor: default;
    transition: 2s;
}
.p1 {
    text-align: left;
    margin-top: 15px;
}
em span {
    color: rgba(255, 228, 14, 0.78);
}
.section1-div1_1_1 img {
    width: calc(100% - 24px);
    height: 300px;
}
.section1-div1_1_1 img:hover {
    animation-name: myani;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: both;
    box-shadow: 1px 1px 50px red, 1px -1px 50px #fc9997;
}
.section1-div1_1_2 {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-left: 15px;
    padding-right: 15px;
}
.section1-div1_1_3 {
    color: #ff6f13;
}
/*社会经历*/

.section2 {
    height: 100%;
}
.section2 div {
    color: #dedede;
}
.section2-div2 {
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: black;
    flex-wrap: wrap;
}
.section2-div2 .section2-div2_1 {
    width: calc(100% / 3 - 30px);
    border: solid 1px slategrey;
    margin: 5px;
    transition: 2s;
}
.section2-div2_2_1 {
    text-align: center;
    font-size: 1.3rem;
    cursor: default;
    margin-top: 20px;
}
.section2-div2_2_1 button {
    font-size: 1.3rem;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    opacity: 0.8;
}
.section2-div2_2_2 ul {
    padding-left: 25px;
}
.section2-div2_2_2 ul li {
    font-size: 1.0rem;
    padding-top: 20px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    cursor: default;
}
.section2-div2_2_2 ul li:hover {
    font-size: 1.3rem;
    color: #c60;
}
.section2-div2_2_2 ul a:hover {
    color: #c60;
}
.section2-div2_2_2 ul li a {
    color: #c3c3c3;
    text-decoration: none;
    padding-top: 5px;
}
.section2-div2_2_2_1 {
    text-align: center;
}
.section2-div2_2_2_1 img:hover {
    box-shadow: 0 0 15px rgba(90, 198, 255, 0.52), 1px 1px 15px rgba(90, 198, 255, 0.52), -1px 1px 15px rgba(90, 198, 255, 0.52);
    cursor: pointer;
}
#big img {
    width: 150px;
    height: 150px;
    opacity: 0.9;
    text-align: center;
}
.section2-div2_2_2 img {
    width: 95%;
    height: 300px;
    text-align: center;
    padding: 10px;
    opacity: 0.9;
}
.div_img {
    display: flex;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    width: 100%;
    height: calc(90% + 50px);
    text-align: center;
    top: 100px;
    left: 0px;
    display: none;
    cursor: pointer;
}
.div_img img {
    width: 50%;
    height: 80%;
}
.div_img video {
    width: 600px;
    height: 400px;
}
#stop1 span {
    color: red;
    height: 50px;
    width: 200px;
    font-size: 1.3rem;
    background: #ababab;
    border-radius: 25px;
    padding-left: 10px;
    padding-right: 10px;
}
.div_img_cl1 {
    animation-name: myani1;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: both;
}
/*关于我们*/

.section3 {
    height: 100%;
}
.section3-div3 {
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: black;
}
.section3-div3 h1 {
    color: #dadada;
    border-bottom: dashed 1px rgb(150, 150, 150);
    cursor: default;
}
.section3-div3 div {
    width: calc(100% / 3 - 0px);
    height: 300px;
    transition: 2s;
}
.section3-div3 div ul {
    list-style: none;
    text-align: center;
}
.section3-div3 div ul li {
    margin: 15px;
    color: rgb(150, 150, 150);
    text-decoration: none;
    font-size: 1.2rem;
    cursor: default;
}
.section3-div3 div ul li:hover {
    color: #c60;
}
.section3-div3 div ul li a {
    color: rgb(150, 150, 150);
    text-decoration: none;
    font-size: 1.2rem;
}
.section3-div3 div ul li a:hover {
    color: #c60;
}
.section3-div3 div ul li a img {
    width: 100px;
    height: 100px;
}
.section3-div3 div ul li a img:hover {
    box-shadow: 0 0 15px rgba(90, 198, 255, 0.52), 1px 1px 15px rgba(90, 198, 255, 0.52), -1px 1px 15px rgba(90, 198, 255, 0.52);
}
.erweima {
    animation-name: myani3;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}
.section3-div4 {
    height: 50px;
}
.section3-div4 ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    list-style: none;
}
.section3-div4 ul li {
    width: calc(100% / 3 - 0px);
    color: #d7d7d7;
    font-size: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: 2s;
}
.section3-div4 ul li a {
    color: #a5a5a5;
    font-size: 1.3rem;
    text-decoration: none;
}
.section3-div4 div ul li + li {
    border-left: solid 2px #D7D7D7;
}
footer {
    height: 50px;
}
footer div ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    list-style: none;
}
footer div ul li {
    width: calc(100% / 3 - 0px);
    color: #d7d7d7;
    font-size: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: 2s;
}
footer div ul li + li {
    border-left: solid 2px #D7D7D7;
}
.text-hide1 {
    display: none;
}
.text-hide5 {
    display: none;
}
/*图片轮播*/

.div_souye {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.div_souye div {
    text-align: center;
    margin-top: 10px;
}
.div_souye div img {
    width: 99%;
    opacity: 0.9;
}
.div_souye div button {
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    padding: 5px;
    margin: 5px;
    opacity: 0.9;
}
/*图标*/

.side-bar {
    width: 100%;
    height: 80px;
    padding-bottom: 0;
}
.ico {
    background: url(pic/icon.jpg) no-repeat;
    overflow: hidden;
    border-radius: 66px;
    margin: 10px;
    transform: scale(0.9, 0.9);
}
.ico:hover {
    box-shadow: 1px 1px 20px red, 1px -1px 20px #fc9997;
}
.div_form {
    position: fixed;
    top: 290px;
    left: 0;
    width: 100%;
    height: 150px;
    display: none;
    text-align: center;
}
.div_form form {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #111111;
    text-align: center;
    font-size: 1.2rem;
}
.div_form form table {
    background: #D7D7D7;
}
.div_form form input {
    font-size: 1.2rem;
    height: 30px;
}
.side-bar ul {
    display: flex;
    justify-content: center;
    list-style: none;
}
.side-bar ul li a {
    width: 66px;
    height: 66px;
}
.side-bar .ico_qq {
    width: 66px;
    height: 66px;
    background-position: -353px -531px;
}
.side-bar .ico_chat {
    width: 66px;
    height: 66px;
    background-position: -441px -532px;
}
.side-bar .ico_blog {
    width: 66px;
    height: 66px;
    background-position: -173px -532px;
}
.side-bar .ico_mail {
    width: 66px;
    height: 66px;
    background-position: -531px -621.5px;
}
/*动画*/

@keyframes myani {
    0% {
        border-radius: 50px;
        opacity: 0.3;
        transform: scale(1, 1);
    }
    100% {
        opacity: 0.9;
        border-radius: 200px;
        transform: scale(0.8, 0.8);
    }
}
@keyframes myani1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.95;
    }
}
@keyframes myani2 {
    0% {
        color: #c3c3c3;
    }
    50% {
        color: #c60;
    }
    100% {
        color: #c3c3c3;
    }
}
@keyframes myani3 {
    0% {
        transform: rotateY(0deg) scale(0.8, 0.8);
    }
    50% {
        transform: rotateY(360deg) scale(1.5, 1.5);
    }
    100% {
        transform: rotateY(0deg) scale(0.8, 0.8);
    }
}
/************iPad横屏端************/

@media only screen and (min-width: 768px) and (max-width: 1028px) {
    .section1-div1_1_1 img {
        height: 200px;
    }
    .section1 .section1-div1_1 {
        margin-top: 80px;
    }
    footer div ul li {
        width: calc(100% / 2 - 0px);
    }
    .text-hide3 {
        display: none;
    }
}
/************iPad竖屏端************/

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .nav1 {
        justify-content: center;
    }
    .nav1 ul {
        justify-content: center;
    }
    .nav1 li {
        padding-bottom: 5px;
    }
    .section0-div0_2_ul {
        transform: scale(1.2, 1.2);
    }
    .section0-div0_2 ul li {
        text-align: center;
    }
    .section0-div0 img {
        width: 300px;
        height: 300px;
    }
    .text-hide {
        display: none;
    }
    .text-hide1 {
        display: block;
    }
    .section1 .section1-div1_1 {
        width: calc(100% / 2 - 24px);
        height: 250px;
    }
    .section1-div1_1_1 img {
        height: 180px;
    }
    .p1 {
        margin-top: 0px;
    }
    .section2-div2 .section2-div2_1 {
        width: 100%;
    }
    .div_img img {
        width: 50%;
        height: 50%;
    }
    footer div ul li {
        width: calc(100% / 2 - 0px);
    }
    .section2-div2 .section2-div2_1 {
        width: calc(100% / 2 - 30px);
        text-align: center;
    }
    .section2-div2 .section2-div2_1 ul {
        list-style: none;
    }
    .p {
        font-size: 1.8rem;
    }
    .text-hide3 {
        display: none;
    }
}
/************手机端************/

@media only screen and (max-width: 480px) {
    .text-hide {
        display: none;
    }
    .text-hide1 {
        display: block;
    }
    .section0-div0 div {
        width: 100%;
    }
    .section2-div2 .section2-div2_1 {
        width: 100%;
    }
    .section1 .section1-div1_1 {
        width: calc(100% - 24px);
        height: 400px;
    }
    .text-hide2 {
        display: none;
    }
    .text-hide3 {
        display: none;
    }
    footer div ul li {
        width: 100%;
    }
    .nav1 ul {
        width: 100%;
        flex-direction: column;
        text-align: center;
    }
    .ico {
        transform: scale(0.8, 0.8);
    }
    .section2-div2 {
        flex-direction: column;
    }
    .section2-div2 .section2-div2_1 {
        width: 100%;
        text-align: center;
    }
    .section2-div2 .section2-div2_1 ul {
        list-style: none;
    }
    .p {
        font-size: 1.7rem;
    }
    .text-hide4 {
        display: none;
    }
    .text-hide5 {
        width: 100%;
        display: block;
        position: fixed;
        top: 0;
    }
    .text-hide5 div select {
        color: #ababab;
        background-color: black;
        font-size: 1.2rem;
        border: 0;
        padding: 0 0 0 20px;
    }
    .text-hide5 div select option {
        text-align: center;
    }
    .nav2 {
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
    }
    .div_img video {
        width: 100%;
        height: 50%;
    }
    .section1-div1_1_1 img:active {
        animation-name: myani;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-iteration-count: 1;
        animation-direction: alternate;
        animation-fill-mode: both;
        box-shadow: 1px 1px 50px red, 1px -1px 50px #fc9997;
    }
}

HTML

<!DOCTYPE html>
<html>

<canvas id="c" class="text-hide"></canvas>
        <canvas id="ca" class="text-hide" width="400" height="400"></canvas>
    </section>
    <section class="section0" id="s1">
        <div class="p">个人信息</div>
        <div class="section0-div0">
            <div class="section0-div0_1 text-hide"><img id="img1" src="/uploads/user_upload/34099/timg_1510219026.jpg" alt="" />
            </div>
            <div class="section0-div0_2">
                <ul id="u0">
                    <li>姓名：福哥</li>
                    <li>出生年月：199x.09</li>
                    <li>所在地址：广东韶关</li>
                    <li>手机号码：66666666666</li>
                    <li>微信：666666666666</li>
                    <li>毕业学校：中山职业技术学院</li>
                    <li>学历：大专</li>
                    <li>院系：信息工程学院</li>
                    <li>专业：Android移动应用开发</li>
                    <li></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="section1" id="s2">
        <div class="p">兴趣爱好</div>
        <div class="section1-div1">
            <div class="section1-div1_1">
                <div class="section1-div1_1_1"><img src="/uploads/user_upload/34099/timg1.jpg" alt="" />
                </div>
                <div class="section1-div1_1_2">
                    <div class="section1-div1_1_3">打乒乓球</div>
                    <div><em>热爱度：<span>90%</span></em>
                    </div>
                </div>
                <div class="p1"><em><span>成就：</span>左右手都会，乒乓球课成绩90分以上</em>
                </div>
            </div>
            <div class="section1-div1_1">
                <div class="section1-div1_1_1"><img src="/uploads/user_upload/34099/timg2.jpg" alt="" />
                </div>
                <div class="section1-div1_1_2">
                    <div class="section1-div1_1_3">喜欢下棋</div>
                    <div><em>热爱度：<span>90%</span></em>
                    </div>
                </div>
                <div class="p1"><em><span>成就：</span>象棋比赛曾获得前三，现任棋弈社教学部副部长</em>
                </div>
            </div>
            <div class="section1-div1_1">
                <div class="section1-div1_1_1"><img src="/uploads/user_upload/34099/timg3.jpg" alt="" />
                </div>
                <div class="section1-div1_1_2">
                    <div class="section1-div1_1_3">看动漫</div>
                    <div><em>热爱度：<span>90%</span></em>
                    </div>
                </div>
                <div class="p1"><em><span>成就：</span>无</em>
                </div>
            </div>
            <div class="section1-div1_1">
                <div class="section1-div1_1_1"><img src="/uploads/user_upload/34099/timg4.jpg" alt="" />
                </div>
                <div class="section1-div1_1_2">
                    <div class="section1-div1_1_3">看小说</div>
                    <div><em>热爱度：<span>90%</span></em>
                    </div>
                </div>
                <div class="p1"><em><span>成就：</span>学习自己写小说，已写好几部目前停更</em>
                </div>
            </div>
        </div>
    </section>
    <section class="section2" id="s3">
        <div class="p">社会经历</div>
        <div class="section2-div2">
            <div class="section2-div2_1">
                <div class="section2-div2_2_1">社团介绍</div>
                <div class="section2-div2_2_2">
                    <ul>
                        <li>背景：创于2007年，兴趣爱好类型社团，其意义丰富大学生活，放松压力同时锻炼思维能力，以棋交友</li>
                        <li>活动：象棋新生杯，趣味杯，社团文化节，五校联谊，五校联赛</li>
                        <li>社团公众号</li>
                    </ul>
                    <div id="big" class="section2-div2_2_2_1" onclick="picBig()">
                        <img src="/uploads/user_upload/34099/weixin.jpg" alt="" />
                    </div>
                </div>
            </div>
            <div class="text-hide section2-div2_1">
                <div class="section2-div2_2_1">棋弈社</div>
                <div class="section2-div2_2_2">
                    <img id="pic" src="/uploads/user_upload/34099/timg1.jpg" onmouseover="stop1()" onmouseout="start1()" />
                    <br/>
                </div>
                <div class="section2-div2_2_1">
                    <button id="1" value="1" onmousedown="onMousedown(this)" onmouseout="start1()">1</button>
                    <button id="2" value="2" onmousedown="onMousedown(this)" onmouseout="start1()">2</button>
                    <button id="3" value="3" onmousedown="onMousedown(this)" onmouseout="start1()">3</button>
                </div>
            </div>

<div class="section2-div2_1">
                <div class="section2-div2_2_1">社团贡献</div>
                <div class="section2-div2_2_2">
                    <ul>
                        <li>担任教学部副部长，教导师弟师妹各种棋艺</li>
                        <li>创建社团公众号，管理公众号，编写推文</li>
                        <li>社团活动工作人员</li>
                        <li><a href="https://u1877190.jisuwebapp.com/s?id=3015327" target="_blank">社团生活H5制作</a>
                        </li>
                        <li><a href="#" onclick="video();return false;">社团趣味杯图片制作</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="section3" id="s4">
        <div class="p">关于我们</div>
        <div class="section3-div3">
            <div>
                <ul>
                    <h1 class="text-hide">合作伙伴</h1>
                    <li class="text-hide"><a href="#">爱奇艺</a>
                    </li>
                    <li class="text-hide"><a href="#">芒果TV</a>
                    </li>
                    <li class="text-hide"><a href="#">腾讯</a>
                    </li>
                    <li class="text-hide"><a href="#">哔哩哔哩</a>
                    </li>

</ul>
            </div>
            <div>
                <ul>
                    <h1 class="">微信公众号</h1>
                    <li class="">福祉昌延</li>
                    <li class="text-hide3">fg1754574980fzcy</li>
                    <li class="">二维码</li>
                    <li class="erweima" id="big1">
                        <a href="#" onclick="picBig1();return false;"><img src="/uploads/user_upload/34099/fzcy.jpg" />
                        </a>
                    </li>

</ul>
            </div>
            <div>

<ul>
                    <h1 class="text-hide">联系方式</h1>
                    <li class="text-hide"><a href="#">微博：weibo.com/fzcy</a>
                    </li>
                    <li class="text-hide"><a href="#">邮箱：666666@qq.com</a>
                    </li>
                    <li class="text-hide"><a href="#">地址：中职院西区4栋504</a>
                    </li>

</ul>
            </div>
        </div>
    </section>

<div class="side-bar">
        <ul>
            <li class="ico ico_qq" onclick="picBig2()"></li>
            <li class="ico ico_chat" onclick="picBig2()"></li>
            <li class="ico ico_blog" onclick="picBig2()"></li>
            <li class="ico ico_mail" onclick="picBig2()"></li>
        </ul>
    </div>
    <canvas id="ca1"></canvas>
    <div class="text-hide1 section3-div4">
        <ul>
            <li><a href="#">客户端</a>
            </li>
            <li><a href="#">触屏版</a>
            </li>
            <li><a href="#">电脑版</a>
            </li>
        </ul>
        <hr/>
    </div>
    <footer>
        <div>
            <ul>
                <li>CopyRight © FZCY 福祉昌延</li>
                <li class="text-hide2">宇宙ICP备666666号</li>
                <li class="text-hide3">福祉昌延可许证：F-ZCY-BK66666</li>
            </ul>
        </div>
    </footer>

</html>

主页模板

h5+js+css3

编辑器支持Emmet

快捷键

主页模板

h5+js+css3

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：