採用rem高仿網易新聞h5版新聞列表頁

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

一、頁面框架搭建(構建，scss)
終端輸入

webpack --watch

可以執行webpack檔案偵聽並打包

二、頁面樣式編寫

三、rem計算程式碼編寫

四、適配多種機型大小，resize完善

程式碼如下：
檔案目錄
這裡寫圖片描述

app.js

require('./index.scss');        // 引入scss檔案

// 獲取螢幕寬度(viewport寬度)
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

// 獲取html的DOM
let 
 htmlDom = document.getElementsByTagName('html')[0];

// 設定html的fontsize
htmlDom.style.fontSize = htmlWidth / 10 + 'px';

window.addEventListener('resize',(e)=>{
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
});

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>新聞列表</title>
<link rel="stylesheet" type="text/css" href="./reset.css" 
 />
</head>

<body>
    <div class="header">
        <ul class="header-content">
            <li class="header-item">推薦</li>
            <li class="header-item">新聞</li>
            <li class="header-item">娛樂</li>
            <li class="header-item">體育</li>
            <li class="header-item">圖片</li>
            <li class="header-item">財經</li>
        </ul>
    </div>
    <div class="banner-content">
        <img class="banner" src="./images/top.jpg" />
        <p class="banner-title">2018狗年時尚跨界盛典</p>
    </div>
    <div class="news-content">
        <ul>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女頭像美女頭像美女頭像美女頭像</p>
                    <span class="time">
                        1小時前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女頭像美女頭像美女頭像美女頭像</p>
                    <span class="time">
                        1小時前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女頭像美女頭像美女頭像美女頭像</p>
                    <span class="time">
                        1小時前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
            <li class="news-item">
                <div class="item-inner">
                    <img class="news-img" src="./images/1.jpg" />
                    <p class="news-title">美女頭像美女頭像美女頭像美女頭像</p>
                    <span class="time">
                        1小時前
                    </span>
                    <span class="num">
                        99999
                    </span>
                </div>
            </li>
        </ul>
    </div>
    <script src="./build/bundle.js"></script>
</body>
</html>

index.scss

// 定義方法，把px轉換成rem
@function px2rem($px){
    $rem:37.5px;            //  定義rem基準值，這裡用的是iphone 6的視覺稿
    @return ($px / $rem) + rem;
}

html{
    background-color: #f8f8f8;
}

.header{
    height: px2rem(40px);    // 注意設計稿上是80px，需要除以2
    width: 100%;
    background-color: red;
    padding-left: px2rem(23px);
    .header-item{
        float: left;
        color: #ffcdce;
        font-size: px2rem(16px);
        margin-right: px2rem(20px);
        line-height: px2rem(40px);

        &:nth-child(2){
            color: #fff;
            font-size: px2rem(17px);
        }
    }
}

.banner-content{
    position: relative;
    .banner{
        display: block;
        width: 100%;
        height: px2rem(190px);
    }
    .banner-title{
        position: absolute;
        left: px2rem(15px);
        bottom: px2rem(15px);
        font-size: px2rem(16px);
        color: #fff;
    }
}

.news-content{
    .news-item{
        width: 100%;
        height: px2rem(90px);
        padding-left:px2rem(15px);
        padding-right:px2rem(15px);
        box-sizing: border-box;
    }
    .item-inner{
        position: relative;
        overflow: hidden;
        height: 100%;
        border-bottom: px2rem(1px) solid #e5e5e5;
    }
    .news-img{
        float: left;
        display: block;
        margin-top: px2rem(10px);
        width: px2rem(95px);
        height: px2rem(70px);
        margin-right: px2rem(15px);
    }
    .news-title{
        color: #404040;
        font-size: 17px;
        margin-top: px2rem(16px);
        line-height: px2rem(20px);
    }
    .time{
        position:absolute;
        left: px2rem(110px);
        bottom: px2rem(17px);
        color: #888;
        font-size: px2rem(12px);
    }
    .num{
        position:absolute;
        color:#888;
        font-size: px2rem(12px);
        right: px2rem(4px);
        bottom: px2rem(17px);
        &::before{
            content: ' ';
            display: block;
            position: absolute;
            width: px2rem(21px);
            height:px2rem(20px);
            background-size: contain;
            top: px2rem(-4px);
            left: px2rem(-23px);
            background-image:url('./images/read-icon.png');
        }
    }
}

