css-博客樣式初體驗

来源:https://www.cnblogs.com/tynam/archive/2019/05/13/10858256.html
-Advertisement-
Play Games

css學習一周後，寫了個基礎博客樣式。 樣式是出來了，但是在寫的過程中感覺css寫的雜亂無章，可能是寫的太少了吧，條例不是很清除，只是在寫的過程 中一個點一個點的套，感覺樣式出來即可，沒有做到由全局出發考慮再到局部，再到細節的考慮。 總共耗時4個小時，寫的時候 html 部分頭腦很清晰，可以做到心中 ...


css學習一周後，寫了個基礎博客樣式。

樣式是出來了，但是在寫的過程中感覺css寫的雜亂無章，可能是寫的太少了吧，條例不是很清除，只是在寫的過程 中一個點一個點的套，感覺樣式出來即可，沒有做到由全局出發考慮再到局部，再到細節的考慮。

總共耗時4個小時，寫的時候 html 部分頭腦很清晰，可以做到心中有數，頁面劃分，標簽的使用感覺很順利成章。

但是在css部分，感覺很差，特別是在佈局上，沒有很好的規劃（主要原因是對各屬性值不太熟悉），不知道該屬性有什麼特征，導致後面的有些屬性加進去後發現前面的影響了，又回頭修改，前面的已修改又要修改其他地方影響的，反反覆復。。。。

 

望博客園大佬給點技巧

 

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>blogDemo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="flexDemo.css" />
</head>
<body>
    <header>
    </header>
    <nav>
        <li>
            <ul><a href="#">首頁</a></ul>
            <ul><a href="#">簡介</a></ul>
            <ul><a href="#">新聞</a></ul>
            <ul><a href="#">事實</a></ul>
            <ul><a href="#">聯繫</a></ul>

        </li>
    </nav>
    <div class="contain">
        <div class="left">
            <div leftContain>
                    <div class="leftContain">
                            <h3><a href="#" id="css2">CSS基礎教程二</a></h3>
                            <h5>2019 年 5 月 13日</h5>
                            <p>層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的電腦語言，由W3C定義和維護。</p>
                    </div>
                    <div class="leftContain">
                            <h3><a href="#" id="css1">CSS基礎教程一</a></h3>
                            <h5>2019 年 5 月 10日</h5>
                            <p>層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的電腦語言，由W3C定義和維護。</p>
                    </div>
                    <div class="leftContain">
                            <h3><a href="#">html基礎教程一</a></h3>
                            <h5>2019 年 5 月 7日</h5>
                            <p>超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於創建網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及移動應用程式的用戶界面[3]。網頁瀏覽器可以讀取HTML文件，並將其渲染成可視化網頁。HTML描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。</p>
                    </div>
                    <div class="leftContain">
                            <h3><a href="#">js基礎教程一</a></h3>
                            <h5>2019 年 5 月 4日</h5>
                            <p>JavaScript，通常縮寫為JS，是一種高級的，解釋型語言的編程語言。JavaScript是一門基於原型、函數先行的語言，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持I/O，比如網路、存儲和圖形等，但這些都可以由它的宿主環境提供支持。</p>
                    </div>
                    <div class="leftContain">
                            <h3><a href="#">vue基礎教程一</a></h3>
                            <h5>2019 年 5 月 3日</h5>
                            <p>Vue.js是一個用於創建用戶界面的開源JavaScript框架，也是一個創建單頁應用的Web應用框架。 2016年一項針對JavaScript的調查表明，Vue有著89%的開發者滿意度。 在GitHub上，該項目平均每天能收穫95顆星，為Github有史以來星標數第3多的項目。</p>
                    </div>
                    <div class="leftContain">
                            <h3><a href="#">node.js基礎教程一</a></h3>
                            <h5>2019 年 5 月 1日</h5>
                            <p>Node.js是一個能夠在伺服器端運行JavaScript的開放源代碼、跨平臺JavaScript運行環境。Node.js由Node.js基金會持有和維護，並與Linux基金會有合作關係。</p>
                    </div>

            </div>
        </div>
        <div class="right">
            <div class="rightContain">
                <h3>關於我</h3>
                <div id="fakeimg"><img src="../img/fakeimg.jpg" alt=""></div>
                <p>唐子凡<br>9歲，比較胖眼角上有一個黑痣，媽媽叫他哭痣因為我很小的時候很好哭所以叫哭痣。在下課的時候很少有人和我玩，有人打我，我一般不打他但他打我3下我就要反擊了。在學校是性格內向，在家裡是性格暴躁。我是屬雞得，是處女座。</p>
            </div>
            <div class="rightContain labelName">
                    <h3>我的標簽</h3>
                    <ul>
                            <li><a href="#">CSS基礎教程</a></li>
                            <li><a href="#">html基礎教程</a></li>
                            <li><a href="#">js基礎教程</a></li>
                            <li><a href="#">vue基礎教程</a></li>
                            <li><a href="#">node.js基礎教程</a></li>
                    </ul>
                </div>
            <div class="rightContain article">
                <h3>最新文章</h3>
                <ul>
                        <li><a href="#css1">CSS基礎教程一</a></li>
                        <li><a href="#css2">CSS基礎教程二</a></li>
                        <li><a href="#">CSS基礎教程三</a></li>
                        <li><a href="#">CSS基礎教程四</a></li>
                        <li><a href="#">CSS基礎教程五</a></li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <div class="sitLink">
            <ul>
                <li><a href="#">精選內容</a></li>
                <li><a href="#">熱門問答</a></li>
                <li><a href="#">熱門專欄</a></li>
                <li><a href="#">最新文章</a></li>
                <li><a href="#">最新活動</a></li>
                <li><a href="#">幫助中心</a></li>
                <li><a href="#">服務中心</a></li>
                <li><a href="#">服務條款</a></li>
            </ul>
        </div>
        <div id="copyright">Copyright © 2011-2019 FlexDemo. 當前呈現版本 19.02.27 <br>
                浙ICP備 15555555號-2   浙公網安備 33333333333333號  杭州杭州杭州有限公司版權所有 </div>
    </footer>
