宣傳頁項目實戰

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/10/12289178.html
-Advertisement-
Play Games

編輯器:sublime text3 標註工具:PxCook 切圖工具:PS 開發前準備:設計圖標註 PxCook 空格鍵可以上下拖動 大致標註圖紙:(可惜不能文字標註和拉參考線) 開發前準備:PS切圖 在指定圖層上新建一個圖層,使用ctrl+e 合併圖層,可以將任意圖層轉為普通圖層 (如果圖層是下麵 ...


編輯器:sublime text3

標註工具:PxCook

切圖工具:PS


 

開發前準備:設計圖標註

PxCook  空格鍵可以上下拖動

大致標註圖紙:(可惜不能文字標註和拉參考線)

 

開發前準備:PS切圖

在指定圖層上新建一個圖層,使用ctrl+e 合併圖層,可以將任意圖層轉為普通圖層

(如果圖層是下麵圖層的剪貼圖層,可以把該圖層移動到新建圖層的上面再合併)

(如果圖層羽化較多,ctrl+enter無法選中,則直接ctrl+c)

ctrl+enter 框選需要的圖層內容

ctrl+c 複製圖層

ctrl+n 新建畫布

ctrl+v 黏貼,隱藏掉背景圖層

存儲為web所用格式,jpg或者png24

 

 

開發前準備(雪碧圖)

我用的軟體是:CssGaga

將phone1-phone4四張小圖生成一張雪碧圖

提供圖片以及css位置

 

 

靜態頁面開發

文字距離容器左邊一定位置:

padding-left 或者 text-indent

padding-left 設置的寬度,需要在width 中減去;而text-indent 不用

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 頭部 -->
    <header>
        <div class="header-wrap">
            <div class="header-logo">微課手機</div>
            <nav class="header-nav">
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-active">外觀</a>
                <a href="javascript:void(0);" class="header-nav-item">配置</a>
                <a href="javascript:void(0);" class="header-nav-item">型號</a>
                <a href="javascript:void(0);" class="header-nav-item">說明</a>
                <a href="javascript:void(0);" class="header-nav-item">其他產品</a>
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-button">立即購買</a>
            </nav>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <h2 class="screen-1-heading"><span>微課手機</span> 讓你的生活更精彩</h2>
        <div class="screen-1-phone"></div>
        <div class="screen-1-shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <div class="screen-2-wrap">
            <h2 class="screen-2-heading">優美的設計,更令人著迷</h2>
            <h4 class="screen-2-subheading">採用受歡迎的設計,讓它更加出色。<br>
款式小巧、輕便手感更舒適。絢麗高清的顯示屏,整個外觀顯得格外精緻。</h4>
            <div class="screen-2-phone">
                <div class="screen-2-point screen-2-point-i1">高清攝像</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i2">超薄機身</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i3">大屏顯示</div>
            </div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3-wrap">
            <h2 class="screen-3-heading">優美的設計,更令人著迷</h2>
            <h4 class="screen-3-subheading">採用受歡迎的設計,讓它更加出色。<br>
款式小巧、輕便手感更舒適。絢麗高清的顯示屏,整個外觀顯得格外精緻。</h4>
            <div class="screen-3-phone"></div>
            <div class="screen-3-detail">
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">5.7</div>
                    <div class="screen-3-detail-desc">英寸大屏</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">1200</div>
                    <div class="screen-3-detail-desc">萬像素</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">3D</div>
                    <div class="screen-3-detail-desc">Touch</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">A9</div>
                    <div class="screen-3-detail-desc">處理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4-wrap">
            <h2 class="screen-4-heading">豐富的手機型號</h2>
            <h4 class="screen-4-subheading">找到適合你的手機</h4>
            <div class="screen-4-phone screen-4-phone-i1">
                <div class="screen-4-phone-item">
                    <div class="screen-4-phone-color">微課紅</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i2">
                    <div class="screen-4-phone-color">土豪金</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i3">
                    <div class="screen-4-phone-color">太空灰</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i4">
                    <div class="screen-4-phone-color">紳士黑</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
        <h2 class="screen-5-heading">游戲、學習、拍照,有這一部就夠了</h2>
        <h4 class="screen-5-subheading">    看視頻、拍攝高清視頻與照片、視頻聊天、通話相結合,一機多功能,讓您生活更豐富精彩。
        </h4>
    </div>
    <!-- 第六屏 -->
    <div class="screen-6">
        <button class="screen-6-btn">立即購買</button>
    </div>
    <!-- 底部 -->
    <footer>© 2020&nbsp;&nbsp;test.com&nbsp;&nbsp;浙ICP備00000000號</footer>
</body>
</html>

base.css

*{
    margin:0;
    padding:0;
}

a{
    text-decoration: none;
    color:#44484d;
}

ul{
    list-style:none;
}

body{
    color:#44484d;
}

h2{
    font-size:48px;
    font-weight:lighter;
    padding-top:81px;
    padding-bottom:15px;
}

h4{
    font-size:16px;
    line-height:30px;
    font-weight:normal;
    padding-bottom:15px;
}

/*# sourceMappingURL=base.css.map */

style.css

/*頭部*/
header{
    background:#f7f7f7;
    width:100%;
    height:80px;
}
.header-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
}
.header-logo{
    width:140px;
    height:39px;
    margin-left:24px;
    background:url(img/logo.png) left center no-repeat;
    background-size:39px 39px;
    text-indent:51px;
    line-height:39px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    font-size:20px;
}
.header-nav{
    position: absolute;
    right:24px;
    height:39px;
    line-height:39px;
    top:50%;
    margin-top:-20px;
    font-size:14px;
}
.header-nav-item{
    display: block;
    float:left;
    margin-left:45px;
}
.header-nav-item-active{
    color:#f04747;
    position: relative;
}
.header-nav-item-active::after{
    content:"";
    display: block;
    height:2px;
    width:100%;
    position: absolute;
    top:39px;
    left:0;
    background-color: #f04747;
}
.header-nav-item-button{
    width:90px;
    height:39px;
    background-color:#07111b;
    color:#f4f4f5;
    text-align: center;
    border-radius:3px;
}