package.json

{
  "name": "rem",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
    // 頁面入口檔案配置
    entry:[
        './app.js'
    ],
    // 入口檔案輸出配置
    output:{
        path:path.resolve(__dirname,'./build'),
        filename:'bundle.js'
    },
    module:{
        // 載入器配置
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },{
                test:/\.scss$/,
                loader:'style-loader!css-loader!sass-loader'
            },{
                test:/\.(png|jpg)$/,
                loader:'url-loader?limit=8192'
            }
        ]
    }
};

這裡寫圖片描述

採用rem高仿網易新聞h5版新聞列表頁

一、頁面框架搭建(構建，scss) 終端輸入 webpack --watch 可以執行webpack檔案偵聽並打包二、頁面樣式編寫三、rem計算程式碼編寫四、適配多種機型大小，resize完善程式碼如下：

基於Node.js+MySQL開發的開源微信小程序B2C商城（頁面高仿網易嚴選）

收貨地址 lec load alt conf print 商品列表 pac data 高仿網易嚴選的微信小程序商城（微信小程序客戶端）界面高仿網易嚴選商城(主要是2016年wap版) 測試數據采集自網易嚴選商城功能和數據庫參考ecshop 服務端api基於Ｎode.j

高仿網易新聞頻道選擇器

前言前段時間公司做一個新聞類的專案，需要支援頻道編輯，快取等功能，介面效果邏輯就按照最新版的網易新聞來，網上沒找到類似的輪子，二話不說直接開擼，為了做到和網易效果一模一樣還是遇到不少坑和細節，這在此分享出來，自己做個記錄，大家覺得有用的話也可以參考。支援手動整合或者cocoapods整合。專案地址

高仿網易評論列表效果之介面生成

前兩節我們分別分析了網易評論列表介面和生成一些我們需要的測試資料，生成測試資料那段如果大家看著看得頭疼沒關係，直接調業務物件中的方法生成資料即可不必理會我是怎麼處理的，接下來的對於大家來說才是讓各位感興趣的東西。介面分析了、資料也有了，那我們如何實現這樣的一個介面呢？首先我們來

Android中RecyclerView學習(二)----高仿網易新聞欄目動畫效果

之前用TabLayout+RecyclerView實現了CSDN客戶端首頁搭建與Tabs的排序。今天準備用RecyclerView來實現網易新聞Tabs的動態效果。先看效果圖：點選下面的RecyclerView的item，會有一個view的移動的動畫；動畫完成以後，

[iOS開發]關於仿網易新聞中詳細頁圖文混排功能的實現

