web前端品优购首页+源代码(2)

main 模块

不再时公共模块,新建一个index.css文件
在该文件中编写css代码

分类部分在nav 导航模块已完成

<!-- main 首页主题模块 --><div class="w"><div class="main"><div class="focus"><img src="upload/main.png" alt=""></div><div class="newflash"><div class="news"><div class="news-hd"><h5>品优购快报</h5><div class="more">更多</div></div><div class="news-bd"><ul><li><a href="#"><strong>[特惠]</strong>备战开学季 全民半价购数码全民半价购数码</a></li><li><a href="#"><strong>[公告]</strong>备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[特惠]</strong>备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[公告]</strong>备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[特惠]</strong>备战开学季 全民半价购数码</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="margine"><img src="upload/main1.png" alt=""></div></div></div></div>

css部分

.main{margin-left: 220px;margin-top: 10px;width: 980px;height: 455px;
}
.main .focus{float: left;width: 721px;
}
.main .newflash{float: right;width: 250px;height: 455px;
}
.news{width: 250px;height: 165px;border: 1px solid #e4e4e4;
}
.news-hd{height: 33px;border-bottom: 1px dotted #e8e8e7;padding: 0 15px;line-height: 33px;}
.news-hd h5{float: left;font-size: 14px;color: #333333;font-weight: 400;
}
.news-hd .more{float: right;font-size: 14px;
}
.news-hd .more::after{font-family: 'icomoon';content: '\e904';
}
.news-bd{margin-left: 15px;margin-top: 5px;
}
.news-bd ul li{height: 24px;line-height: 24px;font-size: 12px;overflow:hidden;  /* 超出部分隐藏 */white-space: nowrap;   /* 不允许换行 */text-overflow: ellipsis;  /* 超出部分用省略号表示 */
}
.lifeservice{overflow: hidden; /* 超出部分隐藏 */width: 250px;height: 208px;border: 1px solid #e4e4e4;border-top: 0;
}
.lifeservice ul{width: 252px; /* 父元素装不下li,增加父元素宽度,超出部分隐藏 */
}
.lifeservice ul li{float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;}
.lifeservice ul li i{display: inline-block;width: 30px;height: 30px;background: url(../images/jingling.png) -16px -8px;margin-top: 12px;
}
.lifeservice ul li p{font-size: 12px;font-weight: 400;
}
.margine{margin-top: 5px;height: 74px;width: 250px;
}
.margine img{width: 100%;height: 100%;
}

recom今日推荐模块

     <div class="w recom"><div class="recom_hb"><p>今日推荐</p></div><div class="recom_bb"><ul><li><img src="upload/recom01_03.jpg" alt=""></li><li><img src="upload/recom02_03.jpg" alt=""></li><li><img src="upload/recom03_03.jpg" alt=""></li><li><img src="upload/recom04_03.jpg" alt=""></li></ul></div></div>

css样式`

/* recom推荐模块 */
.recom{height: 163px;margin-top: 10px;}
.recom .recom_hb{float: left;position: relative;width: 206px;height: 163px;background: #5c5251 url(../images/recom.png) no-repeat 68px 31px;}
.recom .recom_hb p{position: absolute;bottom: 44px;left: 62px;font-size: 18px;color: #fff;
}
.recom .recom_bb{float: left;width: 993px;height: 163px;background-color: #ebebeb;
}
.recom .recom_bb ul li{float: left;position: relative;
}
.recom .recom_bb ul li img{/* 强制图片大小,后期上传图片不用担心大小 */height: 163px;width: 248px;
}
.recom .recom_bb ul li:nth-child(-n+3)::after{/* 竖线用伪元素做 */content: '';position: absolute;right: 0;top: 10px;height: 143px;width: 1px;background-color: #dddddd;
}

ulike 猜你喜欢模块

<div class="w ulike"><div class="ulike_hb"><h5>猜你喜欢</h5><a href="#">换一批</a></div><div class="ulike_bb"><ul><li><div class="pic"><img src="upload/ulike01.png" alt=""></div><p>阳光美包新款单肩包女<br>包时尚子母包四件套女</p><div class="price">¥116.00</div></li><li><div class="pic"><img src="upload/ulike02.png" alt=""></div><p>爱仕达 30CM炒锅不粘<br>锅NWG8330E电磁炉炒</p><div class="price">¥99.00</div></li><li><div class="pic"><img src="upload/ulike03.png" alt=""></div><p>捷波朗 <br>jabra）BOOSI劲步</p><div class="price">¥99.00</div><li><div class="pic"><img src="upload/ulike04.png" alt=""></div><p>欧普 <br>JYLZ08面板灯平板灯铝</p><div class="price">¥99.00</div></li><li><div class="pic"><img src="upload/ulike05.png" alt=""></div><p>三星<br>（G5500）移动联</p><div class="price">¥99.00</div></li><li><div class="pic"><img src="upload/ulike06.png" alt=""></div><p>韩国所望<br>紧致湿润精华露400ml</p><div class="price">¥649.00</div></li></li></ul></div></div>

css样式

.ulike{height: 260px;margin-top: 30px;
}
.ulike_hb{height: 30px;
}
.ulike_hb h5{float: left;font-size: 18px;font-weight: 400;color: #333333;
}
.ulike_hb a{font-size: 12px;color: #666666;float: right;margin-right: 44px;line-height: 30px;
}
.ulike_bb{border: 1px solid #ededed;height: 230px;
}
.ulike_bb ul li{position: relative;text-align: center;float: left;width: 199px;height: 230px;}
.ulike_bb ul li .pic{height: 150px;width: 199px;line-height: 200px;text-align: center;padding: 20px;
}
.ulike_bb ul li p{font-size: 12px;color: #666666;text-align: left;margin-left: 40px;margin-top: 10px;
}
.ulike_bb ul li .price{font-size: 18px;color: #df3033;margin-left: 40px;text-align: left;
}
.ulike_bb ul li:nth-child(-n+5)::after{content: '';position: absolute;right: 0;bottom: 9px;height: 62px;width: 1px;background-color: #dddddd;
}

web前端品优购首页+源代码(2)相关推荐

web前端品优购首页+源代码(1)
首页构成 shortcut 快捷导航模块 header 头部模块 nav 导航模块 footer 底部模块(优先做页面公共模块) 快捷导航模块 <sec ...
web前端|品优购|html+css|代码
项目名称:品优购电商网页制作前端小白的熬夜+入门边缘试探+颓废中热情之作,欢迎各位小可爱交流~ 参考教程:(戳一下)b站黑马教程链接https://www.bilibili.com/video/B ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
前端初尝试---品优购首页（只用HTML和CSS）
品优购首页(只用HTML和CSS) 预览主页HTML码 base.css common.css index.css 预览主页HTML码 <!DOCTYPE html> <html ...
HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
前端——品优购项目（html+css）
前端--品优购项目文章目录前端--品优购项目一.品优购项目规划二.首页公共部分(common.css) 快捷导航模块 header模块 nav导航部分底部模块首页专有部分(index.c ...
品优购首页——网页轮播图
效果图首页文件 index.html <!DOCTYPE html> <html lang="en"> <head><meta char ...
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
八、品优购首页制作_主体区域（下）
一.楼层区floor制作注意这个floor,不要给高度,内容有多少,算多少. 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子. 2号盒子b ...

web前端品优购首页+源代码(2)

目录

main 模块

recom今日推荐模块

ulike 猜你喜欢模块

web前端品优购首页+源代码(2)相关推荐

最新文章

热门文章

web前端 品优购首页+源代码(2)

目录

main 模块

recom今日推荐模块

ulike 猜你喜欢模块

web前端 品优购首页+源代码(2)相关推荐

最新文章

热门文章

web前端品优购首页+源代码(2)

web前端品优购首页+源代码(2)相关推荐