1小時(shí)搭建簡約漂亮的個(gè)人網(wǎng)站（）

有一個(gè)搭建自己個(gè)人網(wǎng)站的想法，把自己的一些技術(shù)文章、日記、創(chuàng)業(yè)想法等等統(tǒng)統(tǒng)寄托在這里。

后臺(tái)前端統(tǒng)統(tǒng)來一套！

首先是前端！

先上這個(gè)長得好看的效果圖。

概述

目前為只完成了該頁面的UI開發(fā)，暫時(shí)沒有實(shí)現(xiàn)與后臺(tái)交互的功能?，F(xiàn)在在學(xué)習(xí)ssm框架的搭建，爭取過年前搞定后臺(tái)的基本接口。然后把這個(gè)頁面的登錄、技術(shù)文章、隨手記與后臺(tái)交互的功能完成了。

希望各位可以去我的地址添個(gè)小星星☆，最新的額代碼會(huì)更新在這，哈哈。

Demo 地址

文章

文章也會(huì)分名為BG前端，BG后端兩個(gè)板塊，專門用于記錄該項(xiàng)目的問題；按進(jìn)度更新文章。

苦水

一個(gè)開發(fā)者，搞這些有點(diǎn)吃力，不過很開心，把工作推到年后，現(xiàn)在可以安安心心學(xué)習(xí)一下，搞下自己想做的東西！

首先要入手的便是用了1天的時(shí)間學(xué)習(xí)的使用，第二天便實(shí)踐。

實(shí)踐開始 1.準(zhǔn)備Jq、的所需要的材料

2.創(chuàng)建.html引進(jìn)jq、文件

3.實(shí)現(xiàn)

3.1輪播圖：

代碼主要參照官網(wǎng)提供的示例，html代碼按排班分段給出、css、js代碼最后一起貼出

    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
            <li data-target="#carousel-example-generic" data-slide-to="1">li>
            <li data-target="#carousel-example-generic" data-slide-to="2">li>
            <li data-target="#carousel-example-generic" data-slide-to="3">li>
            <li data-target="#carousel-example-generic" data-slide-to="4">li>
            <li data-target="#carousel-example-generic" data-slide-to="5">li>
        ol>
        
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/ic_p4.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p5.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p6.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p7.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p8.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p9.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
        div>
        
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
            <span class="sr-only">Previousspan>
        a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
            <span class="sr-only">Nextspan>
        a>
    div>

3.2大功能塊

店鋪：放為了放我今年計(jì)劃開淘寶店商品的目錄，以及我喜歡的一些物品的連接。

紀(jì)念館：放一些階段性的具有意義的文章、照片等

私人角落：放日記、技術(shù)文章等

    <div class="row div_function">
        <div class="col-xs-4">
            <div class="panel panel-default" id="pFunc1">
                <div class="panel-body">
                    <strong>店鋪strong>
                    <img class="iv_function" src="img/ic_store.svg">
                div>
            div>
        div>
        <div class="col-xs-4">
            <div class="panel panel-default"  id="pFunc2">
                <div class="panel-body">
                    <strong>紀(jì)念館strong>
                    <img class="iv_function" src="img/ic_remeber.svg">
                div>
            div>
        div>
        <div class="col-xs-4">
            <div class="panel panel-default"  id="pFunc3">
                <div class="panel-body">
                    <strong>私人角落strong>
                    <img class="iv_function" src="img/ic_personal.svg">
                div>
            div>
        div>
    div>

3.3技術(shù)世界

這里是展示自己的技術(shù)文章，使用列表樣式

    <div class="container div_divider">
        
        <hr class="hr_1">Bigname Technology World !<hr class="hr_2">
        <div class="row">
            
            <div class="col-xs-9">
                <div class="list-group div_article">
                    
                    <a href="#" class="list-group-item active item_article_first">
                        <h4 class="list-group-item-heading">
                            My Life, Like Sun!
                        h4>
                    a>
                    
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設(shè)計(jì)理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android1.jpg">
                            div>
                        div>
                    div>
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設(shè)計(jì)理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android1.jpg">
                            div>
                        div>
                    div>
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設(shè)計(jì)理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android2.jpg">
                            div>
                        div>
                    div>
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設(shè)計(jì)理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                    所有設(shè)計(jì)源于生活，框終點(diǎn)在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android3.jpg">
                                <div>2017/12/9 12:09div>
                            div>
                        div>
                    div>
                div>
            div>

3.4個(gè)人標(biāo)簽、隨手記心情

            <div class="col-xs-3 div_record">
                
                <div class="jumbotron div_userinfo">
                    <img class="iv_user_head img-circle" src="img/ic_p5.jpg">
                    <div style="display: inline-block; margin-left: 12px;font-size: 18px;">梁世杰div>
                div>
                
                <div style="display: flex;">
                    <div style="flex: 1"><hr>div>
                    <div style="text-align: center;line-height: 48px;color: #34374C">記錄美好的心情div>
                    <div style="flex: 1"><hr>div>
                div>
                <input type="text" class="form-control" placeholder="標(biāo)題:美好的一天...">
                <br>
                <textarea class="form-control" rows="3" name=textarea placeholder="內(nèi)容:今天撿到一分錢?。?！^_^">textarea>
                <br>
                <div class="div_save">
                    <button type="button" class="btn btn-primary btn_save_record">savebutton>
                div>
                <hr>
                
                <div class="row div_little_func">
                    <div class="col-xs-4">
                        <button class="btn btn-default btn-cricle btn_login" data-toggle="modal" data-target="#loginModal">登button>
                    div>
                    <div class="col-xs-4">
                        <button class="btn btn-default btn-cricle btn_stay">留button>
                    div>
                    <div class="col-xs-4">
                        <button class="btn btn-default btn-cricle btn_write">寫button>
                    div>
                div>
            div>
        div>

3.5登錄模態(tài)框

-- 登錄模態(tài)框 -->
        <div class="modal fade bs-example-modal-sm" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title" id="myModalLabel" style="text-align: center;">登錄div>
                    div>
                    <div class="modal-body">
                        
class="form-horizontal" style="padding: 12px;">
                            <div class="form-group">
                                "text" class="form-control" id="inputEmail3" placeholder="賬戶名">         
                            div>
                            <div class="form-group">            
                                "password" class="form-control" id="inputPassword3" placeholder="密碼">
                            div>
                        
                    div>
                    <div class="modal-footer" style="text-align: center;">
                        "button" class="btn btn-primary" style="width: 100%">Login
                    div>
                div>
            div>
        div>

各個(gè)效果的代碼如上，多看官網(wǎng)！沒有完成不了的事。同時(shí)說一下，jq也是第一次用，慶幸沒出現(xiàn)什么問題，這么簡單也不應(yīng)該出現(xiàn)什么問題。~~(>_