小米商城静态页面制做
2024-06-09 07:20:52
dd效果图如下
huml 源码
<!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"><title>小米商城</title><link rel="shortcut icon" href=" favicon.ico" />
</head><body><link rel="stylesheet" href="css文件/base.css"><link rel="stylesheet" href="css文件/common.css"><link rel="stylesheet" href="css文件/index.css"><!-- 快捷导航模块开始 --><section class="shortcut"><div class="w"><div class="fl"><ul><li><a href="#">小米商城</a> </li><li><a href="#">MlUl</a> </li><li><a href="#">loT</a> </li><li><a href="#">云服务</a> </li><li><a href="#">天星数科</a> </li><li><a href="#">有品</a> </li><li><a href="#">小爱开放平台</a> </li><li><a href="#">企业团购</a> </li><li><a href="#">资质证照</a> </li><li><a href="#">协议规则</a> </li><li><a href="#">下载app</a> </li><li><a href="#">Select location</a> </li></ul></div><div class="fr"><ul><li><a href="#">登录</a> </li><li><a href="#">注册</a> </li><li><a href="#">消息通知</a> </li><!-- <li><a href="#" class="shopping">购物车</a></li> --><div class="shopcar">购物车（0）</div></ul></div></div></section><!-- 快捷导航模块结束 --><!-- 头部模块开始 --><header class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html">小米商城</a></h1></div><!-- 热词导航模块 --><div class="headercut"><a href="#">Xiaomi手机</a><a href="#">Redmi手机</a><a href="#">电视</a><a href="#">笔记本</a><a href="#">平板</a><a href="#">家电</a><a href="#">路由器</a><a href="#">服务中心</a><a href="#">社区</a></div><!-- 搜索模块 --><div class="search"><input type="search" name="" id="" placeholder="红米"><button><img src="search5.png" alt=""></button></div></header><!-- 头部模块结束 --><!-- 首页main模块开始 --><div class="w"><div class="main"><div class="focus"><ul><li><a href="#"><img src="upload产品图片/产品图片1.png" alt=""></a></li></ul><a href="#" class="prev"><</a><a href="#" class="next">></a><ul class="dot"><li></li><li></li><li></li></ul></div></div></div><!-- <div class="row1 w"></div> --><!-- 首页main模块结束 --><!-- 商品模块开始 --><div class="middle w"><div class="fenlei"><ul><li class="first"><a href="#">手机</a></li><li><a href="#">电视</a></li><li><a href="#">笔记本 平板</a></li><li><a href="#">出行 穿戴</a></li><li><a href="#">耳机 音箱</a></li><li><a href="#">家电</a></li><li><a href="#">智能 路由器</a></li><li><a href="#">电源 配件</a></li><li><a href="#">健康 儿童</a></li><li><a href="#">生活 箱包</a></li></ul></div></div><!-- 商品模块结束 --><!-- 楼层区开始 --><div class="floor"><!-- 一楼四个盒子楼 --><div class="row1 w"><div class="jieshao"><a href="#"><img src="row1.png" alt=""></a></div><div class="two"><a href="#"><img src="row2.png" alt=""></a></div><div class="three"><a href="#"><img src="row3.png" alt=""></a></div><div class="forth"><a href="#"><img src="row4.png" alt=""></a></div></div><div class="row2 w"><a href="#"><img src="row22.png" alt=""></a></div><div class="row3 w"><div class="shouji"><div class="left">手机</div><div class="right"> <a href="#">查看更多</a> </div></div><div class="shouji_photo"></div></div><div class="row4 w"><div class="left"><a href="#"><img src="upload产品图片/手机1.png" alt=""></a></div><div class="right"><ul><li><a href="#" class="a"><img src="upload产品图片/手机右11.png" alt=""></a></li><li><a href="#" class="b"><img src="upload产品图片/手机右2.png" alt=""></a></li><li><a href="#" class="c"><img src="upload产品图片/手机右3.png" alt=""></a></li><li><a href="#" class="d"><img src="upload产品图片/手机右4.png" alt=""></a></li></ul><ul><li><a href="#" class="e"><img src="upload产品图片/小米右5.png" alt=""></a></li><li><a href="#" class="f"><img src="upload产品图片/手机右6.png" alt=""></a></li><li><a href="#" class="g"><img src="upload产品图片/手机右7.png" alt=""></a></li><li><a href="#" class="h"><img src="upload产品图片/手机右888.png" alt=""></a></li></ul></div></div><div class="row5 w"><div class="zhineng">智能穿戴</div><div class="chuandai"> <a href="#">热门</a> <a href="#">穿戴</a></div></div><div class="row6 w"><div class="left6"><a href="#"><img src="upload产品图片/穿戴左.png" alt=""></a><a href="#" class="c1"><img src="upload产品图片/穿戴2.png" alt=""></a><a href="#" class="c2"><img src="upload产品图片/穿戴3.png" alt=""></a><a href="#" class="c3"><img src="upload产品图片/穿戴4.png" alt=""></a></div></div><div class="row7 w"><div class="bijiben">笔记本 | 平板</div><div class="remen "><a href="#">热门</a></div></div><div class="row8 w"><div class="left8"><a href="#"><img src="upload产品图片/笔记本1.png" alt=""></a></div><div class="right8"><ul><li><a href="#"><img src="upload产品图片/笔记本2.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/笔记本3.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/笔记本4.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/笔记本5.png" alt=""></a></li></ul><ul><li><a href="#"><img src="upload产品图片/笔记本6.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/笔记本7.png" alt=""></a></li><li><a href="#" class="bi8"><img src="upload产品图片/笔记本8.png" alt=""></a></li><li><a href="#" class="bi9"><img src="upload产品图片/笔记本9.png" alt=""></a></li></ul></div></div><div class="row9 w"><div class="jiadian">家电</div><div class="yingyin"><a href="#">热门</a> <a href="#">电视影音</a></div></div><div class="row10 w"><ul><li><a href="#"><img src="upload产品图片/家电1.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电2.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电3.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电4.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电5.png" alt=""></a></li></ul><ul><li><a href="#" class="xiyiji"><img src="upload产品图片/家电6png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电7.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电8.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电9.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/家电10.png" alt=""></a></li></ul></div><div class="row11 w"><div class="dianqi">生活电器</div><div class="saodiji"><a href="#">扫地机</a> <a href="#">空净</a> <a href="#">清洁</a> <a href="#">风扇</a></div></div><div class="row12 w"><ul><li><a href="#"><img src="upload产品图片/电器1.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器2.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器3.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器4.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器5.png" alt=""></a></li></ul></div><div class="row13 w"><li><a href="#"><img src="upload产品图片/电器6.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器7.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器8.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器9.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/电器10.png" alt=""></a></li></div><div class="row14 w"><a href="#"><img src="upload产品图片/14.png" alt=""></a></div><div class="row15 w"><div class="baihuo">日用百货</div><div class="jiankang"><a href="#">个护健康</a> <a href="#">电源/线材</a> <a href="#">儿童用品</a> <a href="#">居家床品</a> </div></div><div class="row16 w"><ul><li><a href="#"><img src="upload产品图片/百货1.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货2.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货3.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货4.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货5.png" alt=""></a></li></ul></div><div class="row17 w"><ul><li><a href="#"><img src="upload产品图片/百货6.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货7.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货8.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货9.png" alt=""></a></li><li><a href="#"><img src="upload产品图片/百货10.png" alt=""></a></li></ul></div><div class="row18 w"><div class="shipin">视频</div><div class="all"><a href="#">查看全部</a></div></div><div class="row19 w"><ul><li><a href="#"><img src="upload产品图片/视频1.png" alt=""></a></li><li><a href="#" class="bb"><img src="upload产品图片/视频2.png" alt=""></a></li><li><a href="#" class="cc"><img src="upload产品图片/视频3.png" alt=""></a></li><li><a href="#" class="dd"><img src="upload产品图片/视频4.png" alt=""></a></li></ul></div></div><!-- 楼层区结束 --><!-- 底部模块的制作start --><footer class="footer w"><div class="mod_serice"><ul><li class="a"><a href="#">预约维修服务</a></li><li class="b"><a href="#">七天无理由退货</a></li><li class="c"><a href="#">15天免费换货</a></li><li class="d"><a href="#">满69元包邮</a></li><li class="e"><a href="#">1100余家售后网点</a></li></ul></div><div class="mod_help"><dl><dt>购物指南</dt><dd><a href="#">手机</a></dd><dd><a href="#">电视</a></dd><dd><a href="#">笔记本</a></dd><dd><a href="#">平板</a></dd><dd><a href="#">穿戴</a></dd><dd><a href="#">耳机</a></dd><dd><a href="#">家电</a></dd><dd><a href="#">路由器</a></dd><dd><a href="#">音箱</a></dd><dd><a href="#">配件</a></dd></dl><dl><dt>服务中心</dt><dd><a href="#">申请售后</a></dd><dd><a href="#">售后政策</a></dd><dd><a href="#">维修服务价格</a></dd><dd><a href="#">订单查询</a></dd><dd><a href="#">以旧换新</a></dd><dd><a href="#">保障服务</a></dd><dd><a href="#">防伪查询</a></dd><dd><a href="#">F码通道</a></dd></dl><dl><dt>线下门店</dt><dd><a href="#">小米之家</a></dd><dd><a href="#">服务网点</a></dd><dd><a href="#">授权体验店/专区</a></dd></dl><dl><dt>关于小米</dt><dd><a href="#">了解小米</a></dd><dd><a href="#">加入小米</a></dd><dd><a href="#">投资者关系</a></dd><dd><a href="#">企业社会责任</a></dd><dd><a href="#">廉洁举报</a></dd></dl><dl><dt>关注我们</dt><dd><a href="#">新浪微博</a></dd><dd><a href="#">官方微信</a></dd><dd><a href="#">联系我们</a></dd><dd><a href="#">公益基金会</a></dd></dl><div class="mod_tell"><h5>400-100-5678</h5><p>8:00-18:00（仅收市话费）</p><h6>人工客服</h6></div></div><br><div class="mod_copyright"><!-- <div class="logo_1"></div> --><div class="links"><a href="#">小米商城</a>|<a href="#">MIUI</a>|<a href="#">米家</a>|<a href="#">米聊</a>|<a href="#">多看</a>|<a href="#">游戏</a>|<a href="#">政企服务</a>|<a href="#">小米天猫店</a>|<a href="#">小米集团隐私政策</a>|<a href="#">小米公司儿童信息保护规则</a>|<a href="#"> 小米商城隐私政策 </a>|<a href="#"> 小米商城用户协议 </a>|<a href="#"> 问题反馈 </a>|<a href="#"> Select Location 北京互联网法院法律服务工作站 </a>|<a href="#"> 中国消费者协会 </a>|<a href="#"> 北京市消费者协会</a></div><div class="copyright">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 <br> （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 <br> 增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证 <br> 违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div><div class="logo1"><a href="#"></a></div></div></footer><!-- 底部模块的制作结束 -->
</body></html>主页模块源码
.main {float: left;width: 990px;height: 460px;background-color: pink;margin-left: 210px;
}.focus ul li img {width: 992px;height: 461px;
}.focus {position: relative;
}.prev,
.next {/* 加了绝对定位的盒子可以直接设置宽度和高度 */position: absolute;top: 0;/* 盒子垂直居中的算法 */top: 50%;margin-top: -34px;width: 40px;height: 68px;background: rgba(255, 250, 250, 0.4);text-align: center;line-height: 68px;font-size: 40px;color: #BEBEBE;
}.prev {left: 0;
}.next {right: 0;
}.prev:hover {background: rgba(0, 0, 0, .5);color: #fff;
}.next:hover {background: rgba(0, 0, 0, .5);color: #fff;
}.dot {position: absolute;bottom: 6px;right: 22px;background-color: rgba(0, 0, 0, 0.0);width: 60px;height: 30px;
}.dot li {width: 10px;height: 10px;background-color: #4c5a56;float: left;border-radius: 50%;margin: 2px 4px;
}.dot li:hover {background-color: #fff;
}.row1 {/* float: right; */margin-top: 13px;height: 172px;background-color: #fff;
}.row1 div {float: left;
}.two {margin-left: 10px;
}.three {margin-left: 10px;
}.forth {margin-left: 10px;
}.row2 {margin-top: 50px;
}.row3 {height: 35px;margin-top: 35px;margin-bottom: 16px;
}.shouji .left {line-height: 35px;float: left;font-size: 22px;font-weight: 100px;
}.shouji .right {line-height: 35px;float: right;
}/* .row2,
.row3,
.row4 {background-color: #f5f5f5;
} */.row4 .left {float: left;
}/* .row::after {content: "";display: block; *//* height: 0; *//* clear: both;visibility: hidden;
} */.right::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.left::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.right ul li {float: right;
}.right .h {position: absolute;top: 300px;left: 965px;
}.right {position: relative;
}.row5 .zhineng {height: 25px;float: left;font-size: 25px;font-weight: 100px;
}.row5 .chuandai {float: right;margin-top: 5px;
}.row5::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row5 {margin-top: 35px;margin-bottom: 20px;
}.row5 .chuandai:hover {height: 38px;height: 25px;display: block;text-decoration: solid;
}.bijiben {float: left;font-size: 25px;
}.remen {float: right;
}.row7 {margin-top: 15px;margin-bottom: 15px;
}.row7::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row8 .left8 {float: left;
}.row8 .right8 ul li {float: right;margin-left: 3px;
}.right8::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.left8::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.bi9 {position: absolute;left: 965px;top: 300px;
}.bi8 {position: absolute;left: 730px;top: 300px;
}.right8 ul {position: relative;
}.row9 {margin-top: 10px;margin-bottom: 15px;
}.row9 .jiadian {float: left;font-size: 25px;
}.row9 .yingyin {float: right;margin-top: 7px;
}.row9::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row10 li {float: left;
}.row10::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row10 .xiyiji {position: absolute;top: 300px;left: 0;
}.row10 {position: relative;
}.row11 {margin-top: 15px;margin-bottom: 15px;
}.row11 .dianqi {float: left;font-size: 25px;
}.row11 .saodiji {float: right;margin-top: 7px;
}.row11::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row12 {margin-bottom: 10px;
}.row12 li {float: left;
}.row12::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row13 li {float: left;
}.row13::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row13 {margin-bottom: 20px;
}.row14 {margin-bottom: 20px;
}.row15 .baihuo {float: left;font-size: 25px;
}.row15 .jiankang {margin-top: 10px;float: right;
}.row15::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row15 {margin-bottom: 15px;
}.row16 li {float: left;
}.row17 li {float: left;
}.row16::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row17::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.shipin {float: left;font-size: 25px;
}.all {margin-top: 10px;float: right;
}.row18 {margin-top: 15px;margin-bottom: 15px;
}.row18::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}.row19 li {float: left;
}.bb,
.cc,
.dd {margin-left: 5px;
}.row19::after {content: "";display: block;/* height: 0; */clear: both;visibility: hidden;
}初始样式代码
* {margin: 0;padding: 0;box-sizing: border-box;
}em,
i {font-style: normal;
}li {list-style: none;
}img {border: 0;vertical-align: middle;
}button {cursor: pointer;
}a {color: #666;text-decoration: none;
}a:hover {color: #ff6700;
}button,
input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53";border: 0;outline: none;
}boody {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53";background-color: skyblue;color: #666;
}.head,
.none {display: none;
}.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;
}.clearfix {*zoom: 1;
}顶端和底部代码
@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?yqmruw');src: url('fonts/icomoon.eot?yqmruw#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?yqmruw') format('truetype'), url('fonts/icomoon.woff?yqmruw') format('woff'), url('fonts/icomoon.svg?yqmruw#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版心宽度 */.w {/* 1540px */width: 1200px;margin: 0 auto;
}/* 导航模块 */.shortcut {height: 40px;line-height: 40px;background-color: #333333;
}.fl {float: left;
}.fr {float: right;position: relative;
}.shortcut ul li {float: left;
}.shortcut ul li a {color: #c3c3c3;font-size: 12px;
}.shortcut ul li a:hover {color: #ffffff;
}.shopping {display: block;height: 40px;width: 100px;background-color: #424242;text-align: center;
}.shopping:hover {background-color: #ffffff;/* 这个字体颜色为什么不能改变 */color: #ff6700;
}.shopcar {width: 100px;height: 48px;background-color: #585050;/* position: absolute;right: 0; */float: right;line-height: 44px;text-align: center;color: #fff;font-size: 12px;
}.fr ul .shopcar：hover {background-color: #fff;color: #ff6700;
}.shopcar::before {content: '\e93a';font-family: 'icomoon';
}/* .shopcar::after {content: '2';
} *//* 导航模块结束 *//* 头部模块开始 */.header {position: relative;height: 125px;background-color: #fff;
}.logo {position: absolute;top: 25px;height: 87px;width: 73px;background-color: #ffffff;
}.logo a {display: block;height: 87px;width: 73px;background: url(../logo2.png) no-repeat;font-size: 0;
}/* 热词导航模块 */.headercut {position: absolute;top: 43px;left: 200px;
}.headercut a {margin: 0 5px;
}.search {position: absolute;left: 830px;top: 30px;width: 340px;height: 53px;border: 2px solid #e0e0e0
}.search input {float: left;width: 300px;height: 50px;padding-left: 10px;border-right: 1px solid #e0e0e0
}/*
inout和button都属于行内块元素，中间默认会有缝隙，消除缝隙需要给他们加浮动 */.search button {float: left;width: 36px;height: 50px;
}.search button img {width: 100%;height: 100%;
}.search :hover {border: 1px solid #ff6700;
}/* 商品分类模块 */.fenlei {/* display: none; */float: left;width: 210px;height: 460px;background-color: #9e9696;position: absolute;top: 0;left: 0;
}.fenlei :after {content: ".";clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;
}.middle {height: 460px;/* display: inline-block; */position: relative;
}.fenlei li {position: relative;height: 40px;line-height: 40px;padding-left: 30px;/* margin-top: 20px; */
}.fenlei .first {margin-top: 25px;
}.fenlei ul li a {font-size: 14px;color: #fff;
}.fenlei li:hover {background-color: #ff6700;
}.fenlei ul li::after {content: '>';position: absolute;top: 1px;right: 20px;font-size: 18px;color: #fff;
}/* 底部模块 */.footer {height: 450px;background-color: #fff;padding-top: 30px;
}.mod_serice {height: 60px;border-bottom: 1px solid #ccc;
}.mod_serice ul li {float: left;width: 240px;height: 30px;background-color: #fff;/* padding-left: 35px; */margin-top: 15x;border-right: 1px solid #ccc;
}/* 清除浮动 */.mod_serice ul li:after {content: ".";clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;
}.mod_serice ul .e {border: 0;
}.mod_serice ul li {line-height: 30px;text-align: center;
}/* 文字图标显示不了 *//* .mod_serice ul .a::before {content: 'e991';font-family: 'icomoon';
}
.mod_serice ul .b::before {content: '';content: 'e984';font-family: 'icomoon';
}
.mod_serice ul .c::before {content: 'e981';font-family: 'icomoon';
}
.mod_serice ul .d::before {content: 'e99f';font-family: 'icomoon';
}
.mod_serice ul .a::before {content: 'e948';font-family: 'icomoon';
} *//* 底部帮助模块 */.mod_help {height: 350px;background-color: #fff;padding-top: 30px;padding-left: 130px;/* margin-top: 30px; */
}.mod_help dl dt {font-size: 16px;margin-bottom: 15px;margin-top: 30px;
}.mod_help dl {float: left;width: 166px;
}.mod_help dl dd {font-size: 12px;margin-bottom: 9px;
}.mod_tell {width: 234px;height: 100px;background-color: #fff;float: right;border-left: 1px solid black;margin-top: 30px;
}.mod_tell :after {content: ".";clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;
}.mod_tell {text-align: center;
}.mod_help h5 {font-size: 22px;color: #ff6700;
}.mod_help p {margin-top: 5px;display: inline-block;font-size: 12px;color: #616161;
}.mod_help h6 {display: inline-block;width: 100px;height: 30px;border: 1px solid #ff6700;margin-top: 8px;line-height: 30px;color: #ff6700;font-size: 13px;
}.links a {font-size: 13px;margin: 0 3px;
}.links {font-size: 12px;margin-bottom: 15px;
}.copyright {line-height: 20px;font-size: 12px;color: #b0b0b0;
}/* .logo_1 {position: absolute;top: 30px;left: 10px;height: 87px;width: 73px;background: url(../logo2.png) no-repeat;
} */.mod_copyright {margin-top: 40px;/* width: 1920px; */text-align: center;float: left;/* width: 1800px; *//* margin: 0 auto; */height: 240px;/* background-color: #fafafa; *//* text-align: center; *//* padding-top: 20px;position: relative; */
}.logo1 {float: left;/* position: absolute; */margin-top: 20px;margin-left: 340px;top: 150px;left: 500px;height: 35px;width: 550px;background: url(../logo_bottom.png) no-repeat;
}小米商城静态页面制做相关推荐
- 小米商城静态页面导航图
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 仿小米商城和登录的静态页面
仿小米商城和登录的静态页面 以下仅为参考,下载学习请前往本人gitee仓库 主页(index).html index.css search.js login.html login.css login. ...
- 实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距 图片原 ...
- HTML与CSS之小米商城静态界面（未用JS版本）
这是小米商城的无JS版本(纯静态页面)--如下: <!DOCTYP1E html> <html lang="en"> <head><met ...
- html静态页面如何复用,HTML 代码复用
前言 一般咱们所作的一些页面,咱们能够从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.若是是制做静态页面的同窗,对于这些重复的部分只可以经过复制粘贴到新的页面来,若是页面的数量上去了 ...
- 使用Varnish+ESI实现静态页面的局部缓存
页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含(例如所有的静态页面包含页头.页脚)以及静态页面中的局部信息的 ...
- 一些零碎知识（域名、DNS、浏览器、动态静态页面、web应用系统工作原理）
域名: http://localhost:8080/practice(胡写的,用于说明问题) http:表明当前请求是http协议,所有的Java Web应用程序都是基于HTTP协议,HTTP全称Hy ...
- github创建静态页面_如何在10分钟内使用GitHub Pages创建免费的静态站点
github创建静态页面 Static sites have become all the rage, and with good reason – they are blazingly fast a ...
- 静态页面和动态页面的区别
静态页面和动态页面的区别 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Requ ...
- 润乾报表新功能静态页面和report4包分离
需求背景: 客户在使用润乾报表的时候,为了使导出Excel.PDF.导入Excel.上下载文件等对话框和总体风格一致,都修改了report4包中的静态页面.现在每次更换jar包都需要重新拆包,把里面的 ...
最新文章
- python openvc 裁剪、剪切图片 提取图片的行和列
- C# 实现ReadInt()直接输入数字的函数 含有检错功能
- 何为TransmittableThreadLocal
- 微信计步器怎么不计步_难以关闭的微信朋友圈广告
- 认识和选购极致画质的显示器
- oracle test传入参数,oracle存储过程,test(测试)时传自定义类型参数问题
- 算法题003 斐波那契（Fibonacci）数列
- 在NHibernate的单表继承模式下通过父类Repository查询子类
- kmem_cache_alloc核心函数slab_alloc_node的实现详解
- P4556 [Vani有约会]雨天的尾巴 /【模板】线段树合并
- 红蜘蛛10013端口被占用
- input和output实例
- 机器学习03:人工神经网络
- 容器安全技术容器发展历程
- 趣头条的开屏广告有什么优势呢？适合哪些企业投放？
- 用vue自己封装一个分页组件
- Automatic Targetless LiDAR-CameraCalibration: A Survey论文解读
- 微前端子应用nginx跨域配置
- 【VMware】虚拟机不能全屏的解决方法
- ssl证书怎么购买？买多少钱的ssl证书合适？