H5C3第三个大项目————移动端

最新推荐文章于 2022-12-11 17:48:28 发布
最新推荐文章于 2022-12-11 17:48:28 发布
阅读量163 收藏
点赞数 4
文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45293340/article/details/126146706
版权

移动端与PC端有一些地方不一样，涉及到机型不同造成的物理像素的不同，这里需要用到rem来转换不同的机型造成的不同变化，以及flex.js以及一些插件来完成

接下来看代码部分

html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <link rel="stylesheet" href="./移动端.css">
</head>

<body>
    <header>
        <img src="./img/底部安全@2x.png" alt="">
    </header>
    <section>
        <div><a class="s-1" href=""><img src="./img/路径 9@2x.png" alt="">
                <p>商品详情</p><img src="./img/路径 68@2x.png" alt="">
            </a></div>
        <div><a href=""><img src="./img/图像 45@2x.png" alt=""></a></div>
        <div class="ding"><a href=""><span class="o">1</span><span class="t">/3</span></a></div>
        <div><a href="">万代魂&nbsp;中国限定&nbsp;S.H.Figuarts&nbsp;悟空战袍·赛罗奥特曼</a></div>
        <div><a href=""><span class="q1"> 报价：￥460.00&emsp;&emsp;预购价：￥50.00</span><span class="q2">（达上限为止）</span></a>
        </div>
        <div class="nine"><a href="">拍下视为已阅读详情页，并同意</a></div>
        <div class="n-all">
            <div class="nine"><a href=""><span>2875人看过</span></a></div>
            <div class="nine three-9"><a href=""><span class="pf">评分：</span><span class="b9">9</span><span
                        class="s9">共1064人评分</span></a></div>
        </div>
        <div><a href=""><img src="./img/组 16551@2x.png" alt=""></a></div>
        <div>
            <ul>
                <li><a href="">形象：赛罗/悟空</a></li>
                <li><a href="">商品总价：￥460.00</a></li>
                <li><a href="">系列：S.H.Figuarts</a></li>
                <li><a href="">厂商：万代</a></li>
                <li><a href="">开定时间：2022年6月1日</a></li>
            </ul>
            <ul>
                <li><a href="">适用年龄：3岁以上</a></li>
                <li><a href="">包装方式：彩盒</a></li>
                <li><a href="">材质：PVC</a></li>
                <li><a href="">进口地：无</a></li>
                <li><a href="">到货时间：2022年11月</a></li>
            </ul>
        </div>
        <div class="ten">
            <div class="bgtu"><img class="tuc" src="./img/图层 1.png" alt="">
                <img src="./img/组 16553@2x.png" alt="">
                <div class="wd">万代（BANDAI）</div>
                <div class="pp">品牌</div>
                <div class="rc">日产</div>
            </div>
            <div class="orange-2">
                <div class="o-l"><a href=""><img src="./img/图层 2@2x.png" alt="">
                        <p>全部商品</p>
                    </a></div>
                <div class="w-l"><a href=""><img src="./img/图层 2@2x(1).png" alt="">
                        <p>公司介绍</p>
                    </a></div>
            </div>
        </div>
        <div><span>产品详情</span></div>
        <div><img src="./img/图像 47@2x.png" alt=""></div>
    </section>
    <div>

    </div>
    <footer>
        <div><a href=""><img src="./img/组 16553@2x.png" alt=""></a></div>
        <div><a href=""><img src="./img/图层 2@2x(2).png" alt="">
                <p>评论</p>
            </a></div>
        <div><a href=""><img src="./img/路径 69@2x.png" alt="">
                <p>收藏</p>
            </a></div>
        <div><a href=""><img src="./img/组 16846@2x.png" alt="">
                <p>加入购物车</p>
            </a></div>
        <div><a class="five" href=""><img src="./img/图层 2@2x(3).png" alt=""><span>立即购买</span></a></div>

    </footer>
    <div class="heng"><a href=""><img src="./img/组件 38 – 26@2x.png" alt=""></a></div>
