品优购首页（只用HTML和CSS）

  • 预览
  • 主页HTML码
  • base.css
  • common.css
  • index.css

预览

主页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><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
<!--    引入初始化样式文件--><link rel="stylesheet" href="css/base.css">
<!--    引入公共的样式文件--><link rel="stylesheet" href="css/common.css">
<!--    引入favicon图标--><link rel="shortcut icon" href="favicon.ico">
<!--    引入首页的样式文件--><link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--    快捷导航--><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp</li><li><a href="#">请登录&nbsp</a><a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section>
<!--    快捷导航end-->
<!--    header头部模块--><header class="header w">
<!--    logo 模块--><div class="logo"><h1><a href="index.html" title="品优购">品优购</a></h1></div>
<!--    search搜索框--><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div>
<!--    hotWords模块--><div class="hotWords"><a href="#" class="style_red">搜索优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div>
<!--    shopCar模块--><div class="shopCar">我的购物车&nbsp><i class="count">8</i></div></header>
<!--    header头部模块end-->
<!--    nav导航模块--><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="#">手机</a> 、<a href="#">数码</a> 、<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><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="navitems"><ul><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></nav>
<!--    nav导航模块end-->
<!--首页专有的模块 main--><div class="w"><div class="main"><div class="focus"><ul><li><img src="upload/焦点图1.jpg" alt=""></li></ul></div><div class="newflash"><div class="news"><div class="news-hd"><h5>品优购快报</h5><a href="#">更多&nbsp></a></div><div class="news-bd"><ul><li><a href="#"><strong>【特惠】</strong>爆款耳机5折秒！</a></li><li><a href="#"><strong>【特惠】</strong>母亲节，健康好礼低至5折！</a></li><li><a href="#"><strong>【特惠】</strong>爆款耳机5折秒！</a></li><li><a href="#"><strong>【特惠】</strong>9.9元洗100张照片！</a></li><li><a href="#"><strong>【特惠】</strong>长虹智能空调立省1000</a></li></ul></div></div><div class="lifeservice"><ul>
<!--                        <li><a href="#"><img src="data:images/生活服务小图标.png">充值</a> </li>--><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li><li><a href="#"><i></i><p>话费</p></a></li></ul></div><div class="bargain"><a href="#"><img src="upload/广告图1.jpg"></a> </div></div></div></div>
<!--首页专有的模块 main end-->
<!--推荐模块--><div class="w recom"><div class="recom_hd"><i><img src="images/clock.png"></i><p>今日推荐</p></div><div class="recom_bd"><ul><li><a href="#"><img src="images/今日推荐内容.jpg"></a></li><li></li><li><a href="#"><img src="images/今日推荐内容.jpg"></a></li><li></li><li><a href="#"><img src="images/今日推荐内容.jpg"></a></li><li></li><li><a href="#"><img src="images/今日推荐内容.jpg"></a></li></ul></div>
</div>
<!--推荐模块end-->
<!--楼层区域制作--><div class="floor"><div class="w jiadian"><div class="box-hd"><h3>家用电器</h3><div class="tab_list"><ul><li ><a href="#" class="style_red">热门</a></li><li></li><li><a href="#">大家电</a></li><li></li><li><a href="#">生活电器</a></li><li></li><li><a href="#">厨房电器</a></li><li></li><li><a href="#">个护健康</a></li><li></li><li><a href="#">应季电器</a></li><li></li><li><a href="#">空气/净水</a></li><li></li><li><a href="#">新奇特</a></li><li></li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><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><a href="#"><img src="upload/jiadian1.png"></a></div><div class="col_329"><a href="#"><img src="upload/jiadian2.jpg"></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/jiadian3.png"></a><a href="#"><img src="upload/jiadian4.png"></a></div><div class="col_221"><a href="#"><img src="upload/jiadian5.png"></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/jiadian6.png"></a><a href="#"><img src="upload/jiadian7.png"></a></div></div></div></div></div><div class="w shouji_diannao"><div class="box-hd"><h3>手机/电脑</h3><div class="tab_list"><ul><li ><a href="#" class="style_red">热门</a></li><li></li><li><a href="#">大家电</a></li><li></li><li><a href="#">生活电器</a></li><li></li><li><a href="#">厨房电器</a></li><li></li><li><a href="#">个护健康</a></li><li></li><li><a href="#">应季电器</a></li><li></li><li><a href="#">空气/净水</a></li><li></li><li><a href="#">新奇特</a></li><li></li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><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><a href="#"><img src="upload/jiadian1.png"></a></div><div class="col_329"><a href="#"><img src="upload/jiadian2.jpg"></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/jiadian3.png"></a><a href="#"><img src="upload/jiadian4.png"></a></div><div class="col_221"><a href="#"><img src="upload/jiadian5.png"></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/jiadian6.png"></a><a href="#"><img src="upload/jiadian7.png"></a></div></div></div></div></div></div>
<!--楼层区域制作end-->
<!--底部模块的制作--><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service-txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service-txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service-txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service-txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></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></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></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></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></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></dl><dl><dt>帮助中心</dt><dd><img src="images/brwx.png" alt="">本人微信</dd></dl></div><div class="mod_copyright"><div class="links"><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="#">English Site</a>  |<a href="#"> Contact U</a></div><div class="copyright">地址：使命召唤4 切尔诺贝利-普里皮亚季 邮编：9521 电话：400-618-4000 传真：010-82935100 邮箱: lvyuanlong+itcast.cn<br>男爵领域ICP备00006567号斥候网备2431667899</div></div></div></footer>
<!--底部模块的制作end-->
</body>
</html>

