2. 程式人生 > 其它 >足球圈移動端網頁Demo

足球圈移動端網頁Demo

阿新 • • 發佈：2022-05-25 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        html, body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        header {
            height: 44px;
            background: #43A047;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        header > div {
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            font-size: 12px;
            font-weight: bolder;
        }

        header div:nth-child(1) {
            border-radius: 12px 0 0 12px;
            background: #66BB6A;
            color: white;
        }

        header div:nth-child(2) {
            border-radius: 0 12px 12px 0px;
            background: #C8E6C9;
            color: grey;
        }

        section {
            flex: 1;
            overflow: auto;
        }

        section ul {
            display: flex;
            position: sticky;
            top: 0;
            background: #ffffff;
        }

        section ul li {
            flex: 1;
            text-align: center;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #d9d9d9;
            color: black;
            font-weight: bold;
            font-size: 14px;
        }

        section ul li:hover {
            border-bottom: 2px solid #4CAF50;
            color: #4CAF50;
        }

        section .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        section .list > div {
            width: 49%;
            margin-top: 4px;
            border: 1px solid grey;
        }

        section .list > div img {
            width: 100%;
        }

        section .list > div p {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-indent: 10px;
        }

        footer {
            height: 44px;
            background: white;
            color: grey;
        }

        footer ul {
            display: flex;
            height: 100%;
        }

        footer li {
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        footer li:hover {
            color: green;
        }

        footer li i {
            height: 21px;
            line-height: 21px;
            font-size: 16px;
            text-align: center;
        }

        footer li span {
            height: 17px;
            line-height: 17px;
            font-size: 12px;
            text-align: center;
        }
        footer li:nth-child(3){
            position: relative;
        }
        footer li:nth-child(3) i{
            position: absolute;
            width: 50px;
            height: 50px;
            border: 1px solid grey;
            border-radius: 50%;
            left: 50%;
            margin-left: -25px;
            top: -9px;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            background: white;
        }



    </style>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3426151_kirwjj518fp.css">
</head>
<body>
<header>
    <div>熱點</div>
    <div>關注</div>
</header>
<section>
    <ul>
        <li>頭條</li>
        <li>教程</li>
        <li>視訊</li>
    </ul>
    <div class="list">
        <div>
            <img src="images/img0.png" alt="">
            <p>櫻桃小丸子</p>
        </div>
        <div>
            <img src="images/img0.png" alt="">
            <p>櫻桃小丸子</p>
        </div>
        <div>
            <img src="images/img0.png" alt="">
            <p>櫻桃小丸子</p>
        </div>
        <div>
            <img src="images/img0.png" alt="">
            <p>櫻桃小丸子</p>
        </div>
        <div>
            <img src="images/img0.png" alt="">
            <p>櫻桃小丸子</p>
        </div>
        <div>
            <img src="images/img0.png" alt="">
            <p>櫻桃小丸子</p>
        </div>
    </div>
</section>
<footer>
    <ul>
        <li><i class="iconfont icon-shouye"></i><span>首頁</span></li>

        <li><i class="iconfont icon-sousuo"></i><span>發現</span></li>

        <li><i class="iconfont icon-xiangji"></i></li>
        <li><i class="iconfont icon-shequ"></i> <span>我的</span></li>

        <li><i class="iconfont icon-tanhao"></i><span>退出</span></li>

    </ul>
</footer>
</body>
</html>

完整程式碼

https://github.com/muzihuaner/LearnWeb/tree/master/CSS/zhuqiu

相關推薦

足球圈移動端網頁Demo

<!doctype html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\"

Vue移動端旋轉Demo

效果-請在移動端模式檢視 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\">

移動端網頁特效

1.觸屏事件touch 常見的觸屏事件 1.2 觸控事件物件（TouchEvent） 觸控事件物件重點三個常見物件列表

JavaScript 常見移動端網頁特效

1. 觸屏事件 1.1 觸屏事件概述 移動端瀏覽器相容性較好，不需要考慮 JS 的相容性問題。但是移動端也有自己獨特的地方，比如觸屏事件touch（觸控事件），Android 和 IOS 都有

百度貼吧、百家號移動端網頁已支援不跳轉 App 檢視全文和評論，百家號預設展開全文

感謝網友 官萬提醒 的線索投遞！

移動端NES網頁模擬器（1）

前言 移動端瀏覽器是沒有實體鍵盤的，想要操作遊戲就必須為其設定虛擬按鍵，通過虛擬按鍵（按鈕）的標識與實體鍵盤的keyCode進行繫結，來達到想要的效果。

移動端NES網頁模擬器（2）

前言 前面的章節已經封裝了一個NES的虛擬按鈕，這個章節來封裝他的方向鍵。

vue-cli-4 移動端腳手架模板vue-template-demo

技術標籤：vuevuejsvue-cli3vue-cli4vue.js vue-template-demo 基於 vue-cli4.0 + webpack 4 + vant ui + sass + rem+vw 適配方案+axios 封裝，構建手機端模板腳手架 github地址

網頁自適應PC端和移動端

如何讓網頁自動適應PC端和移動端 只需增加這麼一行：<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

移動端開發rem實現螢幕適配及處理頁面載入頁面坍塌樣式錯亂網頁閃爍問題

技術標籤：二、ECMA學習cssjavascriptjs rem佈局在載入的時候會出現元素一開始很小，閃爍一下恢復正常大小

Vant 移動端h5網頁專案記錄（van-tabs）（圖片間隙）

Vant相關 vant-tabs sticky屬性：將tab欄固定到頂部。 swipeable屬性：支援左右滑動切換標籤頁

網頁喚起App & 複製網頁內容到移動端剪下板

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />

探索前沿：移動端WebAssembly虛擬機器器

所謂“移動端動態執行WebAssembly”就是要找個移動端可用的WebAssembly虛擬機器器。所謂虛擬機器器簡單說就是能執行Wasm二進位制格式檔案的程式。

移動端效能優化

一、App啟動優化 1.App的啟動可以分為2種 冷啟動(Cold Launch):從零開始啟動APP 熱啟動(Warm Launch):APP已經在記憶體中，在後臺存活著，再次點選圖示啟動APP

移動端開發新趨勢Flutter

該文章屬於<簡書 — 劉小壯>原創，轉載請註明： <簡書 — 劉小壯> https://www.jianshu.com/p/1a90adc09e99

Unity3D移動端實現搖一搖功能

手機搖一搖功能在平時專案開發中是很常見的需求，利用Unity的重力感應可以很方便的實現該功能。

python通過移動端訪問檢視電腦介面

這篇文章主要介紹了python通過移動端訪問檢視電腦介面,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

js實現移動端吸頂效果

今天來簡單的寫一個吸頂，供大家參考，具體內容如下 先羅列一下吸頂需要使用到的屬性

js判斷瀏覽器的環境（pc端，移動端，還是微信瀏覽器）

今天突然看到一段很好的程式碼，分享給大家，順便也給自己留個筆記，js判斷瀏覽器的環境具體如下：

js實現適配移動端的拖動效果

本文例項為大家分享了js實現適配移動端的拖動效果，供大家參考，具體內容如下