CSS&HTML&REM制作手机端网页（小练习）

最新推荐文章于 2023-12-19 10:42:48 发布
最新推荐文章于 2023-12-19 10:42:48 发布
阅读量1k 收藏 12
点赞数 1
分类专栏： CSS3 HTML5 文章标签： css css3 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47015897/article/details/113594915
版权
CSS3 同时被 2 个专栏收录
38 篇文章 16 订阅
订阅专栏
HTML5
37 篇文章 8 订阅
订阅专栏

效果图：
在这里插入图片描述
html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱学习</title>
    <link rel="stylesheet" href="../00fontawesome/css/all.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./icon/移动端/iconfont.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
 <!-- 创建头部的容器 -->
    <header class="top-bar">
        <div class="menu-btn">
            <a href="#"><i class="fas fa-stream"></i></a>
        </div>
        <h1 class="logo">
            <a href="#">I Learn</a>
        </h1>
        <div class="search-btn">
            <a href="#"><i class="fas fa-search"></i></a>
        </div>
    </header>

    <!-- 中部图片块 -->

    <div class="banner">
        <div class="top-image">
            <img src="./img/17/banner.png" alt="">
        </div>
        <div class="bottom-image">
            <div class="x"><i class="iconfont icon-shu"></i><a href="">My Courses</a></div>
            <div class="y"><i class="iconfont icon-xingxing"></i><a href="">Start Teacher</a></div>
            <div class="z"><i class="iconfont icon-shuqian"></i><a href="">Subscription</a></div>
            <div class="i"><i class="iconfont icon-xiazai"></i><a href="">My Download</a></div>
        </div>
    </div>
    
    <!-- 底部滑动模块 -->

    <div class="bottom-cover">
        <div class="top-nav">
            <div class="title"><h2>Latest Course</h2></div>
            <div class="text"><p>More +</p></div>
        </div>

        <div class="slide-list">
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-cover">
        <div class="top-nav">
            <div class="title"><h2>Latest Course</h2></div>
            <div class="text"><p>More +</p></div>
        </div>

        <div class="slide-list">
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-cover">
        <div class="top-nav">
            <div class="title"><h2>Latest Course</h2></div>
            <div class="text"><p>More +</p></div>
        </div>

        <div class="slide-list">
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
            <div class="slide">
                <div class="picture"><img src="./img/17/cover.png" alt=""></div>
                <div class="subheading">
                    <h3>Photography course</h3>
                </div>
                <div class="bottom-bar">
                    <div class="headimg"><img src="./img/17/avatar.png" alt=""></div>
                    <div class="text"><span> Annabelle</span></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

less文件：

*{
    margin: 0px;
    pad: 0px;
}

a{
    text-decoration: none;
}
html{
    font-size: (100vw / 750 * 40);
    background-color: #EFF0F4;
}
.w{
    width: (694 / 40rem);
    margin: 0 auto;
}
.top-bar:extend(.w){
    display: flex;
    height: (175 / 40rem);
    line-height: (175 / 40rem);;
    // background-color: red;
    justify-content: space-between;
    align-items: center;
    a{
        font-weight: bold;
        font-size: (55 / 40rem);
        color: #24253D;
    }
    i{
        font-size: (45 / 40rem);
        color: #999999;
    }
}


.banner:extend(.w){
    height: (560 / 40rem);
    // background-color: red;
    .top-image{
        height: (280 / 40rem);
    }
    img{
        width: 100%;
    }
    .bottom-image{
        height: (280 / 40rem);
        // background-color: red;
        float: left;
        div{
            display: inline-block;
            margin-top: (36 /40rem);
            height: (104 / 40rem);
            width: (327 / 40rem);
            // background-color: wheat;
            border-radius: (10 / 40rem);
            line-height: (104 / 40rem);
            text-align: left;
            color: white;
            i{
                margin-left: (40 / 40rem);
                margin-right: (25 / 40rem);
                font-size: (40 / 40rem);
            }
            a{
                color: white;
                font-size: (12 / 40rem);
            }
        }
        .x{
            background-color: #F97053;
        }
        .y{
            background-color: #C657FF;
            float: right;
        }
        .z{
            background-color: #FF3971;
        }
        .i{
            background-color: #1D92FF;
            float: right;
        }

    }
}