{"B4A39DDB00964LQ9":{"body":" 　　給你們講一個恐怖的故事：聽說從今天開始2015年只剩下100天了！<\/p> 　　2015年快過去了，年初定下的目標都達成了嗎？時間總是不知不覺匆匆地過去，不留下一絲痕跡。<\/p> 　　俗語有云：生命很短，我們真的沒必

關於仿網易新聞中詳細頁圖文混排功能的實現

分享一個仿網易新聞客戶端iPhone版的標籤式導航ViewController

該Controller是一個容器，用於容納其他的controller。效果與網易新聞客戶端的標籤式導航基本一樣：（1）點選上面的標籤，可以切換到對應的controller，標籤下面的紅色提示條的長度會動態變化。（2）在下面的內容區裡左滑或者右滑可以切換對應的controlle

Android Studio精彩案例(一)《ActionBar和 ViewPager版仿網易新聞客戶端》

轉載本專欄文章，請註明出處，尊重原創。文章部落格地址：道龍的部落格為了能更好的分享高質量的文章，所以開設了此專欄。文章程式碼都以Android Studio親測執行，讀者朋友可在後面直接下載原始碼。該專欄是基於Android Studio的精彩案例和一些中高

JS之選項卡-仿網易新聞

com selected ons utf-8 put adding mouse ext 網易 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8">

原生js仿網易輪播圖

win cli font inline move 創建 ica tle 默認  <div id="wrap"> <div class="picBox">

iOS 開發仿網易雲音樂歌詞海報

atomic keyword draw write mode () 解析 efault album 使用網易雲音樂也是一個巧合，我之前一直使用QQ音樂聽歌，前

C# WPF 仿網易雲音樂（PC）左側菜單右側內容效果

ups tle onu urn mar mat 難點 -c nat 我們要做的效果是這樣的，左側是可折疊的菜單欄，右側是內容區域，點擊左側的菜單項右側內容區域則相應地切換。這篇博客標題起得比較隨意了，因為很多軟件、網站都有這種布局效果，所以請忽略。 wpf實現的話，我的辦

HTML自定義滾動條（仿網易郵箱滾動條）轉載

基本上 fma 內容 scrollbar color http code %20 water 它是使用CSS中的偽元素來實現的，主要由以下三個來完成： 1. -webkit-scrollbar：定義滾動條的樣式，如長寬。 2. -webkit-scrollbar-thumb

Android 仿網易雲首頁來回滑那種效果

思路:中間ViewPager 畫廊,底部背景ImageView 高斯模糊過程很曲折:參考了很多比如網易雲音樂播放器頁面也有類似效果底部做成ViewPager 也可以但是切換動畫 pagertransform 很難弄到合適的所以最後決定還是ImageVi

WPF 仿網易雲音樂PC端

git demo mage r+ 體驗 music mvvm 成了 skin 簡介 (1)左側菜單采用 Expander+RadioButton； MVVM 綁定後臺的一個Menu 屬性（使用轉換器） (2)右側采用Frame綁定Page的方式 ## 【更新日誌】

C# WPF 低仿網易雲音樂（PC）Banner動畫控制元件

原文: C# WPF 低仿網易雲音樂（PC）Banner動畫控制元件由於技術有限沒能做到一模一樣的動畫，只是粗略地做了一下。動畫有點生硬，還有就是沒做出網易雲音樂的立體感。程式碼非常簡單粗暴，而且我也寫有很多註釋，這裡就不多囉嗦了，直接貼程式碼。算了，囉嗦幾句。原理是這樣的，在自定義使用者控制元件內新

C# WPF 低仿網易雲音樂（PC）歌詞控制元件

原文: C# WPF 低仿網易雲音樂（PC）歌詞控制元件提醒：本篇部落格記錄了修改的過程，廢話比較多，需要專案原始碼和看演示效果的直接拉到文章最底部~ 網易雲音樂獲取歌詞的api地址 http://music.163.com/api/song/media?id=歌曲ID 填

原生js仿網易雲輪播特效

原理：運用兩張圖片切換可視區域向左走或向右走要跳轉的圖片定位在可視區域的左邊或右邊然後用緩動動畫實現切換重點：緩動動畫 js實現步驟：1、獲取所需元素 2、建立指示器 3.讓第一個選中 4.新增事件 5、切換索引 6、自動輪播 1、獲取所需元素 var slider=$(

採用selenium 抓取網易雲音樂上的熱門歌曲以及相關資訊

由於網易雲音樂網站頁面採用了js技術進行了非同步載入，所以這裡採用了selenium並採用PHantomJS工具抓取動態頁面廢話不多說，直接上程式碼。這個程式碼也是要了小生2天時間啊這是改進版的 # -*- coding: utf-8 -*- #@Time :18-10-2

採用rem高仿網易新聞h5版新聞列表頁

相關推薦