/*第一屏*/
.screen-1{
    width:100%;
    height:795px;
    background:url(img/screen-1-bg.png) no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
}
.screen-1-heading{
    padding-top:138px;
    padding-bottom:94px;
    color:#4d555d;
}
.screen-1-heading span{
    color:#f04747;
}
.screen-1-phone{
    background:url(img/screen-1-phone.png) center no-repeat;
    width:1375px;
    height:305px;
    left:50%;
    margin-left:-687px;
    position: absolute;
    bottom:180px;
    z-index:2;
}
.screen-1-shadow{
    background:url(img/screen-1-shadow.png) center no-repeat;
    width:1183px;
    height:367px;
    left:50%;
    margin-left:-591px;
    position: absolute;
    bottom:30px;
    z-index:1;
}

/*第二屏*/
.screen-2{
    width:100%;
    height:800px;
    background:#fafafa;
}
.screen-2-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    text-align: center;
    position: relative;
}
.screen-2-heading{
    color:#f04747;
}
.screen-2-subheading{
    color:#4d555d;
}
.screen-2-phone{
    background:url(img/screen-2-phone.png) center no-repeat;
    width:928px;
    height:530px;
    left:50%;
    margin-left:-464px;
    position: absolute;
    bottom:0;
}
.screen-2-point{
    font-size:24px;
    font-weight:lighter;
    width:104px;
    padding-right:97px;
    background:url(img/screen-2-point-left.png) center right no-repeat;
    position: absolute;
}
.screen-2-point-right{
    padding-right:0;
    padding-left:97px;
    background:url(img/screen-2-point-right.png) center left no-repeat;
}
.screen-2-point-i1{
    top:160px;
    left:-153px;
}
.screen-2-point-i2{
    top:40px;
    right:150px;
}
.screen-2-point-i3{
    top:340px;
    right:40px;
}

/*第三屏*/
.screen-3{
    width:100%;
    height:800px;
    background:#fafafa;
    background:url(img/screen-3-bg.png) no-repeat;
    background-size:cover;
}
.screen-3-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
    color:#fff;
}
.screen-3-phone{
    background:url(img/screen-3-phone.png) top right no-repeat;
    width:767px;
    height:576px;
    right:0;
    position: absolute;
    bottom:0;
}
.screen-3-detail{
    margin-top:152px;
    width:333px;
    /*height:275px;*/
}
.screen-3-detail-item{
    width:140px;
    height:127px;
    border:1px solid #cd6d6f;
    float:left;
    border-radius:3px;
    margin-right:24px;
    text-align: center;
    margin-bottom:18px;
}
.screen-3-detail-num{
    font-size:48px;
    line-height:48px;
    padding-top:24px;
}
.screen-3-detail-desc{
    padding-top:5px;
}