// 滑动模块
.bottom-cover:extend(.w){
    height: (392 / 40rem);
    // background-color: red;
    margin: (42 / 40rem) auto;
    .top-nav{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        h2{
            color: #24253D;
            font-size: (35 / 40rem);
            border-left: 2px #3A84FF solid;
            padding-left: (10 / 40rem);
        }
        p{
            font-size: (12 / 40rem);
            color: #656565;
        }
    }


    .slide-list{
        width: 100%;
        height: (410 / 40rem);
        display: flex;
        overflow: auto;
        align-items: center;
        margin-top: -10px;
    }
    .slide{
        margin-top: (42 /40rem);
        width: (327 / 40rem);
        height: (323 / 40rem);
        background-color: white;
        border-radius: (15 / 40rem);
        box-shadow: 0px 0px 9px rgba(0, 0, 0, .1);
        margin-right: (20 / 40rem);
        .picture{
            width: (285 / 40rem);
            height: (175 / 40rem);
            margin: (21 / 40rem);
            margin-bottom: 0;
            img{
                width: 100%;
            }
        }

        .subheading{
            width: 100%;
            height: (20 / 40rem);
            line-height: $height;
            margin-left: (21 / 40rem);
            // margin-top: (-21 / 40rem);
            // background-color: red;
            h3{
                color: #24253D;
                height: 100%;
                font-size: (30 / 40rem);
            }
        }

        .bottom-bar{
            width: 100%;
            height: (100 / 40rem);
            margin: 0 (21 / 40rem);
            margin-top: (30 / 40rem);

            .headimg{
                float: left;
                height: (50 / 40rem);
                line-height: $height;
                img{
                    height: 100%;
                }
            }
            .text{
                font-size: (12px / 40rem);
                height: (50 / 40rem);
                line-height: $height;
                margin-left: (70 / 40rem);
                color: #969393;
            }
        }
    }
}

注：需将less转换为css

