css3-div+css3製作個人簡歷網頁

知識

css3佈局：flex（重點），不熟悉，邊查文檔邊做
錯誤：注意僞類不能操作除子元素外的其他元素
該小項目涉及到的知識點：佈局，動畫，排版，js DOM操作（不熟悉）
總結：審美不行，代碼敲的不多，很生澀

效果圖

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="src/css/index.css">
</head>

<body>
    <!-- 導航欄 -->
    <div class="header">
        <span id="one">個人信息</span>
        <span id="two">工作經歷</span>
        <span id="three">專業技能</span>
        <span id="four">榮譽證書</span>
        <span id="five">自我評價</span>
    </div>

    <!-- 內容 -->
    <div class="content">
        <div class="content1 dom">
            <div>
                <div>
                    <h3>基礎信息</h3>
                </div>
                <div>
                    <div><img src="src/image/user.svg" alt=""><span>姓名: &nbsp&nbsp&nbsp陳小堅</span></div>
                </div>
                <div>
                    <div><img src="src/image/birthday.svg" alt=""><span>生日: &nbsp&nbsp&nbsp1997.08</span></div>
                </div>
                <div>
                    <div><img src="src/image/location.svg" alt=""><span>現居: &nbsp廣東廣州</span></div>
                </div>
                <div>
                    <div><img src="src/image/study.svg" alt=""><span>學歷: &nbsp大學本科</span></div>
                </div>
                <div>
                    <div><img src="src/image/cog.svg" alt=""><span>專業: &nbsp網絡工程</span></div>
                </div>
            </div>
            <div>
                <div>
                    <h3>聯繫方式</h3>
                </div>
                <div>
                    <div><img src="src/image/mobile.svg" alt=""><span>電話: &nbsp&nbsp&nbsp15013225799</span></div>
                </div>
                <div>
                    <div><img src="src/image/wechat.svg" alt=""><span>微信: &nbsp&nbsp&nbsp15013225799</span></div>
                </div>
                <div>
                    <div><img src="src/image/qq.svg" alt=""><span>QQ: &nbsp&nbsp&nbsp&nbsp1948643206&nbsp</span>
                    </div>
                </div>
                <div>
                    <div><img src="src/image/briefcase.svg" alt=""><span>求職意向: &nbsp&nbsp&nbsp軟件開發</span></div>
                </div>
                <div>
                    <div><img src="src/image/mail.svg" alt=""><span>電子郵箱: [email protected]</span></div>
                </div>
            </div>
            <div>
                <!-- <h3>個人微信</h3><img src="src/image/wechat-mark.jpg" alt="" class="wechaterweima"> -->
                <h3>生活照</h3><img src="src/image/生活照.jpg" alt="" class="shenghuozhao">
            </div>
        </div>
        <div class="content2 dom">
            <div class="content2-items">
                <span>武漢映山居網絡科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>2017.09-2018.06&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>崗位：系統架構師</span>
                <div class="content2-items-work-content">
                    <p>1.負責公司系統的架構設計、研發工作；承擔從業務向技術轉換的橋樑作用；</p>
                    <p>2.協助項目經理制定項目計劃和控制項目進度；負責輔助並指導SA開展設計工作；</p>
                    <p>3.負責組織技術研究和攻關工作；負責組織和管理公司內部的技術培訓工作；</p>
                    <p>4.管理技術支撐團隊並給項目、產品開發實施團隊提供技術保障。理解系統的業務需求，制定系統的整體框架</p>
                </div>
            </div>
            <div class="content2-items">
                <span>武漢映山居網絡科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>2018.09-2019.06&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>崗位：前端開發工程師</span>
                <div class="content2-items-work-content">
                    <p>1.使用Div+css並結合Javascript負責產品的前端開發和頁面製作；</p>
                    <p>2.熟悉W3C標準和各主流瀏覽器在前端開發中的差異，能熟練運用DIV+CSS，提供針對不同瀏覽器的前端頁面解決方案。移動HTML5的性能和其他優化，爲用戶呈現最好的界面交互體驗和最好的性能；
                    </p>
                    <p>3.負責相關產品的需求以及前端程序的實現，提供合理的前端架構。改進和優化開發工具、開發流程、和開發框架；</p>
                    <p>4.與產品、後臺開發人員保持良好溝通，能快速理解、消化各方需求，並落實爲具體的開發工作；</p>
                </div>
            </div>
        </div>
        <div class="content3 dom">
            <div class="skill-items qianduan">
                <span>前端:</span>
                <div><span class="color">&nbsp</span>&nbsp;</div>
            </div>
            <div class="skill-items cplusplus">
                <span>c++:</span>
                <div><span class="color">&nbsp</span>&nbsp;</div>
            </div>
            <div class="skill-items python">
                <span>python:</span>
                <div><span class="color">&nbsp</span>&nbsp;</div>
            </div>
            <div class="skill-items JAVA">
                <span>JAVA:</span>
                <div><span class="color">&nbsp</span>&nbsp;</div>
            </div>
            <div class="skill-items AI">
                <span>AI:</span>
                <div><span class="color">&nbsp</span>&nbsp;</div>
            </div>


        </div>
        <div class="content4 dom">
            <div class="major">
                <div><span>專業技能證書</span></div>
                <p>1. 廣州大學第一屆程序設計競賽一等獎</p>
                <p>2. 廣州大學第一屆網絡技術設計競賽一等獎</p>
                <p>3. 廣州大學第一屆網頁開發設計競賽一等獎</p>

            </div>
            <div class="common">
                <div><span>通用技能證書</span></div>
                <p>1. 大學英語四六級證書</p>
                <p>2. 普通話二級甲等證書</p>
            </div>
        </div>
        <div class="content5 dom">
            <div class="first">
                <div><span>專業能力</span></div>
                <p>1. 全日制本科畢業，理論功底深厚</p>
                <p>2. 具有創造性思維，創新能力強</p>
            </div>
            <div class="second"></div>
            <div><span>擅長領域</span></div>
            <p>1. 熟悉前端開發，對前端技術有深入的理解</p>
            <p>2. 做過數據分析，數據挖掘，具備數學建模的能力</p>
            <div class="third">
                <div><span>綜合素質</span></div>
                <p>1. 有極強的執行力和抗壓力，有較好的溝通和解決問題的能力</p>
            </div>
        </div>

        <script>
            function clear(){
                var doc = document.getElementsByClassName("dom");
                console.log(doc)
                for(var i = 0;i<doc.length;i++){
                    doc[i].style.display = "none";
                }
            }
         
            var content1 = document.getElementsByClassName("content1")[0];
            var content2 = document.getElementsByClassName("content2")[0];
            var content3 = document.getElementsByClassName("content3")[0];
            var content4 = document.getElementsByClassName("content4")[0];
            var content5 = document.getElementsByClassName("content5")[0];
            
            var span1 = document.getElementById("one")
            span1.onclick = function(){
                clear();
                content1.style.display = "flex";
            }
            var span2 = document.getElementById("two")
            span2.onclick = function(){
                clear();
                content2.style.display = "flex";
            }
            var span3 = document.getElementById("three")
            span3.onclick = function(){
                clear(); 
                content3.style.display = "flex";
            }
            var span4 = document.getElementById("four")
            span4.onclick = function(){
                clear();
                content4.style.display = "flex";
            }
            var span5 = document.getElementById("five")
            span5.onclick = function(){
                clear();
                content5.style.display = "flex";
            }

        </script>
