CSSHTMLREM制作手机端网页（小练习）

效果图：

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

CSSHTMLREM制作手机端网页（小练习）相关推荐

ps制作手机端网页字体大小_制作网页的最佳字体大小
ps制作手机端网页字体大小 To make web content work, text on a page must be readable for all visitors. Following ...
Unity制作手机端VR第一步
基于Unity制作手机端VR小游戏我并非专业人员,写文章目的在于分享和请教: 1.指针与射线的创作调整好大小颜色,简单的准星就制作好了. 2.下面利用C#制作射线,我个人认为这是很重要的部分,需要 ...
网页制作手机端与PC端兼容
网页制作--手机端与PC端兼容手机端与PC端使用一套代码时,随屏幕分辨率的大小变化,会产生媒体查询并实现手机端与PC端的切换 (一套代码) <meta http-equir="Cac ...
手机端网页设计尺寸大小
手机端网页设计尺寸大小对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window X ...
手机端网页设计尺寸,手机端网页设计图片尺寸
电脑网页的设计尺寸对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常 ...
手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...
电商后台、手机端、小程序、H5、电商原型、需求池、产品结构图、接口流程、高保真交互、PRD、布局说明、数据统计、店铺管理、商品管理、财务管理、售后、订单、会员、客服、标签、Axure原型、产品原型
电商后台.手机端.小程序.H5.电商原型.需求池.产品结构图.接口流程.高保真交互.PRD.布局说明.数据统计.店铺管理.商品管理.财务管理.售后.订单.会员.客服.标签.Axure原型.产品原型.h ...
高保真原型、动画引导、用户登录、巡检任务、维保任务、用户中心、历史记录、帮助中心、清除缓存、任务抽检、扫描二维码、待办事项、账号设置、客服信息、交互说明、手机端、小程序、app原型、BIM信息综合管理
手机端(微信小程序)高仿真原型.动画引导.用户登录.巡检任务.维保任务.用户中心.历史记录.帮助中心.清除缓存.任务抽检.扫描二维码.待办事项.账号设置.客服信息.交互说明.手机端.小程序.app原型 ...
携程手机端网页设计效果图
携程手机端网页设计效果图为了避免挂科,该做的还是得做,自己学得也不咋会,就瞎写的,反正只要效果图出来就完事.所以代码极其啰嗦哈哈哈哈. 效果图如下: 文件总的放置路径是这样的 : 这个是 html ...

CSSHTMLREM制作手机端网页（小练习）

CSSHTMLREM制作手机端网页（小练习）相关推荐

最新文章

热门文章