文章目录

效果图:

0. 下载链接

1. 视口标签

2. 搜索模块

3. banner模块

4. 广告模块

5.导航栏模块

效果图:

采用rem+media布局,页面大小会随浏览器窗口大小发生变化

0. 下载链接

链接：https://pan.baidu.com/s/1K51YENrKnnluvjg5WwIgcw
提取码：9999

1. 视口标签

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=1.0"/>

2. 搜索模块

html代码

         <div class="search-content"><a href="" class="classify"></a><div class="search"><form action=""><input type="search" value="请输入"></form></div><a href="" class="login">登陆</a></div>

css代码

/*计算公式: 页面元素750像素下px值除以750像素下html字体大小(50)*/
.search-content {border: 0;display: flex;position: fixed;top: 0;left: 50%;transform: translatex(-50%);width: 15rem;height: 1.76rem;background-color: transparent;
}
.search-content .classify {width: 0.88rem;height: 1.4rem;background: url("../images/icon1.png") no-repeat 0 -0.1rem;background-size: 0.88rem, auto;margin: 0.22rem 0.5rem 0.14rem 0.48rem;
}
.search-content .search {flex: 1;
}
.search-content .search input {outline: none;/*去除书写时边框*/width: 100%;border: 0;color: #e4e4e4;font-size: 0.5rem;padding: 0 0.1rem 0 0.1rem;margin-top: 0.24rem;height: 1.32rem;background-color: #ffffff;border-radius: 0.66rem;
}
.search-content .login {width: 1.5rem;height: 1.4rem;font-size: 0.5rem;text-align: center;color: #ffffff;line-height: 1.4rem;margin: 0.2rem;
}

less代码:(编译后会生成上面的css代码)

@baseFont: 50;
/*计算公式: 页面元素750像素下px值除以750像素下html字体大小(50)*/
.search-content {border: 0;display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 15rem;height: 88rem / @baseFont;background-color: transparent;.classify {width: 44rem / @baseFont;height: 70rem / @baseFont;background: url("../images/icon1.png") no-repeat 0 -5rem / @baseFont;background-size: 44rem / @baseFont, auto;margin: 11rem/@baseFont 25rem/@baseFont 7rem/@baseFont 24rem/@baseFont;}.search {flex: 1;input {outline: none; /*去除书写时边框*/width: 100%;border: 0;color: #e4e4e4;font-size: 25rem / @baseFont;padding: 0 5rem / @baseFont 0 5rem / @baseFont;margin-top: 12rem / @baseFont;height: 66rem / @baseFont;background-color: rgb(255, 255, 255);border-radius: 33rem / @baseFont;}}.login {width: 75rem / @baseFont;height: 70rem / @baseFont;font-size: 25rem / @baseFont;text-align: center;color: #ffffff;line-height: 70rem / @baseFont;margin: 10rem / @baseFont;}
}

3. banner模块

html代码

     <div class="banner"><img src="../../pictures/2015.01.03-100.jpeg" alt=""></div>

css代码

/*.banner*/
.banner {width: 15rem;height: 10.36rem;
}
.banner img {width: 100%;height: 100%;
}

less代码

/*.banner*/
.banner {width: 750rem / @baseFont;height: 518rem / @baseFont;img {width: 100%;height: 100%;}
}

4. 广告模块

html代码

     <div class="ad"><a href="#"><img src="upload/1.gif" alt="1"></a><a href=""><img src="./upload/2.gif" alt=""></a><a href=""><img src="upload/3.gif" alt=""></a></div>

css代码

.ad {display: flex;a {flex: 1;img {width: 100%;}}
}

.ad {display: flex;
}
.ad a {flex: 1;
}
.ad a img {width: 100%;
}

5.导航栏模块

html代码

     <div class="nav"><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a><a href=""><img src="data:images/bg1.png" alt=""><span>爆款手机</span></a></div>

.nav {display: flex;flex-wrap: wrap;width: 750rem / @baseFont;a {flex: 20%;display: flex;flex-direction: column;align-items: center;text-align: center;text-decoration: transparent;width: 150rem / @baseFont;height: 140rem / @baseFont;img {width: 82rem / @baseFont;margin: 10rem / @baseFont auto 0;}span {margin-top: -3rem / @baseFont;color: #333333;font-size: 25rem / @baseFont;}}
}

css代码

.nav {display: flex;flex-wrap: wrap;width: 15rem;
}
.nav a {flex: 20%;display: flex;flex-direction: column;align-items: center;text-align: center;text-decoration: transparent;width: 3rem;height: 2.8rem;
}
.nav a img {width: 1.64rem;margin: 0.2rem auto 0;
}
.nav a span {margin-top: -0.06rem;color: #333333;font-size: 0.5rem;
}

html 苏宁首页,简单实现相关推荐

移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件
rem基础文字大小随着页面自适应页面元素宽高等比例随着页面自适应 rem单位 rem(root em )是一个相对单位,rem的基准是html元素的字体大小. em是父元素字体大小. rem的优点 ...
苏宁首页案例-移动端
效果图 HTML <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页
1. 创建目录结构目录结构 2. 引入 normalize.css 初始化样式. 3. 编写公共的 common.less 文件 . 编写common.less 设置常见的屏幕尺寸: /* 1. 设 ...
移动端苏宁首页制作和rem
文章目录前言一.技术方案1(less + rem + 媒体查询) 二.搭建相关文件夹结构三.设置视口标签以及引入初始化样式四.设置公共common.less 五.新建index.less文件 ...
仿移动端苏宁(rem布局)、携程(flex布局)首页静态页面，源码可下载
移动端苏宁首页(rem布局) 前几个月时跟着黑马pink老师的视频使用rem布局制作了移动端苏宁首页以及移动端携程首页,视频里只完成了一部分页面,于是自己则把剩下未完成的部分敲完并通过码云部署发布静态 ...
vue配置文件读取_Vue+Spring Boot简单用户登录Demo实现
❝ 「如果觉得文章好看,欢迎点赞.」「同时欢迎关注微信公众号:氷泠之路.」 ❞ 这是一个前后端分离的简单用户登录Demo. 技术栈 Vue BootstrapVue Kotlin Spring Boo ...
京东与苏宁之争，用户体验的博弈
无论是直白的"约价",还是语不惊人死不休的豪言,这一次京东是卯足了劲要和苏宁死磕到底.尽管这场号称"史上最惨烈的价格战"还不能说分出了高下,但faceui作为用 ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制
文章目录 JavaScript基础第01天 1 - 编程语言 1.1 编程 1.2 计算机语言 1.3 编程语言 1.4 翻译器 1.5 编程语言和标记语言区别总结 2 - 计算机基础 2.1 计算 ...

html 苏宁首页,简单实现

文章目录

效果图:

0. 下载链接

1. 视口标签

2. 搜索模块

3. banner模块

4. 广告模块

5.导航栏模块

html 苏宁首页,简单实现相关推荐

最新文章

热门文章