2. 程式人生 > >CSS設計美麗之橫排頁面（小作品）

CSS設計美麗之橫排頁面（小作品）

阿新 • • 發佈：2019-01-18

本次作品與前幾次的作品的不同之處在於：這次頁面是橫排顯示的，即用滑鼠左右滾動來檢視網頁。

作品效果：


可以看出，這個文件的width是遠遠大於height，因為使用橫排的顯示方式來佈局頁面，使用滑鼠左右滾動來顯示。

HTML程式碼：

<!DOCTYPE html>  
<html lang="zh-en">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>CSS Zen Garden: CSS設計之美</title>  
    <link rel="stylesheet" media="screen" href="029/029.css">  
  
    <meta name="author" content="Changjiu Huang">  
    <meta name="description" content="展示CSS設計的美麗。">  
    <meta name="robots" content="all">  
  
    <!--[if lt IE 9]>  
    <script src="script/html5shiv.js"></script>  
    <![endif]-->  
  </head>  
  
<body>  
<div class="page-wrapper">  
  
    <section class="intro" id="zen-intro">  
        <header role="banner">  
            <h1>CSS Zen Garden</h1>  
            <h2><abbr title="Cascading Style Sheets">CSS</abbr>設計之美</h2>  
        </header>  
  
        <div class="summary" id="zen-summary" role="article">  
            <p></p>  
            <p></p>  
        </div>  
  
        <div class="preamble" id="zen-preamble" role="article">  
            <h3>開悟之路</h3>  
            <p> </p>  
            <p></p>  
            <p></p>  
        </div>  
    </section>  
  
    <div class="main supporting" id="zen-supporting" role="main">  
        <div class="explanation" id="zen-explanation" role="article">  
            <h3>這是關於什麼？</h3>  
            <p></p>  
            <p></p>  
        </div>  
  
        <div class="participation" id="zen-participation" role="article">  
            <h3>參與</h3>  
            <p> </p>  
            <p></p>  
            <p></p>  
        </div>  
  
        <div class="benefits" id="zen-benefits" role="article">  
            <h3>益處</h3>  
            <p></p>  
        </div>  
  
        <div class="requirements" id="zen-requirements" role="article">  
            <h3>必要條件</h3>  
            <p></p>  
            <p> </p>  
            <p></p>  
            <p></p>  
            <p></p>  
        </div>  
  
        <footer>  
            <a href="javascript:void(0);" title="檢查網站的HTML是否合乎標準" class="zen-validate-html">HTML</a>  
            <a href="javascript:void(0);" title="檢查網站的CSS是否合乎標準" class="zen-validate-css">CSS</a>  
            <a href="javascript:void(0);" title="檢視本網站的創用CC版權宣告：姓名標示-非商業性-相同方式分享" class="zen-license">CC</a>  
            <a href="javascript:void(0);" title="閱讀關於本網站的親和力說明" class="zen-accessibility">A11y</a>  
            <a href="javascript:void(0);" title="在GitHub建立本網站的分支" class="zen-github">GH</a>  
        </footer>  
  
    </div>  
  
  
    <aside class="sidebar" role="complementary">  
        <div class="wrapper">  
  
            <div class="design-selection" id="design-selection">  
                <h3 class="select">選擇一項設計：</h3>  
                <nav role="navigation">  
                    <ul>  
                      <li></li>  
                      <li></li>  
                      <li></li>  
                      <li></li>  
                      <li></li>  
                      <li></li>  
                      <li></li>  
                    </ul>  
                </nav>  
            </div>  
  
            <div class="design-archives" id="design-archives">  
                <h3 class="archives">資料彙整：</h3>  
                <nav role="navigation">  
                    <ul>  
                        <li class="next">  
                            <a href="javascript:void(0);">  
                                下一個設計 <span class="indicator">›</span>  
                            </a>  
                        </li>  
                        <li class="viewall">  
                            <a href="javascript:void(0);" title="瀏覽所有設計。">  
                                瀏覽所有設計                          </a>  
                        </li>  
                    </ul>  
                </nav>  
            </div>  
  
            <div class="zen-resources" id="zen-resources">  
                <h3 class="resources">資源：</h3>  
                <ul>  
                  <li></li>   
                </ul>  
            </div>  
        </div>  
    </aside>  
  
  
</div>  
</body>  
</html>


CSS程式碼部分：

/* 基本樣式 */
body {
  width: 2048px;
  padding: 0;
  margin: 0;
  font: 11px/1.5em 黑體, Arial, Verdana, sans-serif;
}

