css網頁佈局模板

-Advertisement-

效果如圖：菜鳥教程(runoob.com) 我的網頁重置瀏覽器大小查看效果。我的網頁重置瀏覽器大小查看效果。鏈接鏈接鏈接鏈接文章標題 2019 年 4 月 17日圖片一些文本... 菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學 ...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鳥教程(runoob.com)</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            padding: 10px;
            background: #f1f1f1;
        }

        /* 頭部標題 */
        .header {
            padding: 30px;
            text-align: center;
            background: white;
        }

        .header h1 {
            font-size: 50px;
        }

        /* 導航條 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 導航條鏈接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 鏈接顏色修改 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 創建兩列 */
        /* Left column */
        .leftcolumn {
            float: left;
            width: 75%;
        }

        /* 右側欄 */
        .rightcolumn {
            float: left;
            width: 25%;
            background-color: #f1f1f1;
            padding-left: 20px;
        }

        /* 圖像部分 */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

        /* 文章卡片效果 */
        .card {
            background-color: white;
            padding: 20px;
            margin-top: 20px;
        }

        /* 列後面清除浮動 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 底部 */
        .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
            margin-top: 20px;
        }

        /* 響應式佈局 - 屏幕尺寸小於 800px 時，兩列佈局改為上下佈局 */
        @media screen and (max-width: 800px) {
            .leftcolumn, .rightcolumn {
                width: 100%;
                padding: 0;
            }
        }

        /* 響應式佈局 -屏幕尺寸小於 400px 時，導航等佈局改為上下佈局 */
        @media screen and (max-width: 400px) {
            .topnav a {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>我的網頁</h1>
    <p>重置瀏覽器大小查看效果。</p>
</div>

<div class="topnav">
    <a href="#">鏈接</a>
    <a href="#">鏈接</a>
    <a href="#">鏈接</a>
    <a href="#" style="float:right">鏈接</a>
</div>

<div class="row">
    <div class="leftcolumn">
        <div class="card">
            <h2>文章標題</h2>
            <h5>2019 年 4 月 17日</h5>
            <div class="fakeimg" style="height:200px;">圖片</div>
            <p>一些文本...</p>
            <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p>
        </div>
        <div class="card">
            <h2>文章標題</h2>
            <h5>2019 年 4 月 17日</h5>
            <div class="fakeimg" style="height:200px;">圖片</div>
            <p>一些文本...</p>
            <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2>關於我</h2>
            <div class="fakeimg" style="height:100px;">圖片</div>
            <p>關於我的一些信息..</p>
        </div>
        <div class="card">
            <h3>熱門文章</h3>
            <div class="fakeimg"><p>圖片</p></div>
            <div class="fakeimg"><p>圖片</p></div>
            <div class="fakeimg"><p>圖片</p></div>
        </div>
        <div class="card">
            <h3>關註我</h3>
            <p>一些文本...</p>
        </div>
    </div>
</div>

<div class="footer">
    <h2>底部區域</h2>
</div>



</body>
</html>

效果如圖：

菜鳥教程(runoob.com)

我的網頁

重置瀏覽器大小查看效果。

鏈接鏈接鏈接鏈接

文章標題

2019 年 4 月 17日

圖片

一些文本...

菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！

文章標題

2019 年 4 月 17日

圖片

一些文本...

關於我

圖片

關於我的一些信息..

關註我

一些文本...

底部區域

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

-Advertisement-

更多相關文章

如何使 highchart圖表標題文字可選擇複製

highchart圖表的一個常見問題是不能複製文字比如官網的某個圖表例子，文字不能選擇，也無法複製，有時產品會抓狂... 本文給出一個簡單的方案，包括一些解決的思路，希望能幫助到有需要的人初期想了蠻久也搜了蠻多，沒搜到，找到的結論是圖表使用的是svg實現，必然無法選擇文字，似乎是個死問題，已經瀕 ...
Web點擊鏈接調起手機系統自帶簡訊發簡訊

實現代碼如下：一、Html代碼二、jQuery代碼 ...
webpack 快速上手之路（一）

註： ** 先來說下前端為什麼需要學習webpack吧！** 因為現在SPA流行，javascript的依賴包，less,scss.sass樣式文件的編譯。更重要的是前端現在三大主流Vue.js 、React.js和AngluarJs都和webpack緊緊相連了。說實話，現在不會一點webpac ...
移動端開發

1.移動端視口問題視口是指瀏覽器的可視區域，移動端的視口到底是多寬呢？現在市面上的大部分手機，比如iphone X，它的預設視口寬度為980px，而一個iphone X的屏幕寬度僅僅為375px。看到問題了嗎？一個寬度只有375像素的手機，卻能夠顯示寬度為980像素的網頁，自然而然，網頁會被縮小 ...
CSS filter 屬性

filter 將模糊或者顏色偏移等圖像效果用於元素，通常用於調整圖像，背景和邊框的渲染 css 標準中已內置一些預定義效果的函數，也可通過url使用 "SVG濾鏡" 語法濾鏡屬性需要設定某一函數的值。如果該值無效，函數返回“none“。 url() url 函數接收一個XML文件，該文件是一個 ...
css基礎4

今天是2019年6月21日，周五了。在這裡寫上一篇隨筆，主要內容是css基礎中的一些細節部分，話不多說，直接上！一、背景漸變： background-image 線性漸變：linear-gradient（漸變方向，色標，色標，色標）方向：關鍵字： to top 從下往上 to bottom 從 ...
如何獲取瀏覽器URL中查詢字元串的參數

首先要知道Location這個對象以及這個對象中的一些屬性： href:設置或返回完整的url.如本博客首頁返回http://www.cnblogs.com/wymninja/ host:設置或返回主機名和當前的URL的埠號。本博客首頁返回www.cnblogs.com hostname:設置或返 ...
前端性能優化：細說JavaScript的載入與執行

本文主要是從性能優化的角度來探討JavaScript在載入與執行過程中的優化思路與實踐方法，既是細說，文中在涉及原理性的地方，不免會多說幾句，還望各位讀者保持耐心，仔細理解，請相信，您的耐心付出一定會讓您得到與之匹配的回報。緣起隨著用戶體驗的日益重視，前端性能對用戶體驗的影響備受關註，但由於引起 ...