</body>
</html>

 

CSS：

* {
    margin: 0; 
    padding: 0;
}

html,body {
    width: 100%;
    background: #f1f1f1;
}

header {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-image: url(../img/header.jpg);
    background-size: cover;
}

/*導航*/
nav {
    height: 50px;
    background: #8D398F;
    margin: 3px auto;
}

nav li {
    list-style: none;
    margin: 0 40px;
}

nav li ul {
    width: 110px;
    float: left;
}

nav li ul:last-child {
    float: right;
}

nav li ul a {
    display: block;
    text-decoration: none;
    font-size: 21px;
    color: #f1f1f1;
    text-align: center;
    line-height: 50px;
}

nav li ul a:hover {
    color: #8D398F;
    background-color: #f1f1f1;
}

/*正文兩列*/
.contain{
    display: flex;
    margin: 10px;
}

.left, .right {
    float: left;
    margin:0 10px; 
}

.right h3, .left h3{
    padding: 10px 0;
}

.left {
    width: 80%;
    padding-top: 30px; 
}

.right {
    width: 20%;
}

.leftContain, .rightContain {
    margin:10px 10px; 
    background: #fff;
    padding: 20px;
}


.right ul {
    list-style: none;
}
.labelName a, .article a, .left h3 a{
    padding: 5px 0;
    display: block;
    font-size: 18px;
    text-decoration: none;
    color: #8D398F;
}

.labelName a:hover, .article a:hover, .left h3 a:hover{
    text-decoration: underline;
}


/*footer*/
footer{
    margin: 30px 0 0 0;
    background: rgb(93, 36, 94);
}

.sitLink{
    padding: 20px 0;
    width: 100%;
}

.sitLink ul {
    text-align: center;
    padding: 20px;
    list-style: none;
}

.sitLink ul li{
    display:inline-block;
    width: 100px;
}

.sitLink ul li a{
    display: block;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    color: rgb(235, 235, 235);
}

.sitLink ul li a:hover{
    text-decoration: underline;
}

#copyright {
    color: rgb(172, 172, 172);
    text-align: center;
    font-size: 13px;
    padding-bottom: 20px;
}

/*中間兩列自適應*/
@media screen and (max-width:1200px) {
    .contain{
        flex-wrap:wrap;
    }
    .left, .right{
       
        width:100%;
        padding: 0;
    }
}

 

結果：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • node第一個參數必須是err
    Node.js 約定回調函數第一個參數必須是錯誤對象err： 問題：Node.js約定回調函數第一個參數必須是錯誤對象err，如果沒有錯誤該參數就是null 原因：非同步執行分成兩段，在兩段之間拋出異常和錯誤程式無法直接捕獲，只能當做參數傳入第二段 ...
  • D3.js 弧生成器 (V3版本)
    弧生成器(Arc Generator) 弧生成器(Arc Generator)可憑藉起始角度、終止角度、內半徑、外半徑等，生成弧線的路徑，因此在製作餅狀圖、弦圖等圖表時很常用。 有四個訪問器需要謹記:內半徑訪問器innerRadius()、外半徑訪問器outerRadius()、起始角度訪問器sta ...
  • 前端從一隻小白到工作半年的心路歷程
    提筆又不知從何說起， 畢竟頭髮還茂盛，離大神就差一頭秀髮的距離， 所以此文不講技術， 只是單純的總結一下我是怎麼入坑的。本人前端打雜的，不喜勿噴。 17年7月我畢業了， 可我並不知道未來在何方， 我該做什麼，大學四年給我的只是一紙證書 由於家在南方， 所以就選擇了深圳這個繁華又孤獨的城市， 搜索和專 ...
  • EggJs快速入門
    Egg.js 簡介 Egg.js 為企業級框架和應用而生 ，幫助開發團隊和開發人員降低開發和維護成本。 專註於提供 Web 開發的核心功能和一套靈活可擴展的插件機制，不會做出技術選型，因為固定的技術選型會使框架的擴展性變差，無法滿足各種定製需求。 Egg 的插件機制有很高的可擴展性， 一個插件只做一 ...
  • HTML語義化
    語義化的主要目的可以概括為用正確的標簽做正確的事。 HTML語義化可以讓頁面的內容結構化，便於瀏覽器解析和搜索引擎解析，並提高代碼的可維護度和可重用性。 儘可能少的使用無語義的標簽<div>，多用語義化標簽<header><section><footer> ...
  • BFC
    BFC（Block formatting context）塊級格式化上下文，是一個獨立的渲染區域。 一、如何觸發BFC： 1、根元素（html）; 2、設置float除none意外的值（left ,right）; 3、設置overflow 除visible 以外的值（hidden,auto,srol ...
  • 6.放大鏡效果
    一、html，css部分 二、js部分 三、源代碼部分 ...
  • 5.滾動時鐘特效
    一、html，css部分 二、js部分 三、源代碼部分 四、圖片img ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類