base.css

/*把我们所有的标签的内外边距清零 */
* {margin: 0;padding: 0;/*CSS3盒子模型*/box-sizing: border-box;
}
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */html{ color:#000; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}/* 内外边距通常让各个浏览器样式的表现位置不同 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;}/* 要注意表单元素并不继承父级 font 的问题 */body,button,input,select,textarea{ font:12px/1.5 tahoma,arial,\5b8b\4f53;}input,select,textarea{ font-size:100%;}/* 去掉各Table cell 的边距并让其边重合 */table{ border-collapse:collapse;border-spacing:0;}/* IE bug fixed: th 不继承 text-align*/th{ text-align:inherit;}/* 对齐是排版最重要的因素, 别让什么都居中 */caption,th { text-align:left; }/* 去除默认边框 */fieldset,img{ border:0;}/* ie6 7 8(q) bug 显示为行内表现 */iframe{ display:block;}/* 去掉列表前的标识, li 会继承 */ol,ul,li{ list-style:none;}/* 一致的 del 样式 */del{ text-decoration:line-through; }/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500;}q:before,q:after {content:'';}/* 统一上标和下标 */sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}/* 默认不显示下划线，保持页面简洁 */ins,a{ text-decoration:none;}/* 清理浮动 */.clearFloat:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}.clearFloat{ zoom:1; /* for IE6 IE7 */}/* 设置内联, 减少浮动带来的bug */.floatLeft, .floatRight{ display:inline;}.floatLeft{ float:left;}.floatRight{ float:right;}/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}/* HTML5 媒体文件跟 img 保持一致 */audio,canvas,video{ display: inline-block;*display: inline;*zoom: 1;}/* 去掉 firefox 下此元素的边框 */abbr,acronym{ border:0;font-variant:normal;}address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:500;}body{ color:#333;}a{ color: #666666;}a:hover{ color:#FF6600;}button,input {font-family: Microsoft YaHei, Heiti  SC, tahoma, Arial, Hiragino Sans GB, "\2B8B\4F53", sans-serif;border: 0;/*去除默认的灰色边框*/outline: none;}

common.css

/*声明字体图标 这里要注意路径的更换*/
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?50kdyc');src:  url('../fonts/icomoon.eot?50kdyc#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?50kdyc') format('truetype'),url('../fonts/icomoon.woff?50kdyc') format('woff'),url('../fonts/icomoon.svg?50kdyc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}
/*版心*/
.w {width: 1200px;margin: 0 auto;
}
.fl {float: left;
}
.fr {float: right;
}
.style_red {color: #c81623;
}
/*快捷导航*/
.shortcut {height: 31px;line-height: 31px;background-color: #f1f1f1;
}
.shortcut ul li {float: left;
}
/*选择所有偶数的小li*/
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}
.arrow-icon::after {content: "\ea50";font-family: 'icomoon';margin-left: 6px;
}
/*header 头部制作*/
.header {position: relative;height: 110px;
}
.logo {top: 25px;position: absolute;width: 254px;height: 83px;
}
.logo a {display: block;width: 254px;height: 83px;background: url(../images/logo.png) no-repeat;font-size: 0px;
}
.search {position: absolute;left: 346px;top:25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}
.search input {width: 454px;height: 32px;padding-left: 10px;
}
.search button {float: right;width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #fff;
}
.hotWords {position: absolute;top: 66px;left: 346px;
}
.hotWords a {margin: 0 10px;
}
.shopCar {position: absolute;right: 60px;top: 25px;width: 140px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}
.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #ffffff;background-color: #e60012;padding: 0 6px;border-radius: 7px 7px 7px 0;
}
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}
.nav .navitems {float: left;
}
.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}
.dropdown .dd {/*display: none;*/width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}
.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;
}
.dropdown .dd ul li:hover {background-color: #fff;
}
.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;color: #ffffff;content: ">";
}
.dropdown .dd ul li a {font-size: 14px;color: #ffffff;
}
.dropdown .dd ul li:hover a {color: #c81623;
}
.navitems ul li {float: left;
}
.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}/*底部模块制作*/
.footer {height: 415px;padding-top: 30px;
}
.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}
.mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 35px;
}
.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url("../images/图标.png") no-repeat -110px -60px;margin-right: 8px;
}
.service-txt h4 {font-size: 14px;
}
.service-txt p {font-size: 12px;
}
.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}
.mod_help dl {float: left;width: 200px;
}
.mod_help dl:last-child {width: 100px;text-align: center;
}
.mod_help dl dt {font-size: 16px;margin-bottom: 10px;
}
.mod_copyright {text-align: center;padding-top: 20px;
}
.links {margin-bottom: 15px;
}
.links a{margin:0 10px;
}
.copyright {line-height: 20px;
}

