高端网站建设磐石网络好,网页设计实训报告总结200字,wordpress网站发布时间,扶贫832网络销售平台技术选型 方案∶采取单独制作移动页面方案技术:布局采取rem适配布局( less rem #xff0b;媒体查询)设计图:设计图采用750px设计尺寸
设置视口标签以及引入初始化样式 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalable…
技术选型 方案∶采取单独制作移动页面方案技术:布局采取rem适配布局( less rem 媒体查询)设计图:设计图采用750px设计尺寸
设置视口标签以及引入初始化样式 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno,maximum-scale1.0,minimum-scale1.0title苏宁易购/titlelink relstylesheet href./css/normalize.css
设置公共common.less文件
新建common.less设置好最常见的屏幕尺寸利用媒体查询设置不同的htm字体大小因为除了首页其他页面也需要我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px划分的份数定为15等份因为pc端也可以打开我们苏宁移动端首页我们默认html字体大小为50px注意这句话写到最上面
新建index.less文件
1新建index.less这里面写首页的样式 2将刚才设置好的common.less 引入到index.less里面语法如下:
//在index.less 中导入common.less 文件
import common”
搜索区域
因为是rem布局所以设置宽度高度或者跟数字有关的数据时都要除以html的文字大小
构造就是使用flex布局左右定宽中间flex为1. !-- 顶部搜索框 --div classsearch-contenta href classclassify/adiv classsearchform actioninput typesearch value厨卫保暖器/form/diva href classlogin登录/a/div
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;background: #f2f2f2;
}
basefont:50;
.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 15rem;height: (88rem / basefont);background-color: #ffc001;.classify {width: (44rem / basefont);height: (70rem / basefont);margin: (11rem / basefont) (25rem / basefont) (7rem / basefont) (24rem / basefont) ;background: url(../images/classify.png) no-repeat;background-size: (44rem / basefont) (70rem / basefont);}.search {flex: 1;line-height: (75rem / basefont);input {outline: none;border: 0;width: 100%;height: (66rem / basefont);border-radius: (33rem / basefont);background-color: #fff2cc;font-size: (25rem / basefont);padding-left: (55rem / basefont);color: #757575;}}.login {width: (75rem / basefont);height: (70rem / basefont);margin: (10rem / basefont);text-align: center;line-height: (70rem / basefont);font-size: (25rem /basefont);color: #fff;}
}
banner区域
banner区域放置一张图片为了使图片也能自适应应该设定banner的宽度和高度图片在里面百分百就可以 div classbannerimg src./upload/banner.gif alt/div
// banner
.banner {width: (750rem / basefont);height: (368rem / basefont);img {width: 100%;height: 100%;}
}
广告区域
该区域分为三个部分可使用flex布局使三张链接图片平分为三部分让a里面的图片宽度百分百即可 div classada hrefimg src./upload/ad1.gif alt/aa hrefimg src./upload/ad2.gif alt/aa hrefimg src./upload/ad3.gif alt/a/div
// ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}
nav
这次的nav先不用flex布局用rem布局每个a元素的宽高固定再对a元素进行浮动即可 div classnava hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/aa hrefimg src./upload/nav1.png altspan爆款手机/span/a/div
.nav {width: (750rem / basefont);a {margin-top: (10rem / basefont);float: left;width: (150rem / basefont);height: (140rem / basefont);text-align: center;img {display: block;width: (82rem / basefont);height: (82rem / basefont);margin: (10rem / basefont) auto 0;}span {font-size: (25rem / basefont);color: #333;}}
}
剩下的样式都是常规操作我就不详细说了以上代码主要是熟悉rem布局的做法。
