JavaScript >> Javascript 文檔 >  >> Tags >> CSS

編寫 CSS3 和 HTML5 單頁網站模板

Web 開發是一個您必須跟上最新技術和技巧的領域,以便您處於遊戲的頂端。難怪 - 這是一個以驚人速度變化的領域。現在的標準是什麼,幾年後就會過時。

但變化並非憑空而來。早期採用者已經在使用我們將在幾年後日常使用的東西。其中一種技術是 HTML5 - 網絡基礎語言的新版本。

今天我們正在製作一個HTML5 網頁模板,使用了 CSS3 和 jQuery 帶來的一些新特性,帶有 scrollTo 插入。由於 HTML5 仍在開發中,您可以選擇下載 XHTML 版本 這裡的模板。

第 1 步 - 設計

每個設計過程都始於您以後構建的初始想法。在這個階段,設計師通常會使用 Photoshop 等程序來處理細節,看看它們如何組合在一起。

在此之後,設計由 HTML 和 CSS 手動編碼,從設計背景、顏色和字體,到內容部分的細節工作。

第 2 步 - HTML

現在是注意 HTML5 的好時機 仍在進行中。它可能會持續到 2022 左右 (我對此非常認真)。但是,該標準的某些部分是完整的,可以今天使用 .

在本教程中,我們將使用這個新版 HTML 中引入的一些標籤:

  • 標題 - 包裝你的頁眉;
  • 頁腳 - 包裝您的頁腳;
  • 部分 - 將內容分組(例如主要區域、側邊欄等);
  • 文章 - 將單個文章與頁面的其餘部分分開;
  • 導航 - 包含您的導航菜單;
  • - 通常包含用作文章插圖的圖片。

它們的使用方式與您使用普通 div 的方式完全相同。不同之處在於這些標籤在語義上組織您的頁面。換句話說,您可以以這樣一種方式呈現您的內容,以便更容易確定您的頁面主題。因此,搜索引擎等服務將為您帶來更多有針對性的訪問者,從而增加您的收入(以及他們的實際收入)。

但是,有一些含義 今天在使用 HTML5。最著名的瀏覽器之一是 IE 瀏覽器系列,它不支持這些標籤(不過,它可以用一個簡單的 JavaScript 包含文件來修復)。這就是為什麼您應該根據您網站的受眾群體做出遷移到 HTML5 的決定。為此,我們還發布了這個模板的純 XHTML 版本。

template.html - 頭部

<!DOCTYPE html> <!-- The new doctype -->

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>

    <link rel="stylesheet" type="text/css" href="styles.css" />

    <!-- Internet Explorer HTML5 enabling script: -->

    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">

            .clear {
                zoom: 1;
                display: block;
            }

        </style>

    <![endif]-->

</head>

您會注意到新的 在第一行,它告訴瀏覽器該頁面是使用 HTML5 標準創建的。它也比舊的文檔類型更短更容易記住。

在指定文檔的編碼和標題之後,我們繼續包含一個特殊的 JS 文件,它將使 Internet Explorer(任何版本)能夠正確呈現 HTML5 標記。同樣,這意味著如果訪問者使用 IE 並且 禁用了 JavaScript ,頁面將顯示所有混亂 .這就是為什麼,根據您的受眾,您應該考慮該模板的常規 XHTML 版本,它適用於任何瀏覽器 並在此處免費向所有讀者發布。

template.html - 正文部分

<body>

    <section id="page"> <!-- Defining the #page section with the section tag -->

    <header> <!-- Defining the header section of the page with the appropriate tag -->

        <h1>Your Logo</h1>

        <h3>and a fancy slogan</h3>

        <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->

            <ul>

                <li><a href="#article1">Photoshoot</a></li>
                <li><a href="#article2">Sweet Tabs</a></li>
                <li><a href="#article3">Navigation Menu</a></li>

            </ul>

        </nav>

    </header>

這裡我們使用新的 section 標籤,將您的頁面分成不同的語義部分。最外層是 #page 部分 設置為 960px 的寬度 在樣式表中(考慮到舊計算機顯示器的相當標準的寬度)。之後是標題標籤和導航標籤。

注意 href 鏈接的屬性 - 井號 # 之後的部分 對應ID 文章 我們要滾動到。

template.html - 文章

    <!-- Article 1 start -->

    <div class="line"></div>  <!-- Dividing line -->

    <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->

        <h2>Photoshoot Effect</h2>

        <div class="line"></div>

        <div class="articleBody clear">

            <figure> <!-- The figure tag marks data (usually an image) that is part of the article -->

                <a href="https://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                    <img src="https://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>

            </figure>

            <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>

        </div>

    </article>

    <!-- Article 1 end -->

上面的標記在所有文章之間共享。首先是分界線(語義上最好的解決方案是


行,在 HTML5 中增加了邏輯分隔元素的作用,但不幸的是,它不可能以跨瀏覽器的方式設置樣式,所以我們將堅持使用 DIV )。在此之後,我們有了新的文章 標記,具有唯一 ID ,導航使用它來滾動頁面 .

在裡面我們有文章的標題,兩個段落和新的 tag,標記文章中圖片的使用。

template.html - 頁腳

        <footer> <!-- Marking the footer section -->

            <div class="line"></div>

            <p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->
            <a href="#" class="up">Go UP</a>
            <a href="https://tutorialzine.com/" class="by">Template by Tutorialzine</a>

        </footer>

    </section> <!-- Closing the #page section -->

    <!-- JavaScript Includes -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
    <script src="script.js"></script>

    </body>