a:link, a:visited {
  color: #A52A2A;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}



/* 文件左邊的面部 */
div.extra2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 265px;
  height: 600px;
  background: url("../images/bg_face.jpg") no-repeat left bottom;
  z-index: 2;
}


/* 為了實現左邊模糊效果引入的空白圖片 */
div.extra3 {
  position: fixed;
  left: 0;
  top: 0;
  width: 225px;
  height: 100px;
  background: url("../images/bg_white.png"); 
  z-index: 1;  
}


/* header部分 */
header {
  position: relative;
  left: 220px;
  width: 1828px;
}


header h1 {
  width: 493px;
  height: 83px;
  margin: 20px 0 0;
  background: url("../images/csszengarden.jpg") no-repeat right; 
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}


header h2 {
  width: 1826px;
  height: 27px;
  margin-top: -10px;
  background: url("../images/thebeautyofcssdesign.jpg") no-repeat right bottom;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}


/* summary 部分 */
div.summary {
  position: absolute;
  left: 228px;
  top: 98px;
  width: 1300px;
  letter-spacing: 0.1em;
  color: #A5A3B5;
  background: transparent;
}


div.summary p:last-child,
div.summary p:first-child {
  display: inline;
  margin: 0;
}

/* h1 與 h2 之間的線條 */
div.extra1 {
  position: absolute;
  left: 225px;
  top: 90px;
  width: 1823px;
  height: 1px;
  background: #A5A3B5;
}


/* preamble 部分 */
.preamble {
  position: absolute;
  left: 375px;
  top: 160px;
  width: 200px;
  text-align: justify;
}


.preamble h3 {
  width: 200px;
  height: 25px;
  margin: 0 0 0 0.5em;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-image: url("../images/theroad.jpg");
}


.preamble p {
  maring: 0 0.5em 0.5em;
}


/* supporting 部分 */
/*-----------共性-------------- */
div.explanation , div.participation,
div.benefits, div.requirements {
  position: absolute;
  top: 160px;
  width: 200px;
  text-align: justify;
}

/*-----------特性---------------*/
div.explanation {
  left: 625px;
}

div.participation {
  left: 875px;
}

div.benefits {
  left: 1125px;
}

div.requirements {
  width: 400px;
  left: 1375px;
}