/*第四屏*/
.screen-4{
    width:100%;
    height:800px;
}
.screen-4-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
    text-align: center;
}
.screen-4-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-4-subheading{
    padding-bottom:55px;
}
.screen-4-phone{
    width:1148px;
    height:355px;
}
.screen-4-phone-item{
    width:218px;
    height:355px;
    margin-right:92px;
    float:left;
    background:url(img/screen-4-phone.png) -26px top no-repeat;
}
.screen-4-phone-i1{
    background-position:-21px 0;
}
.screen-4-phone-i2{
    background-position:-301px 0;
}
.screen-4-phone-i3{
    background-position:-574px 0;
}
.screen-4-phone-i4{
    background-position:-846px 0;
    margin-right:0;
}
.screen-4-phone-color{
    padding-top:307px;
    font-size:16px;
}
.screen-4-phone-model{
    padding-top:9px;
    font-size:12px;
    color:#d8dadc;
}

/*第五屏*/
.screen-5{
    width:100%;
    height:800px;
    background:url(img/screen-5-bg.png) center bottom no-repeat;
    background-color: #d9dde1;
    text-align: center;
}
.screen-5-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-5-subheading{
    padding-bottom:55px;
}

/*第六屏*/
.screen-6{
    width:100%;
    height:202px;
    background-color: #d9ddd1;
    background:url(img/screen-6-bg.png);
    text-align: center;
    padding-top:118px;
}
.screen-6-btn{
    width:243px;
    height:78px;
    line-height:78px;
    text-align: center;
    background:#f01414;
    color:#fff;
    border-radius:3px;
    font-size:24px;
    font-weight:lighter;
    border:none;
    box-shadow:0 0 10px rgba(0,0,0,.5);
    display: inline-block;
}

/*底部*/
footer{
    text-align: center;
    color:#fff;
    width:100%;
    height:80px;
    line-height:80px;
    background-color: #07111b;
    font-size:12px;
    font-weight:lighter;
}
/*# sourceMappingURL=style.css.map */

此時靜態頁面已經完成


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

-Advertisement-
Play Games
更多相關文章
  • 在前端開發中,JavaScript並沒有想象中那麼簡單,不只是簡單的UI輸入驗證,還有面向對象。對於剛剛JavaScript入門的你來說,可能會稍稍驚訝:哇,雖然前端開發好找對象,但是JavaScript真的可以向對象編程麽!!!是的,你沒有看錯,本文將通過一些小例子,逐步講解JavaScript的... ...
  • 變數命名 變數名:字母 數字 下劃線 美元符$ jquery: $ $.each() $ jQuery underscore( js的一個函數庫) : _ _.each() 關鍵字 : if for 保留字 : class 推薦有意義的命名: buttonCancel button_cancel b ...
  • 在有些情況下,我們可能需要對一個 prop 進行“雙向綁定”。不幸的是,真正的雙向綁定會帶來維護上的問題,因為子組件可以修改父組件,且在父組件和子組件都沒有明顯的改動來源。 所以就推薦以update:myPropName 的模式觸發事件取而代之。舉個例子,在一個包含 title prop 的假設的組 ...
  • 存儲一張圖片,常見兩種思路: 1. 存儲 寬高、每個像素的 RGBA 值——點陣圖 1. 存儲 寬高、每個幾何圖形——矢量圖 一張圖片,如果幾何圖形關係明確,用矢量圖來存儲,不但空間占用少,而且信息比點陣圖全。因為點陣圖沒有表達出幾何圖形的關係,在縮放時點陣圖只好失真。 同理,存儲一系列數據時: 1. 如果 ...
  • Vue實現動態路由及登錄&404頁面跳轉控制&頁面刷新空白解決方案 by:授客 QQ:1033553122 開發環境 Win 10 Vue 2.9.6 node-v10.15.3-x64.msi 下載地址: https://nodejs.org/en/ 代碼片段(router/index.js) 說 ...
  • 網頁交互效果的實現 滾動條高度的獲取以及設置:document.body.scrollTop || document.documentElement.scrollTop .split() 把字元串分割成數組 .join() 把數組轉為字元串 .replace( /\s+/g, " ") 正則全局替換 ...
  • 之前已經完成了靜態頁面的開發,接下來是網頁動態效果製作 css實現動畫的兩種方式: 1、transition: all 1s; 2、animation: move 1s infinite ease-in-out .5s; @keyframes move{ 0%{ transform: rotate( ...
  • start 基於 koa 2.11 按以下流程分析: app.use() use 方法定義在 中: this.middleware 這就是一個數組,用來存放所有中間件,然後按順序執行。 app.listen() 這個方法定義在 中: this.callback() this.handleReques ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...