</body>

</html>

css代码如下

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

html,
body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
    height: 1.1733rem;
    /* background-color: aquamarine; */
    position: relative;
}

header img {
    /* height:  87.9975px; */
    width: 100%;
    position: absolute;
    right: -0.2453rem;
}

/* 顶部栏 */

section {
    flex: 1;
    overflow: auto;
    display: flex;
    width: 100%;
}

/* 中间填充 */

footer {
    width: 100%;
    height: 1.3067rem;
    /* background-color: aquamarine; */
    display: flex;
    justify-content: space-between;

}

footer a:not(.five) {
    height: 1.3067rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

footer p {
    font-size:.2934rem;
}

footer span {
    font-size: .3733rem;
    margin-left: .0667rem;
    color: white;

}

footer>div:nth-child(1) img {
    height: 1rem;
    margin-left: .2667rem;
    /* margin-top: .0933rem; */
}

footer>div:nth-child(2) img {
    height: .4rem;
    width: .4533rem;
    margin-left: .1067rem;
}

footer>div:nth-child(3) img {
    height: .4rem;
    width: .4rem;
    margin-left: .1067rem;
}

footer>div:nth-child(4) img {
    height: .6133rem;
    width: .6933rem;
    margin-left: 32x;
    margin-top: -0.1067rem;
}

footer>div:nth-child(5) img {
    height: .4rem;
    margin-right: .0533rem;
}

footer>div:nth-child(5) {
    width: 4rem;
    height: 1.3067rem;
    background-color: #D12324;
    line-height: 1.3067rem;
    padding: 0 0 0 .8533rem;
    box-sizing: border-box;
    margin-right: -0.2267rem;
}

.heng img {
    height: .9067rem;
    width: 100%;
}

/* 底部栏 */
section {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
    /* min-width: 10rem; */
    /* min-height: 12.32rem; */
    /* justify-content: center; */
}

section>div {
    margin: .0533rem 0;
}

section div:nth-child(2) a {
    font-size: .3733rem;
}

.n-all {
    height: .5067rem;
    border-bottom: .0133rem solid #E7E7E7;
    padding-bottom: .4rem;
}

.pf,
.nine a {
    font-size: .32rem;
    color: #B6B6B6;
}

.b9 {
    font-size: .5333rem;
    margin: 0 .1333rem 0 0;
}

.s9 {
    font-size: .2133rem;
}

section>div:nth-child(8) {
    position: relative;
}

section>div:nth-child(8) img {
    position: absolute;
    height: .1733rem;
    top: -1.1467rem;
    right: 1.12rem;
}

/* 中间下方文字 */
.three-9 {
    margin-right: .8rem;
    margin-top: -0.2667rem;
}

section div:nth-child(1) a {
    /* background-color: aqua; */
    line-height: 1.3067rem;
    height: 1.3067rem;
    display: flex;
    justify-content: space-between;
}

.s-1>img:nth-child(1) {
    height: .4533rem;
    margin-top: .4267rem;
}

.s-1>img:nth-child(3) {
    height: .5067rem;
    margin-top: .4267rem;
}

.s-1 p {
    font-size: .4267rem;
}

/* 中间第一行 */
section div:nth-child(2) {
    text-align: center;
    position: relative;
}

section div:nth-child(2) img {
    width: 5.7333rem;
    /* margin-left: 1.0667rem; */
}
section div:nth-child(9){
display: flex;
justify-content: space-around;
}
/* 大图 */
.ding {
    width: 1.4267rem;
    height: .5333rem;
    background-color: #999999;
    border-radius: .2667rem 0 0 .2667rem;
    position: absolute;
    right: 0rem;
    top: 7.3333rem;
    box-sizing: border-box;
    padding-left: .4rem;
    line-height: .5333rem;
    z-index:99;
}

.ding span {
    color: white;
}

.o {
    font-size: .3733rem;

}

.t {
    font-size: .2667rem;
}

section div:nth-child(4) a {
    font-size: .4267rem;
    color: black;
}

.q1 {
    color: red;
    font-size:.3733rem;
}

.q2 {
    font-size: .2667rem;
}

section div:nth-child(7) {
    /* float: left; */
    display: flex;
    justify-content: space-between;
    /* background-color: bisque; */
    align-items: center;
}

section div:nth-child(9) {
    /* float: right; */
    display: flex;
    /* justify-content: space-between; */
    /* background-color: aqua; */
}
.tuc{
    position: absolute; 
    left: -20px;
    width: 10rem;
}
section>ul {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    justify-content: space-between;
}

section>div>ul a {
    font-size: .3467rem;
    line-height: .84rem;
    color: black;
}

section ul:nth-child(2) {
    margin-left: .64rem;
}

section>div:nth-child(10) {
    height: 3.6133rem;
    /* background-color: #0b0404; */
    
    padding: 0 0;
    box-sizing: border-box;
    width: 10rem;
}

section:not(.ten) {
    padding: 0 .2667rem;
    
}

.orange-2 {
    display: flex;
    height: 1.3867rem;

}

.orange-2 div {
    margin-top: .4rem;
}

.bgtu {
    height: 2.1067rem;
}

.o-l,
.w-l {
    width: 4.56rem;
    height: .72rem;
    line-height: .72rem;
    border-radius:.3733rem;
    /* border: 4.6875px solid #FE5722; */
}

section>div:nth-child(10) .o-l a,
.w-l a {
    display: flex;
    justify-content: center;
    line-height: .72rem;
    font-size: .3467rem;

}

section>div:nth-child(10) .o-l img,
section>div:nth-child(10) .w-l img {
    width: .4267rem;
    height: .4267rem;
    margin-top: .1333rem;
    margin-right:.2667rem;
}

.o-l {
    background-color: #FE5722;
    margin-right: .2667rem;
}

.w-l {
    background-color: white;
    /* margin-right: .1333rem; */
}

.ten {
    position: relative;
}

.bgtu img:not(.tuc){
    width: 1.3333rem;
    position: absolute;
    top: .3867rem;
    left: .2667rem;
}

.wd {
    font-size: .3467rem;
    color: white;
    position: absolute;
    top: .44rem;
    left: 1.9067rem;
    width: 3.2rem;
    /* background-color: #00B32A; */
}

.pp,
.rc {
    font-size: .2667rem;
    color: white;
    width: 1.0667rem;
    height: .4533rem;
    border-radius: .24rem;
    text-align: center;
    line-height: .4533rem;
}

.pp {
    background-color: #BF1D1E;
    position: absolute;
    top: 1.3333rem;
    left:2.0267rem;
}

.rc {
    background-color: #00B32A;
    position: absolute;
    top: 1.3333rem;
    left: 3.4133rem;
}
/* 背景图块 */
section div:nth-child(11){
    height: 1.3067rem; 
    line-height: 1.3067rem;
    /* width: 100%; */
    text-align: center;
   
}
section div:nth-child(11)>span{
    font-size: .4267rem;
}
section div:nth-child(12) img{
    width: 10rem;
    text-align: center;
}

效果图如下

 

枫玄雾隐
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
移动端H5前端设计项目源码
04-08
移动端H5前端设计项目源码
【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5_h5页面内嵌小型ide(1)
最新发布
2401_84247559的博客
05-04 770
Cloud Studio 内置预览插件，可以实时显示网页应用，当代码发生改变之后，预览窗口会自动刷新，即可在 Cloud Studio 内实时开发调试网页了，还提供了二唯码在手机端进行调试。在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。
Vue 搭建移动端 h5 项目步骤
前端开发者
08-04 3万+
Vue 搭建移动端 h5 项目步骤 简介 最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目，没有整体的思路，于是我就写了这个步骤。 准备阶段 确定项目 ui 框架 现阶段比较好的 Vue 移动端 ui 框架：vant ， vux， cube-ui，Mint-UI，Muse UI，NutUI 等。 选择css预处理样式语言，（vue-cli 里选择） less，sass，stylus都可以，vue-cli 3 后的版本对应的webpack 的loader都是配置好的，只需下载对应的包就好了。使
写一个移动端（H5）的前端项目需要哪些插件以及常用的一些业务逻辑代码块，来look look 吧「干货满满」。
qq_54753561的博客
10-10 4195
写一个移动端（H5）的前端项目需要哪些插件以及常用的一些业务逻辑代码块包含一些mongodb数据库的操作，增删改查的接口，来look look 吧。
移动端H5商城模板源码-34个页面
09-07
基于原生HTML+JS开发的商城类移动端H5应用模板，内含主页、分类页、购物车、个人中心四大导航，还有支付相关功能，共包含30余个界面。
h5 移动端空白项目 模板
10-09
h5 移动端空白项目 模板
react-board:React H5 移动端项目模板
05-26
从零搭建 React 开发 H5 模板项目创建创建项目文件夹mkdir react-democd react-demonpm init -y依赖安装yarn add react react-domyarn add webpack webpack-cli webpack-dev-server webpack-mergebabel-core babel-...
详解搭建一个vue-cli的移动端H5开发模板
10-15
主要介绍了详解搭建一个vue-cli的移动端H5开发模板，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
原生JS开发手机端H5项目总结（FamilyChallenge）
weixin_45062076的博客
12-11 1581
原生JS开发手机端H5项目总结
H5+C3+JS制作个人博客，大牛绕道
09-25
新手开发，自己在网上仿的，有什么不足请指出，新手开发，自己在网上仿的，有什么不足请指出,新手开发，自己在网上仿的，有什么不足请指出,新手开发，自己在网上仿的，有什么不足请指出，新手开发，自己在网上仿的，有什么不足请指出，
比较好的移动端h5框架
08-24
比较好的移动端h5框架
HTML5移动端实战源码
10-02
移动端实战系列课程源代码，主要技术css3，html5，原生js，提供了很实用的小案例
整套移动端h5页面源码
12-09
电商项目源码，包含了所有一整套端，有需要端同学可以下载
Vue搭建移动端h5项目（已开源，附带git地址）Vant+Vue Router+Vuex+axios封装+案例交互+部分代码说明
ct5211314的博客
06-28 9835
项目介绍：vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配；通过Vant ui作为项目的组件库；通过Vuex管理数据状态，进行模块化管理；通过Vue Router配置项目路由，进行模块化管理；封装axios进行数据的请求，以及一些页面逻辑的交互和简单的代码说明。 项目地址：h5-vant 联系博主：如有问题可联系博主=》QQ：1596892941 VX：weiyi1596892941 项目说明：如果项目需要直接拿去用，
28个帮助你练习HTML CSS Javascript 的UI Page项目
web前端开发
10-18 584
英文 |https://niemvuilaptrinh.medium.com/29-projects-to-help-you-practice-html-css-javascript-d...
【移动端h5项目】京东移动端（流式布局）
coderYYY的博客
03-09 1019
技术栈 html css 体验 浏览器打开：jd-mobile Gitee 效果 主要使用流式布局（百分比布局），页面较为简单
移动端h5项目初始化
weixin_43894639的博客
03-06 848
移动端项目基础搭建
WEB前端开发：轮播图的实现（H5+C3+JavaScript）(JQuery)
热门推荐
嘻嘻的博客
11-11 5万+
一、轮播图的概念 轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。例如：淘宝，京东，等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。 二、轮播图的设计思想 轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为...
h5移动端 手势css放大
01-09
H5移动端中，可以通过CSS样式来实现手势放大效果。具体可以通过以下步骤进行实现： 1. 首先，将需要放大的元素使用CSS的transform属性进行缩放。可以通过设置transform的值为scale来实现元素的放大。例如，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值