h5页面分享一(附源码)

最新推荐文章于 2022-11-28 16:43:46 发布

逐鹿之城

最新推荐文章于 2022-11-28 16:43:46 发布

阅读量3.5w

点赞数 16

分类专栏：前端html相关 //【编程语言】

本文链接：https://blog.csdn.net/derkampf/article/details/79354482

版权

源码地址（含素材）https://github.com/zhangzhuo233/html_php_code/tree/master/html/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E6%A1%88%E4%BE%8B

###1. 页面效果
这里写图片描述
###2. index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>css网页布局</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--整体到部分，左到右，上到下-->
    <!--头部-->
    <div class="header">
        <div class="logo">
            <img src="img/logo.png" alt="logo">
        </div>
        <div class="nav">
            <ul>
                <li>手记</li>
                <li>视频</li>
                <li>图片</li>
                <li>首页</li>
            </ul>
        </div>
    </div>
    <!--主体-->
    <div class="main">
        <div class="top">
            <img src="img/1.jpeg" alt="topimg">
        </div>
        <!--遮罩层-->
        <div class="topplayer"></div>
        <!--最上层的内容-->
        <div class="topplayer-top">
            <div class="word">MY BEAUTIFUL LIFE</div>
            <button>LOOK MORE &gt;</button>
        </div>
        <div class="middle">
            <div class="m-t