index.css

.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}
.focus {float: left;width: 721px;height: 455px;background-color: purple;
}
.newflash {float: right;width: 250px;height: 455px;
}
.news {height: 165px;border: 1px solid #e4e4e4;
}
.news-hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #e4e4e4;padding: 0 15px;
}
.news-hd h5 {font-size: 14px;float: left;
}
.news-hd a {float: right;
}
.news-bd {padding: 5px 15px 0;
}
.news-bd ul li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.lifeservice {overflow: hidden;height: 209px;/*background-color: purple;*/border-right: 1px solid #e4e4e4;border-top: 0;
}
.lifeservice ul {width: 252px;
}
.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: 24px;height: 28px;/*background-color: skyblue;*/margin-top: 12px;background: url("../images/生活服务小图标.png") no-repeat -21px -14px;
}
.bargain {margin-top: 5px;
}
/*推荐模块*/
.recom {height: 163px;/*background-color: skyblue;*/margin-top: 12px;
}
.recom_hd {float: left;width: 205px;height: 163px;font-size: 20px;font-weight: bold;background-color: #5c5251;color: #ffffff;text-align: center;padding-top: 30px;
}
.recom_bd {float: left;
}
.recom_bd ul li {float: left;margin-top: 6px;
}
.recom_bd ul li:nth-child(even) {width: 1px;height: 133px;background-color: #ddd;margin-top: 11px;
}
/*家用电器模块*/
.box-hd {height: 30px;border-bottom: 2px solid #c81623;margin-top: 20px;
}
.box-hd h3 {float: left;font-size: 18px;font-weight: bold;color: #c81623;
}
.tab_list {float: right;line-height: 30px;
}
.tab_list ul li{float: left;
}
.tab_list ul li:nth-child(even) {width: 1px;height: 14px;background-color: #666666;margin: 8px 5px;
}
.box-bd {height: 361px;/*background-color: skyblue;*/
}
.tab_list_item>div{float: left;height: 361px;
}
.col_210 {width: 210px;text-align: center;background-color: #f9f9f9;
}
.col_210 ul {padding-left: 12px;
}
.col_210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #cccccc;text-align: center;line-height: 33px;margin-right: 10px;
}
.col_329 {width: 329px;text-align: center;
}
.col_221 {width: 221px;text-align: center;border-bottom: 1px solid #cccccc;border-right: 1px solid #cccccc;
}
.col_219 {width: 219px;text-align: center;border-bottom: 1px solid #cccccc;border-right: 1px solid #cccccc;
}
.bb {display: block;border-bottom: 1px solid #cccccc;
}