/* supporting 下 h3的共性 */
div.explanation h3 , div.participation h3,
div.benefits h3, div.requirements h3 {
  width: 200px;
  height: 25px;
  margin: 0 0 0.5em;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* supporting 下 h3的特性 */
div.explanation h3 {
  background: transparent url("../images/sowhatisthisabout.jpg") no-repeat left bottom;
}

div.participation h3 {
  background: transparent url("../images/participation.jpg") no-repeat left bottom;
}

div.benefits h3 {
  background: transparent url("../images/benefits.jpg") no-repeat left bottom;
}

/* 獨有的特性 */
div.requirements h3 {
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
  background: transparent url("../images/requirements.jpg") no-repeat left bottom;
}


div.explanation p , div.participation p,
div.benefits p, div.requirements p {
  margin: 0 0.5em 0.5em;
}


/* sidebar 部分 */
.sidebar {
  position: absolute;
  left: 1828px;
  top: 160px;
  width: 220px;
  background: url("../images/bg_linklist.jpg") repeat-y;
}


.design-selection li a:link,
.design-selection li a:visited {
  display: block;
  padding-left: 26px;
  margin-left: -10px;
  border-top: 1px solid #C6C6D3;
  color: #8B879E;
  background: url("../images/linklistlink.jpg") no-repeat;
}


.design-selection li a.designer-name:link,
.design-selection li a.designer-name:visited {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  color: #A52A2A;
}


.sidebar ul {
  padding: 0;
  margin: 0 0 0 25px;
  list-style: none;
}


.sidebar ul li {
  padding-left: 10px;
}


.design-selection  h3{
  float: left;
  width: 25px;
  height: 200px;
  margin-top: 0;
  background: url("../images/selectadesign.jpg") no-repeat;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}


div .design-archives,div .zen-resources {
  clear: left;
  border-top: 10px solid #D9D6E7;
  margin-top: 0;
  
}


/* sidebar 下 h3的共性 */
div .design-archives h3,div .zen-resources h3 {
  float: left;
  width: 25px;
  height: 200px;
  margin-top: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* sidebar 下 h3的特性 */
div .design-archives h3 {
  background: transparent url("../images/archives.jpg") no-repeat left top;
}

div .zen-resources h3 {
  background: transparent url("../images/resources.jpg") no-repeat left top;
}


/* footer 部分 */
footer {
  position: absolute;
  left: 1828px;
  top: 3px;
  width: 220px;
  height: 20px;
  text-align: center;
  word-spacing: 0.1em;
  overflow: hidden;
}


footer a:link, footer a:visited {
  color: #B2AFC0;
  background: transparent;
}


/* 遮罩層 */
.extra4 {
  position: absolute;
  left: 1828px;
  top: 20px;
  width: 214px;
  height: 65px;
  background: #d9d6e7 url("../images/transition.jpg");
}


.extra5 {
  position: absolute;
  left: 1828px;
  top: 0;
  width: 220px;
  height: 902px;
  background: #d9d6e7 url("../images/bg_body.jpg");
  z-index: -1;
}


1、定位position: fixed;的意義

答：固定定位，固定在視窗某位置，不會隨著滾動條滾動。使用偏移四屬性（left right top bottom）控制位置。

2、如何使圖片看起來有點模糊的感覺。



答：在圖片位置上定義一個空白圖片,作為遮罩層，使其z-index: 1; 而該圖片的z-index: 2;這樣在最低層有文字就是z-index: 0;，圖片看起來就有種模糊的感覺。注：空白的圖片必需重複顯示，才能使其周圍也有模糊的感覺。

如：

div.extra3 {
  position: fixed;
  left: 0;
  top: 0;
  width: 225px;
  height: 100px;
  background: url("../images/bg_white.png"); 
  z-index: 1;  
}


相關推薦

CSS設計美麗之橫排頁面（小作品）

本次作品與前幾次的作品的不同之處在於：這次頁面是橫排顯示的，即用滑鼠左右滾動來檢視網頁。 作品效果： 可以看出，這個文件的width是遠遠大於height，因為使用橫排的顯示方式來佈局頁面，使用滑鼠左右滾動來顯示。 HTML程式碼： <!DOCTYPE h

CSS設計美麗之絕對定位（absolute）的使用（小作品）

關於HTML與CSS的小作品之一： 前端已經學習過絕對定位的概念了： 絕對定位：脫離文件流，以 離自己最近定位的祖先元素（position） 為參照物，如果沒有定位的祖先元素，則追溯到以body為參照物，通過四個偏移屬性進行偏移，不會影響文件中的元素，其margin不會與

CSS設計的美麗之居中、:before()、:after()的使用（小作品）

關於HTML與CSS的小作品之二： 作品效果如下所示： 準備工作： 1、開發軟體Notepad++ 2、Photoshop（切圖） 3、瀏覽器 首先，拿到此圖後，觀察發現，這個作品的主要內容是在螢幕中居中顯示的，先用畫圖軟體畫一下如何進行佈局，在心中有一個大概

CSS設計美麗之百合花（小作品）

這次的小作品選用了百合花圖片作為文件top的背景圖。 作品效果： 程式碼框架結構： <!DOCTYPE html> <html lang="zh-en"> <head> <meta http-equiv="

設計模式之 - 模板模式（Template Pattern）

process egg lec pass jdbcutils ima tint new sta 引入：這幾天在看一本講spring源碼的書《SPRING技術內幕》裏面在講加載配置文件的時候，可以有不同的加載方式，如根據文件系統目錄加載配置文件（FileSystemXmlAp

設計模式之 - 代理模式（Proxy Pattern）

ride proxy idt object catch 實例化 圖片 null 人在 代理模式：代理是一種常用的設計模式，其目的就是為其他對象提供一個代理以控制對某個對象的訪問。代理類負責為委托類預處理消息，過濾消息並轉發消息，以及進行消息被委托類執行後的後續處理。很多可以

java設計模式之Composite Pattern（組合模式）

In ima field 編程 這也 composite 當前 屬性 OS 組合模式是面向可維護性編程的一種常見的設計模式。簡單的說就是一個類裏面有一組當前類組成的collection作為這個類的屬性。這和遞歸有一定的相似。他的目的就是在同類型對象之間建立起樹形層次結構，一

設計模式之- 狀態模式（State Pattern）

mage player out read end des 我們 能夠 esp 狀態模式 在狀態模式（State Pattern）中，類的行為是基於它的狀態改變的。這種類型的設計模式屬於行為型模式。 在狀態模式中，我們創建表示各種狀態的對象和一個行為隨著狀態對象改變而改變的

設計模式之命令模式（Command Pattern）

摘要 命令模式（Command Pattern）是一種資料驅動的設計模式，它屬於行為型模式。請求以命令的形式包裹在物件中，並傳給呼叫物件。呼叫 介紹 意圖：將一個請求封裝成一個物件，從而使您可以用不同的請求對客戶進行引數化。 主要解決：在軟體系統中，行為請求者與行為實現者通常是一種緊

23種設計模式 之 State模式（狀態模式） C語言

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

C#設計模式（8）——外觀模式 java設計模式之外觀模式（門面模式）

1.外觀模式介紹 　　外觀模式也被叫做門面模式，這種模式的作用是：隱藏系統的複雜性，並向客戶端提供了一個可以訪問系統的統一介面，這個統一的介面組合了子系統的多個介面。使用統一的介面使得子系統更容易被訪問或者使用。 以去醫院看病為例，去醫院看病時可能要去掛號、門診、劃價、取藥等，讓患者或患者家屬覺得很複雜，如

設計模式之狀態模式（State Pattern）

簡介： 在狀態模式（State Pattern）中，類的行為是基於它的狀態改變的。這種型別的設計模式屬於行為型模式。 在狀態模式中，我們建立表示各種狀態的物件和一個行為隨著狀態物件改變而改變的 context 物件。 意圖：允許物件在內部狀態發生改變時改變它的行為，物件看起來好像修改了它的類

設計模式之模板模式（Template Pattern）

在模板模式（Template Pattern）中，一個抽象類公開定義了執行它的方法的方式/模板。它的子類可以按需要重寫方法實現，但呼叫將以抽象類中定義的方式進行。這種型別的設計模式屬於行為型模式。 意圖：定義一個操作中的演算法的骨架，而將一些步驟延遲到子類中。模板方法使得子類可以不改變一個演

設計模式之組合模式（Composite Pattern）

組合模式（Composite Pattern），又叫部分整體模式，是用於把一組相似的物件當作一個單一的物件。組合模式依據樹形結構來組合物件，用來表示部分以及整體層次。這種型別的設計模式屬於結構型模式，它建立了物件組的樹形結構。 介紹 意圖：將物件組合成樹形結構以表示"部分-整體"的層次結構。

設計模式之代理模式（java實現）

代理模式（Proxy）：結構型的設計模式，目的是為其他物件提供一種代理以控制對這個物件的訪問。 即，它的思想是控制類或者介面對外的功能。 代理模式分為靜態代理模式和動態代理模式兩種。 在Spring中代理模式常見的是在AOP模組中，比如 JdkDynamicAopProxy

設計模式之委派模式（java實現）

委派模式（delegate）：並不屬於23種設計模式，但是面向物件常用的一種設計模式，而且在SpringMVC原始碼中有大量使用。這種模式原理就是類 B和類 A 是兩個互相沒有任何關係的類，B 具有和 A 一模一樣的方法和屬性;並且呼叫

設計模式之原型模式（java實現）

原型模式（Prototype Pattern）:就是從一個物件再建立另一個可定製物件的，而且不需要知道任何建立的細節。所謂原型模式，就是 Java 中的克隆技術，以某個物件為原型。複製出新的物件。顯然新的物件具備原 型物件的特點，效率高(避免了重新執行構造過程步驟)。 所以當直接建立物件代價

設計模式之代理模式（Proxy Pattern）

應用場景 Proxy代理模式是一種結構型設計模式，主要解決的問題是：直接訪問物件時帶來的問題。 為了保持行為的一致性，代理類和委託類通常會實現相同的介面，所以在訪問者看來兩者並無區別。 代理類種類： 靜態：建立代理類再對其編譯，在程式執行前代理類的.class檔案就已

JAVA設計模式之門面模式（外觀模式）

醫院的例子 　　現代的軟體系統都是比較複雜的，設計師處理複雜系統的一個常見方法便是將其“分而治之”，把一個系統劃分為幾個較小的子系統。如果把醫院作為一個子系統，按照部門職能，這個系統可以劃分為掛號、門診、劃價、化驗、收費、取藥等。看病的病人要與這些部門打交道，就如同一個子系

設計模式之代理模式（全面講解）

　　　　　　設計模式是一套被反覆使用，多數人知曉，經過分類編目的，程式碼設計的總結，也可以說是前人的智慧結晶。學習設計模式能讓我們對一些應用場景使用相同的套路達到很好的效果，我會不定時更新一些自己對設計模式的理解的文章，從定義，實現，應用場景來說說設計模式，今天我要說的物件是代理模式 　　一：定義