實現一個博客系統(前端頁面設計)

                        博客系統的四個頁面展示效果:

                        注意CSS有一些隱式規定,下面代碼的狀態:上下邊距不是50px(不是兩者邊距之和,而是他們的最大值);上下邊距塌方問題,況且只在垂直方向有,水平方向就是他們的和;況且他的內邊距啥問題都沒有;

                          .child1{
                                    background-color:red;
                                    height:300px;
                                    width:300px;
                                    margin-bottom:30px;
                                }
                                .child2{
                                    background-color:green;
                                    height:300px;
                                    width:300px;
                                    margin-top:20px;;
                                }
                        <div class="parent">
                            <div class="child1"></div>
                            <div class="child2"></div>
                        </div>

                        1.先做一個練習實現一個登陸界面:

                        1)我們本質上是實現的思路是在瀏覽器上面有一個子元素的背景,讓他實現水平居中(father1);

                        2)我們在father里面繼續創建出一個子元素father2,讓他實現垂直水平居中通過彈性布局的方式(father2每一行里面包含了h3標簽和輸入框標簽),還有一個按鈕;

                        3)重點:我們如何保證實現文字和輸入框一樣高呢?控制文字和輸入框之間的距離呢?

                        還是讓每一行實現彈性布局,因為他是水平排列的;就是說直接給h3標簽一個背景,因為h3是一個文字,垂直水平居中即可,然后設置h3標簽的背景寬度+input標簽的背景=父親元素的背景寬度(father2)

                        4)如果說上面的文字和標簽與下面的文字和標簽距離緊緊挨在一起,那么還可以設置外邊距讓上下有些距離;

                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Document</title>
                            <style>
                                *{
                                    padding:0;
                                    margin:0;
                                    box-sizing:border-box;
                                }
                                .father1{
                                    background-color:grey;
                                    height:300px;
                                    width:500px;
                                    /* 實現塊級元素在水平方向上垂直居中 */
                                    margin:0 auto;
                                    /* 控制登陸界面的大的背景在父親背景中水平垂直居中 */
                                    display:flex;
                                    justify-content:center;
                                    align-items:center;   
                                }
                                .father2{
                                    /* background-color:red; */
                                    width:500px;
                                    height:100px;
                                }
                                .child{
                                    /* 實現水平兩個h3 input標簽實現彈性布局 */
                                    display:flex;
                                    justify-content:center;
                                    align-items:center;
                                    padding:10px;
                                }
                                h3{
                                    /* 控制在背景圖中垂直水平居中 */
                                    text-align:center;
                                    line-height:10px;
                                     width:180px;
                                     height:10px;        
                                }
                                input{
                                   
                                    width:260px;
                                    height:25px;
                                    /* 控制輸入框字體變大 */
                                    font-size:20px;
                                }
                                button{
                                    width:150px;
                                    height:40px;
                                    background-color:orange;
                                    border:3px ridge grey
                                }
                                button:active{
                                    background-color:black;
                                    color:red;
                                }
                                .father3{
                                    display:flex;
                                    /* 我們發現使用margin:0 auto是無法控制按鈕垂直水平居中 */
                                    justify-content:center;
                                    align-items:center;
                                }   
                              
                            </style>
                        </head>
                        <body>
                            <div class="father1">
                                <div class="father2">
                                <div class="child">
                                    <h3>用戶名</h3><input type="text" class="username">
                                </div>
                             
                            <div class="child">
                                <h3>密碼</h3> <input type="text" class="password">
                            </div>
                            <div class="father3">
                                <button>提交</button>
                            </div>
                            </div>
                        </body>
                        </html>

                        ?2.實現博客系統的博客列表頁

                        ?上張圖片的最左邊和最右邊叫做空隙,中間的部分叫做版心,版心里面又包含兩部分,一部分是左側的用戶信息區域,右側是博客列表區域

                        版心其實就是一個導航欄下邊的div標簽,設置背景顏色和垂直居中就行了;

                        在calc函數可以自動計算高度,在減號左右加上空格

                        在博客列表頁里面,在這里面會展現出一組博客,在這里面,每一篇博客都有一個標題和摘要,點擊標題,就可以進入到對應的博客正文

                        在我們即將要實現的博客列表頁中,就包含了一個導航欄,下面左邊是一個用戶信息區域,右側是一個博客列表區域

                        1.首先我們實現一個導航欄(navigation)

                        1)在導航欄里面,包含著圖片,標題,標題和a標簽鏈接之間的距離(因為從頁面展示效果來看,它們之間隔了一個巨大的空格)我們用一個<span>標簽來進行撐開;

                        2)我們還發現,四個標簽頁里面都有導航欄,所以我們在設計頁面的時候,把這個代碼直接進行復刻,并且把導航欄里面相同的CSS樣式寫到一個文件里面,我們直接說在<link rel="stylesheet" href="css/common.css"

                        3)如何設置各種a標簽在導航欄里面垂直水平居中呢??

                        因為當我們進行設置圖片變成圓形的時候,發現導航欄里面的文字都在導航欄偏下的位置,此時我們在父親元素里面加上彈性布局,并根據align-items:center;保證這里面的文字和a標簽垂直居中;況且我們還想讓圖片與文字有點距離,可以設置一些內外邊距;

                        4)導航欄實現完畢之后,那么如何實現頁面的中心區域呢?

                        設置版心,他們是水平方向上進行排列的,就要用到彈性布局;在版心的左側展示個人信息,所以說要窄一點,右側的博客詳情頁,要寬一點

                        5)在.left區域,要實現一個信息展示頁

                        最大的父親元素是一個大的邊框,然后第一行是一個頭像,第二行是一個用戶名(h系列標簽可以搞定),第三層是一個超鏈接,第四層是一系列的統計信息;

                        6)下面這個問題如何處理?

                        下面的兩行分別是套著兩層div標簽,但是紅色的背景圖明顯是顯示著不太好看,那么如何改成白色背景的展示效果呢?

                        實現彈性布局,再調用justfiy-content:space-around,還可以調整外邊距來控制文字之間的距離

                        6)在.right區域,我們要實現博客列表頁

                        在右側,每一個部分表示一篇博客;

                        最上面是一個標題,顯示我的第幾篇博客,第二層是發布博客的日期,第三層是文章的具體摘要信息,第四層是一個按鈕,查看全文

                        注意:之前寫的導航欄以及寫的個人信息展示頁面,是四個頁面都共有的公共部分,但是右側的博客列表展示,是博客列表頁專有的特定展示樣式

                        ?3.實現博客正文頁

                        1)上面的導航欄和左側的個人信息頁面保持不變,只是版心的右側博客詳情頁變成了一篇博客的具體詳情信息;

                        所以說我們先把第一個的博客列表頁中的導航欄和版心左側的個人信息代碼給拷貝過來,并引入CSS對應的代碼

                        2)右側只有三塊部分,標題,博客的日期,還有文章的具體內容

                        3)當前我們已經實現了博客列表頁和博客詳情頁,同時我們也把博客列表頁和博客詳情頁通過a標簽進行了關聯(點擊a標簽之后,就跳轉到指定的頁面了)

                        4)但是此時還是出現了問題:點擊了第一個博客的查看詳情,進入到了第一篇博客的詳情頁面,再點擊第二篇博客的查看詳情,看到的還是第一篇的博客的詳細頁面;顯然這是不科學的,這是需要解決的;當前的網頁都是靜態頁面,頁面的內容是不會改變的,之邀訪問頁面的地址,始終固定,都是在HTML寫死的;

                        1)如果說想通過靜態頁面實現點擊博客1,顯示博客1的詳情頁面,點擊博客2,展現博客2的詳情界面,也不是不可以,可以搞多個blog2.html,分別是1,2,3;a標簽的鏈接分別指向不同的HTML,這就需要搞很多HTML;

                        2)更好的方法是,來進行動態生成,HTML的結構框架樣式都不發生變化,只是根據用戶操作的不同,生成的頁面內容不同,這就叫做動態頁面;這就需要后端開發了;

                        后端開發:就是根據用戶輸入的不同,來進行動態的生成結果,這個歌動態生成的過程可能就會涉及到一系列可能復雜的業務邏輯和數據的加工

                        3)如果說不計成本,還可以使用靜態頁面(開發成本高);一些重要的網站,全部變成靜態頁面的,就是不可變的,不涉及到計算,已經設計好的;(要是動態頁面,業務邏輯更復雜,就會可能會發生SQL注入,病毒入侵)

                        4.實現博客登錄界面

                        1)還是有一個導航欄,直接把代碼粘貼復用,引入對應的CSS樣式即可,況且因為是博客登陸界面,所以我們需要把注銷按鈕給隱藏起來

                        2)我們還是設置一個寬度和瀏覽器寬度相同的大背景,里面存放博客登陸界面的背景,里面想要實現博客登陸界面的背景,實現水平垂直居中,就要把它變成彈性布局的方式;

                        3)在子背景中主要包含下面幾個部分:登陸標題,有兩行的文字和輸入框,最先便是一個提交按鈕

                        在進行h標簽的排版時,可以直接設置外邊距,并且讓它水平居中;

                        4)對于輸入框來說,一共有兩種邊框,一種是未選中狀態的邊框:border;還有一種選中的邊框,一種就是選中文字后出現的邊框,叫做輪廓線outline;none;

                        5.實現寫博客的界面---博客編輯頁

                        現在頁面主要分為三部分:

                        1)導航欄,直接在代碼中引入前面寫的導航欄和導航欄的CSS樣式

                        2)文章編輯頁(用戶輸入文章標題),發布按鈕

                        3)實現markdown編譯器

                        我們在這里面需要的是使用開源的第三方的markdown編譯器,集成進來即可;

                        4)在導航欄下邊,我們在這里面還是要實現一個版心,這個板心包含上下兩部分,上面部分包含標題編輯頁和發布按鈕;下邊部分包含markdown編譯器

                        標題編輯框的寬度加上發布按鈕的寬度=版心的寬度

                        對于這個博客標題編輯頁面,要去掉邊框,輪廓線并給他們加上圓角矩形,我們還想是說給博客的文章編輯頁加上一個半透明的效果;

                        border:none
                        outline:none
                        border-radius:10px
                        background-color:rgba(255,255,255,0.8)--實現半透明效果的背景顏色

                        5)markdown編譯器的官網是http://pandao.githup.io/editor.md/http://pandao.githup.io/editor.md/其實從本質上來說,像前端的第三方庫,安裝都是非常簡單的,只要下載下來放到一個指定的目錄就可以了,甚至有的前端的庫,直接給你提供一個CDN網絡鏈接,都不用下載,直接引入這個網絡地址都可以用

                        1)點擊官網中的下載安裝,直接點擊Githup下載

                        2)下載之后,直接點擊頁面中的解壓縮,然后得到具體文件之后,直接拷貝到博客文件也就是項目目錄中,并把名字改成editor.md;

                        3)首先在前端頁面中要有一個div來進行存放我們的markdown編譯器

                        4)還需要進行引入一些依賴

                          <link rel="stylesheet" href="css/commen.css">
                            <link rel="stylesheet" href="css/blog.css">
                            <link rel="stylesheet" href="css/text.css">
                            <!-- 引入 editor.md 的依賴 -->
                            
                        <link rel="stylesheet" href="editor.md/css/editormd.min.css"/>   
                        <script src="js/jquery.min.js"></script>
                        <script src="editor.md/lib/marked.min.js"></script>
                        <script src="editor.md/lib/prettify.min.js"></script>
                        <script src="editor.md/editormd.js"></script>
                        

                        5.在我們的script標簽頁里面還要進行引入一些JS代碼

                        <script>
                            //首先要初始化編譯器
                            //先創建出一個textinner對象
                            //editormd相當于是一個函數,生成一個editor對象
                            //第一個參數是要指定放到哪一個html標簽中,元一個html標簽關聯,參數就是對應的ID;
                            var editor=editormd("editor", {
                                //這里的尺寸必須在這里設置,不能依靠CSS進行設置
                                width:"100%",
                                // 這是計算makdown正文的高度
                                height:"1000px",
                                //編輯器的初始內容
                                markdown:"#在這里寫一下第一篇博客",
                                //編譯器所用的插件所在的路徑
                                path:"editor.md/lib/"
                            });
                           
                        </script>

                        在這里面我們一定要保證editor.md的路徑和我們寫JS的代碼的路徑必須是同級目錄

                        6.網上搜jquery,3.6版本,點擊壓縮過的(compress),然后再創建出一個JS目錄

                        里面創建出一個JS文件,后綴名是.js(本質上是Jquery中的一大堆代碼);

                        評論 24 您還未登錄,請先 登錄 后發表或查看評論
                        免費個人博客系統(兼多用戶博客系統)是支持一個空間2個網站的全能型網站管理系統,本免費個人博客系統通用和拓展性強,博客、文章系統、商城、企業網站、個性化論壇等類型網站都可以使用,將來網站無論如何轉型或拓展,只需要修改模板就可以實現,無需重建網站。本系統不同于以往任何邏輯架構的網站程序。本軟件開發者希望通過注重商業化開發,助力用戶通過網絡創業和賺錢,當然您也可以通過這個軟件在互聯網高效地展示自己。 新版本: 新增wd()方法可以在任何模板調取任何文章商品數據,并自動生成緩存。 新版本還增加了十萬多天然鉆石及其它商品對接免費接口等。 詳細說明: 1.本個人博客系統可以用于商業用途,本軟件官方、開發者不收取任何授權費用; 2.本個人博客系統是支持一個空間2個網站的全能型博客系統; 3.本個人博客系統通用和拓展性強,博客、文章系統、商城、企業網站、個性化論壇等類型網站都可以使用; 4.本個人博客系統功能強,代碼少,運行效率更高,程序運行速度是其它主流同類軟件的3~4倍,內存占用不到其它主流同類軟件的五分之一; 5.開啟和關閉會員注冊,開啟和關閉普通會員投稿功能; 6.會員功能拓展到了兼職專題功能,SEO設置和開放特約編輯的多用戶不同權限管理功能等; 7.超級管理員可無密碼一鍵登錄任意會員后臺,管理員用受限登錄會員身份后臺發布信息,也可讓網站攻擊者無法猜解密碼; 8.自動生成手機版網站,系統默認帶www的域名為PC模板站,不帶www的頂級域名為手機站,不增加維護難度,就可以同時擁有2個網站; 9.博客程序還包含訂單、秒殺、限時搶購和數量虛擬功能,助力用戶互聯網創業和商業化運營,就看腦洞開的你怎么使用了; 10.本個人博客系統能夠適應各種界面瀏覽器,后臺可手機隨時隨地訪問、管理和更新網站; 11.可一鍵切換成.shtml、.html、.htm、.asp、.aspx、.cgi、.php、.jsp、.cgi、/ 等網頁后綴,模擬不同語言編程的網站程序; 12.前端頁面精簡,前端編碼不用div標簽,不用id、class規則的CSS樣式,最限度精簡前端代碼,鼓勵用戶拋棄div+CSS前端代碼編寫模式,我們這樣做不是為了迎合HTML5,只是為了更合理的應用HTML標簽; 13.安裝程序自動識別和設置偽靜態; 14.全站無死角SEO設置; 15.強的內鏈邏輯,特別適應大數據類型網站使用; 16.強的廣告和精準廣告設置; 17.數據緩存模式,不依賴外部服務器組件和其它插件,不額外占用服務器系統內存資源; 18.刪除局部緩存和一鍵清除全部緩存; 19.可設置郵件實時通知新訂單和訪客留言; 20.可設置管理員回復留言可同時郵件通知留言者; 21.可查看和刪除無用上傳文件,為將來數據備份節省時間和空間; 22.特色的tag標簽功能; 23.分類、tag標簽、url表單填寫自動補缺; 24.url表單可自動生成拼音,也可以用漢字,自動轉碼,有利于SEO搜索引擎排名; 25.開放式PHP原生態模板,用戶任意修改、穿插內容或廣告,無需花時間研究額外規則,模板修改成本更低; 26.可對模板備份,使用備份模板,并可對模板恢復系統初始狀態; 27.模板修改全站頁面秒更新; 28.可自定義SQL語句的圖片展示頁面; 29.后臺可控制各個模塊是否開啟驗證碼、設置驗證碼長度,以及設置驗證碼破解難度; 30.訪客留言關鍵詞過濾; 31.可自定義導航; 32.可在線編輯js和CSS文件; 33.本免費個人博客系統(兼多用戶博客系統)無后門。

                        “相關推薦”對你有幫助么?

                        • 非常沒幫助
                        • 沒幫助
                        • 一般
                        • 有幫助
                        • 非常有幫助
                        提交
                        ??2022 CSDN 皮膚主題:游動-白 設計師:我叫白小胖 返回首頁

                        打賞作者

                        學不會二叉樹的小比特

                        你的鼓勵將是我創作的最大動力

                        ¥2 ¥4 ¥6 ¥10 ¥20
                        輸入1-500的整數
                        余額支付 (余額:-- )
                        掃碼支付
                        掃碼支付:¥2
                        獲取中
                        掃碼支付

                        您的余額不足,請更換掃碼支付或充值

                        打賞作者

                        實付
                        使用余額支付
                        點擊重新獲取
                        掃碼支付
                        錢包余額 0

                        抵扣說明:

                        1.余額是錢包充值的虛擬貨幣,按照1:1的比例進行支付金額的抵扣。
                        2.余額無法直接購買下載,可以購買VIP、C幣套餐、付費專欄及課程。

                        余額充值
                        久久悠悠精品综合网