</html>

最後,我們有 頁腳 標籤,它完全符合您的期望。頁面底部是其餘的 JavaScript 包含,其中添加了 jQuery 庫scrollTo 插件,我們將在接下來的步驟中使用它。

第 3 步 - CSS

當我們使用 HTML5 時,我們必須對樣式採取一些額外的措施。這個新版本的 HTML 引入的標籤尚未提供默認樣式。然而,這很容易通過幾行 CSS 代碼來解決,並且頁面可以正常工作並且看起來應該是:

styles.css - 第 1 部分

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}

article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}

footer .line{
    margin:2em 0;
}

nav{
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
    padding:0 5px;
    position:absolute;
    right:0;
    top:4em;

    border:1px solid #FCFCFC;

    -moz-box-shadow:0 1px 1px #333333;
    -webkit-box-shadow:0 1px 1px #333333;
    box-shadow:0 1px 1px #333333;
}

nav ul li{
    display:inline;
}

nav ul li a,
nav ul li a:visited{
    color:#565656;
    display:block;
    float:left;
    font-size:1.25em;
    font-weight:bold;
    margin:5px 2px;
    padding:7px 10px 4px;
    text-shadow:0 1px 1px white;
    text-transform:uppercase;
}

nav ul li a:hover{
    text-decoration:none;
    background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

我們基本上需要設置顯示 block 的新標籤的值 ,從前幾行可以看出。在此之後,我們可以像使用常規 div 一樣設置它們的樣式。

我們為水平線、文章和導航按鈕設置樣式,後者在 nav 內組織為無序列表 標籤。在底部我們分配 border-radius 四種不同類型元素的屬性一次,節省大量代碼。

styles.css - 第 2 部分

/* Article styles: */

#page{
    width:960px;
    margin:0 auto;
    position:relative;
}

article{
    background-color:#213E4A;
    margin:3em 0;
    padding:20px;

    text-shadow:0 2px 0 black;
}

figure{
    border:3px solid #142830;
    float:right;
    height:300px;
    margin-left:15px;
    overflow:hidden;
    width:500px;
}

figure:hover{
    -moz-box-shadow:0 0 2px #4D7788;
    -webkit-box-shadow:0 0 2px #4D7788;
    box-shadow:0 0 2px #4D7788;
}

figure img{
    margin-left:-60px;
}

/* Footer styling: */

footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;
}

footer p{
    margin-bottom:-2.5em;
    position:relative;
}

footer a,footer a:visited{
    color:#cccccc;
    background-color:#213e4a;
    display:block;
    padding:2px 4px;
    z-index:100;
    position:relative;
}

footer a:hover{
    text-decoration:none;
    background-color:#142830;
}

footer a.by{
    float:left;

}

footer a.up{
    float:right;
}

在代碼的第二部分,我們對元素應用更詳細的樣式。 A 寬度 頁面 部分,懸停 figure 的屬性 頁腳內部鏈接的標籤和样式。還有一些樣式在這裡沒有包含,但是你可以在 styles.css 中看到它們 .

現在讓我們繼續下一步。

第 4 步 - jQuery

為了增強模板,我們將在單擊導航鏈接後創建平滑的滾動效果,使用 scrollTo 我們之前在頁面中包含的 jQuery 插件。為了讓它工作,我們只需要遍歷導航欄中的鏈接(以及頁腳中的 UP 鏈接)並分配一個 onclick 事件,該事件將觸發 $.srollTo() 函數,由插件定義。

script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('nav a,footer a.up').click(function(e){

        // If a link has been clicked, scroll the page to the link's hash target:

        $.scrollTo( this.hash || 0, 1500);
        e.preventDefault();
    });

});

這樣我們的模板就完成了!

總結

在本教程中,我們利用 HTML5 提供的新語義特性來設計和編寫單頁 Web 模板。您可以在個人和商業上免費使用它,前提是您保持反向鏈接完好無損。

如果您喜歡本教程,請務必查看我們的推特信息流,我們會在其中分享最新最好的設計和開發鏈接。


Tutorial JavaScript 教程
  1. 11 個很棒的資源讓你的 React 應用更上一層樓

  2. 使用純 Javascript 和 CSS 點擊或觸摸時的視覺效果

  3. AWS SES、API Gateway - POST 和無服務器

  4. NodeJS 與 ExpressJS 和 TypeScript 第 1 部分。

  5. 我想根據我的結果製作自定義對像數組[關閉]

  6. 用 Jest 模擬函數

  7. 有效處理日期和時區的 3 個簡單規則

  1. 我通過製作 React Hook 庫學到的 10 件事

  2. 讀書俱樂部:雄辯的 JavaScript - 第 2 章

  3. 得到錯誤不變違反試圖讓幀超出範圍索引?

  4. RegExp 的 exec() 函數和 String 的 match() 函數有什麼區別?

  5. HTML no-js 類的目的是什麼?

  6. Hapi 服務器入門。

  7. package.json 的基礎知識

  1. 在文章中標記文本的腳本

  2. 什麼是軌道用戶界面?

  3. 如何在您的 Web 應用程序中使用 jQuery Splitter UI 組件 - 第 1 部分

  4. 用於有效編碼的最佳 Webstorm 插件