Etui۹(･༥･´)و ̑̑
关注
专栏目录
dw编写手机版html,手机移动网页制作：用
weixin_33977645的博客
06-22 4389
手机移动网页制作：用Dreamweaver软件工具现在的互联网，可以说是名副其实的移动互联网。大家不仅可以利用无线网卡随处随地上网，还可以直接利用手机浏览网页、下载文件，而且现在的无线运营商也正在大力发展无线网络、扩展手机上网带宽。于是，手机网页的制作需求也变多了。这篇文章就简单的介绍一下制作手机网页的基础知识。首先，如果想制作wap网页，先要确定你的wap站的版本，是wap1.2还是wap2.0...
前端自适应基础讲解与网页设计练习(html+css)
m0_46258714的博客
08-08 381
自适应布局的特点，每个布局对应一个屏幕分辨率范围。不同浏览器有不同的虚拟窗口宽度的默认值，为了适应手机端网页的浏览。自动探测屏幕宽度，然后加载相应的CSS文件，根据不同的页面尺寸加载不同的代码部分。...
移动端页面小练习
qq_41633396的博客
05-31 491
为什么图片会不完整显示呢？ 因为设计图里面的图片给的就是一个二倍图的效果，我们将图片导入到html文档中，它就默认为css里面的像素，但是我们在检查工具中看到的是一个二倍图的效果（因为此时，css:手机像素比是1：2），所以，我们才会在调试工具的这个地方看到是完整图片的一半 为什么我的.banner设置了水平居中，但是，并没有试下效果呢？ 语句也没有写错，写错位置等，打开调试工具发现 style里面也设置了，但是在computed里面，发现它并没有生效？这是为什么？.banner也有宽度，</f
移动端-仿B站页面练习
m0_62181310的博客
05-03 715
1
html5--2.10综合实例2-移动端页面练习
weixin_30773135的博客
11-29 174
html5--2.10综合实例2-移动端页面练习 学习要点 通过一个简单的移动手机页面，复习学过的内容 手机网页的测试 手机布局的屏幕设定 手机网页的测试方法 直接在手机上测试，比较麻烦，效果好 电脑上下载手机模拟器 利用浏览器自带的功能 name="viewport"：屏幕设定 maximum-scale=1.0,minimum-scale=...
小米官网手机模块页面布局的实现练习
weixin_69821704的博客
01-16 174
小米官网手机模块页面布局的实现练习
HTML&CSS学习笔记 纯知识点版 (尚硅谷2019李立超版)
LiuKairui的博客
09-08 7709
此版为纯知识点无练习笔记版本 目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3
HTML/CSS笔记
小李的博客
10-11 451
思维导图 HTML 网页的基本结构 <!DOCTUPE HTML> 文档声明，声明当前文档版本 迭代 网页的版本 HTML4 XHTML2.0 HTML5 ... 文档说明 文档说明用来告诉浏览器当前的版本 进制 二进制 十进制 八进制 十六进制 字符编码 所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。 所以一段文字在存储到内存时，都需要转换为二进制编码 当我们读取这段文字时，计算机会将编码
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4451
HTML/CSS笔记#自用#尚硅谷#李立超
移动端rem布局初步练习
wujimiao的专栏
03-17 1223
渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。 你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！ 公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。 首先是移动头
手机网站模板制作CSS HTML5制作首页模板教程
06-13
手机网站模板制作CSS HTML5制作首页模板教程
用CSS3制作的手机版顶部下滑菜单.rar
07-10
css3 jquery实现foldit顶部下拉的菜单，适用于手机浏览，这种菜单在手机上很容易见到，平时状态下，只显示出菜单的一部分，当操作的时候，单击时才会展开会下拉显示，在下拉过程中，本效果有折弯的效果，如示例截图所示。因面向移动设备浏览，因此在IE下本效果会大大折扣。
HTML5+CSS3炫酷的手机登陆界面
08-10
HTML5+CSS3实现的登陆界面
HTML5+CSS3移动端响应式网页制作
小头Sophia
03-03 4332
1.响应式可以简单理解为：能够适应所有的设备屏幕 2.H5相较于XHTML增强了语义化。 3.Box-sizing:border-box;（内减模式） 4.固比的布局，固定的模块要用绝对定位的方式将其固定住。 5.阴影属性：box-shadow:水平阴影的位置，垂直阴影的位置，模糊羽化，阴影的尺寸，阴影的颜色，内外阴影; 默认是外阴影
文章添加和修改自动生成手机端文章页面
黑夜人的博客
06-13 1382
文章添加和修改自动生成手机端文章页面需求：为了更好的实现自动化，在添加和编辑文章时自动生成手机端的文章页面思路：1.之前已经安装了手机端静态化模块，此开发依赖于这个模块，这样代码可以复用这个模块的，之前文章页生成需求点击手机端静态化模块进行更新文章。2.发布文章时候回自动生成PC静态化页面，代码实现可以卸载这个下面，并做个配置开关。代码开发如图：代码特点：1.做个一个配置开启的开关可以关闭和开启 ...
用HTML+CSS写一个手机微信界面
m0_54066656的博客
03-31 4585
如何使用前端画出一个微信聊天界面？不定期更新ing。
【学习】如何制作手机端html模板（REM的实际应用）
weixin_30908707的博客
04-21 605
以前制作手机页面时，总是很迷茫，不知从何着手，页面也不知如何处理。会用一些百分比啊，媒体查询啊，还有就是目测了，但是各种手机端的屏幕适配是个老大难的问题，没有做到百分百兼容的。自从发现了rem这个好东西，并且听了一位有经验同事的讲解，顿时豁然开朗，现在对于手机端的页面开发，可以说胸中有一点丘壑了。rem最能打动我的地方在于，他不会改变原来在PC端的代码书写习惯，只是把计量单位换了一下，所以迫不及待...
怎样在网页上用html做一个手机屏幕面板图
雷潇的博客
12-15 4381
首先你要下载一张跟手机屏幕分辨率一样的类型的图片 1.建立一个html文档，引入css 3.建立div样式，css插入图片，布置好宽高                                                          4.在网页上初步预览就是这样 5.然后就是把屏幕上的内容做出来，这些小图标在Bootstrap上面都有组件， 只需要找到了
【简单html静态网页代码】 基于HTML仿oppo手机商城电商项目的设计与实现6个页面
最新发布
而风不止
12-19 1660
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
CSS3新单位rem在H5手机端开发的应用解析
“H5手机端开发制作之新单位rem说明文档” 在移动设备的Web开发中，适应不同屏幕尺寸和分辨率的需求变得越来越重要。传统的百分比布局虽然具有一定的灵活性，但在处理不同屏幕尺寸下的字体和元素大小时，往往无法...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值