</body>

</html>

* {
    padding: 0;
    margin: 0;
}

body {
    background-image: url(../image/last.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.header {
    top: 100px;
    position: relative;
    height: 100px;
    width: 60%;
    margin: 0 auto;
    background-color: rgba(2, 8, 37, 0.3);
    align-content: flex-start;
    /*使得span之間的空格消失*/
    display: flex;
}

.header span {
    color: aliceblue;
    display: inline-flex;
    /*彈性佈局*/
    align-items: center;
    /*居中*/
    justify-content: center;
    /*垂直居中*/
    margin: 0 auto;
    position: relative;
    width: 20%;
    height: inherit;
    cursor: pointer;
    font-size: 1.2rem;
}

.header span:hover {
    color: red;
    background-color: rgba(28, 238, 238, 0.163);
}

.content {
    top: 100px;
    position: relative;
    height: 350px;
    width: 60%;
    margin: 0 auto;
    background-color: rgba(2, 8, 37, 0.3);
}

.content1,
.content2,
.content3,
.content4,
.content5 {
    width: 100%;
    height: 100%;
    position: absolute;
    /*設置爲絕對定位，根據父元素的，所有的content放在同一個區域*/
    align-content: flex-start;
    /*使得span之間的空格消失*/
    display: flex;
}

.content1 div {
    /*將content1水平分爲3個*/
    display: flex;
    /*彈性佈局*/
    align-items: center;
    /*居中*/
    justify-content: center;
    /*垂直居中*/
    flex-direction: column;
    margin: 0 auto;
    width: 33%;
    height: inherit;
    color: rgba(255, 255, 255, 0.5)
}

.content1 div {
    width: 100%;
    font-size: medium;
}

.content1 div div {
    display: flex;
    flex-direction: row;
    /*設置水平排列*/
}

.content1 div div img {
    height: 25px;
    width: 25px;
    margin-right: 20px;
}

.shenghuozhao {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    opacity: 0.5;
    margin-top: 60px;
    margin-bottom: 40px;
}

.content2 {
    display: flex;
    flex-direction: column;
    /*設置容器內的flex垂直排列*/
}

.content2 .content2-items {
    width: 100%;
    height: 50%;
    margin: 0 auto auto 0;
    left: 15px;
    position: relative;
}

.content2 .content2-items span {
    font-size: large;
    color: rgb(207, 206, 206);
    font-weight: bold;
}

.content2 .content2-items .content2-items-work-content {
    font-size: small;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 20px;
}

.content .content3 {
    flex-direction: column;
    display: flex;
}

.content3 .skill-items {
    height: 15%;
    position: relative;
    width: 60%;
    margin: 0 auto;
    margin-top: 5px;
    font-size: medium;
    color: rgba(241, 241, 241, 0.53);

}

.skill-items div {
    background-color: rgba(219, 255, 255, 0.163);
    width: 80%;
    position: absolute;
    left: 15%;
    display: inline-block;
}

.qianduan div span {
    background-color: rgb(7, 110, 110);
    width: 40%;
    transition: width 1s;
    position: absolute;
    animation: donghua-qianduan;
    animation-duration: 3s;
}

@keyframes donghua-qianduan {
    from {
        width: 0;
    }

    to {
        width: 40%;
    }
}

.qianduan .color::after {
    content: "40%";
    float: right;
}

.cplusplus div span {
    background-color: rgb(236, 185, 90);
    width: 60%;
    position: absolute;
    animation: donghua-cplusplus;
    animation-duration: 3s;
}

@keyframes donghua-cplusplus {
    from {
        width: 0;
    }

    to {
        width: 60%;
    }
}

.cplusplus .color::after {
    content: "60%";
    float: right;
}

.python div span {
    background-color: rgb(3, 78, 125);
    width: 70%;
    position: absolute;
    animation: donghua-python;
    animation-duration: 3s;
}

@keyframes donghua-python {
    from {
        width: 0;
    }

    to {
        width: 70%;
    }
}

.python .color::after {
    content: "70%";
    float: right;
}

.JAVA div span {
    background-color: rgb(224, 221, 120);
    width: 66%;
    position: absolute;
    animation: donghua-JAVA;
    animation-duration: 3s;
}

@keyframes donghua-JAVA {
    from {
        width: 0;
    }

    to {
        width: 66%;
    }
}

.JAVA .color::after {
    content: "66%";
    float: right;
}

.AI div span {
    background-color: rgba(193, 17, 17, 0.53);
    width: 45%;
    position: absolute;
    animation: donghua-AI;
    animation-duration: 3s;
}

@keyframes donghua-AI {
    from {
        width: 0;
    }

    to {
        width: 45%;
    }
}

.AI .color::after {
    content: "45%";
    float: right;
}

.content4 {
    flex-direction: column;
}

.content4 .major {
    height: 50%;
    width: 100%;
}

.content4 span {
    font-size: 35px;
    font-weight: 600;
    color: rgba(240, 248, 255, 0.319);
    margin-left: 10%;
}

.content4 p {
    margin-left: 8%;
    margin-top: 10px;
    color: rgba(189, 193, 196, 0.693);
}

.content p:hover {
    color: red;
}

.content5 {
    flex-direction: column;
}

.content5 span {
    font-size: 35px;
    font-weight: 600;
    color: rgba(240, 248, 255, 0.319);
    margin-left: 10%;
}

.content5 p {
    margin-left: 8%;
    margin-top: 10px;
    color: rgba(189, 193, 196, 0.693);
}



.content .content2 {
    display: none;
}

.content .content3 {
    display: none;
}

.content .content4 {
    display: none;
}

.content .content5 {
    display: none;
}

/* #one:hover .content1{   hover不能改變除子元素外的元素
    display: flex;
} */

css3-div+css3製作個人簡歷網頁

知識

效果圖

Code

css3-CSS+JavaScript製作滾動計數器

leetcode-接雨水

IDEA2020版本jsp編譯後class文件和java文件默認的存放路徑

Java-Tomcat的安裝及配置

leetcode-刪除最外層的括號

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結