前端初尝试---品优购首页（只用HTML和CSS）相关推荐

  1. b站pink老师前端课程、品优购项目（跟着练的笔记+代码）

    02.网站制作流程 1. 03.品优购项目规划 04.项目搭建 05.样式的模块化开发 06.favicon图标制作 favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签 ...

  2. 黑马程序员前端实战项目----品优购（上）

    目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划 ...

  3. HTML和CSS实现品优购首页

    HTML和CSS实现品优购首页 效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...

  4. 品优购首页——网页轮播图

    效果图 首页文件 index.html <!DOCTYPE html> <html lang="en"> <head><meta char ...

  5. 三、品优购首页制作_快捷导航区域

    代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作 网站的首页一般都是使用index命名,比如in ...

  6. 大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)

    HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...

  7. HTML5期末大作业：电商购物网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 学生电商网页作业...

    常见网页设计作业题材有 ​​个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...

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

    目录 main 首页主体模块制作 recom 今日推荐模块 ulike 猜你喜欢模块 main 模块 不再时公共模块,新建一个index.css文件 在该文件中编写css代码 分类部分在nav 导航模 ...

  9. web前端 品优购首页+源代码(1)

    首页构成 shortcut 快捷导航模块 header 头部模块 nav 导航模块 footer 底部模块(优先做页面公共模块) 快捷导航模块 <!-- 快捷导航模块 --><sec ...

最新文章

  1. pmdk -- libpmemlog 介绍
  2. 5.数字拆分成4段，怎样使得4段的乘积最小【dp】
  3. 数据结构与算法之KMP算法02
  4. aws java mysql_Lambda本地连接到Aurora MySql - 部署到AWS时超时
  5. Silverlight实例教程 - Validation用户提交数据验证捕获
  6. 贪 心 学用markdown
  7. 无门槛福利：CSDN和文库下载
  8. 暴风php视频怎么打开,暴风下载的视频怎样转换视频格式
  9. 阿里巴巴图表库 Bizcharts 正式开源
  10. 因为改 UOM conversion 导致库存数量和財务上的数据错误
  11. LintCode_新手必编程50题（1-3阶段）解答与分析
  12. 'ContactForm' object has no attribute 'cleaned_data'
  13. 520 miix 小兵 黑苹果_根据【黑果小兵】整理的黑苹果教程-小白教程
  14. Embeded linux之网卡驱动
  15. 【English】十大词性之感叹词(感叹句)
  16. KSZ8081网络设计注意事项以及调试总结
  17. 为了让师妹20分钟学会canvas，我熬夜苦肝本文外加一个小项目【❤️建议收藏❤️】
  18. php 中文加密如何解密,求教PHP中文加密解密代码
  19. win10怎么连接宽带
  20. 服务器拷贝文件提示ms-dos功能无效,复制文件提示“MS-DOS功能无效”无法移动解决措施...

热门文章

  1. 【数据科学】小数据治理靠“人工”，大数据治理靠“智能”
  2. [Android] 花伴侣——植物识别神器,避免户外游玩急性中毒，中科院出品
  3. 编译时异常与运行时异常
  4. React Native FlatList优化
  5. “闪送模式”定义即时配送市场，C端为何独爱“一对一”？
  6. 2021年低压电工考试及低压电工最新解析
  7. 笔记｜Python 文档注解｜strftime 和 strptime（时间格式字符串）
  8. Mac Apple Silicon M1/M2 homebrew miniforge conda pytorch yolov5深度学习环境搭建并简单测试MPS GPU加速
  9. pytest测试框架--fixture的基本使用
  10. 苹果8p电池多少毫安的_iPhone12Pro电池容量多少毫安 苹果12Pro电池容量多大