品优购项目（HTML\CSS）
项目效果可访问 http://zhousunyu.3vdo.club 查看
主页
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购</title><!-- 引入初始化样式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共的样式文件 -->
<link rel="stylesheet" href="css/common.css">
<!-- main板块的样式文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 设置icon标签栏的网页图标 -->
<link rel="shortcut icon" href="favicon.ico"></head>
<body><!-- 快捷导航模块 --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="login.html">请登录 </a><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="mypin">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="focuspin">关注品优购</li><li></li><li class="clientcare">客户服务</li><li></li><li class="naviationofwebsite">网站导航</li></ul></div></div></div><!-- 快捷导航模块end --><!-- header 模块start --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 搜索模块 --><div class="search"><input type="search" 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"><i class="count">8</i>我的购物车</div></header><!-- heaader 模块 end--><!-- nav 模块的制作 start --><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="list.html">手机</a> <a href="#">数码</a> <a href="#">通讯</a></li><li><a href="#">电脑</a> <a href="#">办公</a> </li><li><a href="#">家居</a> <a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">童装</a> <a href="#">男装</a> <a href="#">女装</a> <a href="#">内衣</a></li><li><a href="#">个户化妆</a> <a href="#">清洁用品</a> <a href="#">宠物</a></li><li><a href="#">鞋靴</a> <a href="#">珠宝</a> <a href="#">奢侈品</a> <a href="#">珠宝</a></li><li><a href="#">运动户外</a> <a href="#">钟表</a></li><li><a href="#">汽车</a> <a href="#">汽车用品</a></li><li><a href="#">母婴</a> <a href="#">玩具乐器</a></li><li><a href="#">食品</a> <a href="#">酒水</a></li><li><a href="#">医药</a> <a href="#">保健</a></li><li><a href="#">图书影像</a> <a href="#">电子书</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li><li><a href="#">理财</a> <a href="#">众筹</a> <a href="#">白条</a> <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="#">Zavier法拍</a></li><li><a href="#">企业购 | 团购</a></li><li><a href="#">全球行</a></li><li><a href="#">排行榜</a></li></ul></div></div></nav><!-- nav 模块的制作 end --><!-- main模块的制作 start -->
<div class="w"><div class="main"><div class="focus"><!-- 注意： 结构不能直接插入图片必须添加li 具体操作看前面写的淘宝轮播图完善--><ul><li><img src="upload/focus1.png" alt=""></img></li></ul></div><div class="newsflash"><div class="news"><div class="hd"><h5>品优购快报</h5><div class="gengduo"><a href="#">更多</a></div></div><div class="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><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></img></div></div></div>
</div>
<!-- main模块的制作 end --><!-- 推荐模块制作 start -->
<div class="w recom"><div class="recom_hd"><img src="images/recom.png" alt="今日推荐"></div><div class="recom_bd"><ul><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li></ul></div>
</div>
<!-- 推荐模块制作 end --><!-- 楼层区域制作 start -->
<div class="floor"><!-- 一楼家电模块制作 start --><div class="jiadian w"><div class="firstfloor_hd"><h3>家用电器</h3><!-- 注意，下边的这个名字不可以随意进行更改 --><div class="tab_list"><ul><li><a href="#" class="tab_list_hot">热门</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="firstfloor_bd"><!-- 先放一个 后面学JS再补 --><div class="tab_content"><div class="tab_list_tiem"><div class="col_210"><ul><li><a href="#">节能补贴</a></li></ul><ul><li><a href="#">节能补贴</a></li></ul><ul><li><a href="#">节能补贴</a></li> </ul><ul><li><a href="#">节能补贴</a></li> </ul><ul><li><a href="#">节能补贴</a></li> </ul><ul><li><a href="#">节能补贴</a></li> </ul><a href="#"><img src="upload/floor-1-1.png"></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="b"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区域制作 end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li class="zhengpin"><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li class="wuliu"><h5></h5><div class="service_txt"><h4>极速物流</h4><p>极速物流，极速送达</p></div></li><li class="shouhou"><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>七天无理由退货</p></div></li><li class="service"><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人订制个性化套餐</p></div></li><li class="help"><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="#">211限时达</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="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd> <img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="copyright_top"><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_bottom">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end --></body></html>列表页：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表页-综合网络首选-正品低价、品质保证、配送及时、轻松购物！</title><meta name="keywords" content="正品低价、品质保证、配送及时、轻松购物、手机、笔记本、电脑、家居百货"><meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货！"></meta><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的样式文件 --><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css">
</head>
<style>.box {position: relative;width: 290px;height: 460px;border: 1px solid transparent;}.mobile img {width: 283px;height: 290px;}.trade_intro {width: 265px;height: 35px;margin: 7px 12px 10px 13px;}.trade_intro h5 {font-size: 14px;line-height: 17px;font-weight: 400;color: rgb(102, 102, 102);}.price {position: relative;width: 120px;height: 18px;/* border: 1px solid red; *//* background-color: pink; */margin: 0px 155px 6px 15px;padding: 0 10px;}.price h6 {position: absolute;top: -2px;left: -8px;display: block;float: left;font-size: 22px;line-height: 21px;font-weight: 700;color: red;}.price del {display: block;float: right;color: #a4a4a4;font-size: 14px;}.bar {float: left;width: 133px;height: 13px;border: 1px solid red;border-radius: 3px;padding: 1px;}.bar_in {width: 87%;height: 100%;background-color: red;}.good_progress h8 {display: block;float: left;width: 49px;height: 14px;font-family: SimSun;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 21px;letter-spacing: 0px;color: #666666;margin: 0 11px 13px 15px;}.good_progress .extra {float: left;display: block;margin: 0px 7px 13px 7px;width: 59px;height: 14px;font-family: SimSun;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 21px;letter-spacing: 0px;color: #666666;}.extra i {font-style: normal;color: red;}.buy_imi {position: absolute;right: 0;bottom: 0;width: 290px;height: 46px;background-color: #b1191a;}.buy_imi h3 {display: block;margin: 15px 105px 13px 105px;width: 80px;height: 19px;font-family: SimSun;font-size: 20px;font-weight: normal;font-stretch: normal;line-height: 19px;letter-spacing: 0px;color: #ffffff;/* padding: 18px 106 13px 105px; */}
</style>
<body><!-- 快捷导航模块 --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="login.html">请登录 </a><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="mypin">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="focuspin">关注品优购</li><li></li><li class="clientcare">客户服务</li><li></li><li class="naviationofwebsite">网站导航</li></ul></div></div></div><!-- 快捷导航模块end --><!-- header 模块start --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 列表页的秒杀模块 --><div class="sk"><img src="images/sk.png" alt="秒杀"></div><!-- 搜索模块 --><div class="search"><input type="search" 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"><i class="count">8</i>我的购物车</div></header><!-- heaader 模块 end--><!-- nav 模块的制作 start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品优购秒杀</a></li><li><a href="#">百亿补贴</a></li><li><a href="#">超值低价</a></li></ul></div><div class="sk_con"><ul><li><a href="#">女装</a> </li><li><a href="#" class="sk_con_secondli">女装</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="#" class="sk_con_lastli">更多分类</a> </li></ul></div></div></nav><!-- nav 模块的制作 end --><!-- 列表页主体部分 start -->
<div class="w sk_container"><div class="sk_hd"><img src="upload//bg_03.png"></div><div class="sk_bd"><ul class="clearfix"><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div> </li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li></ul></div>
</div><!-- 列表页主体部分 end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li class="zhengpin"><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li class="wuliu"><h5></h5><div class="service_txt"><h4>极速物流</h4><p>极速物流，极速送达</p></div></li><li class="shouhou"><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>七天无理由退货</p></div></li><li class="service"><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人订制个性化套餐</p></div></li><li class="help"><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="#">211限时达</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="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="copyright_top"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <ahref="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <ahref="#">品优购社区</a> | <a href="#">品优购公益</a> | <a href="#">English Site</a> | <a href="#">ContactU</a></div><div class="copyright_bottom">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end --></body>
</html>注册页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head>
<!-- 引入初始化样式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 设置icon标签栏的网页图标 -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/register.css">
<body><div class="w"><div class="header"><div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div></div><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登录</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号：</label><input type="text" class="inp"> <i class="error_icon"></i><spanclass="error">手机号格式不正确，请查证后重新输入</span></li><li><label for="">手机验证码：</label><input type="text" class="inp"> <i class="error_icon"></i><spanclass="error">手机验证码输入错误</span></li><li><label for="">输入密码：</label><input type="text" class="inp"> <i class="error_icon"></i><spanclass="error">密码格式不正确，密码的格式为6-18位</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li><li><label for="">确认密码：</label><input type="text" class="inp"> <i class="success_icon"></i><spanclass="success">确认密码输入正确</span></li><li class="agree"><input type="checkbox" name="" id="">同意协议并注册<a href="#">《知晓用户协议》</a></li><li><input type="submit" value="提交注册" class="btn"></li></ul></form></div>
</div><div class="footer"><div class="mod_copyright"><div class="copyright_top"><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> | <ahref="#">品优购公益</a> | <a href="#">English Site</a> | <a href="#">ContactU</a></div><div class="copyright_bottom">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></div>
</body>
</html>样式模块：
base.css
/* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圆点 */
li {list-style: none
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框我们需要手动去掉 */border: 0; outline: none;
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}
/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}
.clearfix {*zoom: 1;
}common.css
/* icomoon声明 注意此处要注意路径的变化*/
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?mfgl5q');src: url('../fonts/icomoon.eot?mfgl5q#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?mfgl5q') format('truetype'),url('../fonts/icomoon.woff?mfgl5q') format('woff'),url('../fonts/icomoon.svg?mfgl5q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版 心 */
.w {width: 1200px;margin: 0 auto;
}/* 快捷导航模块 */
.shortcut {/* width: 100%; */height: 31px;background-color: #f1f1f1;line-height: 31px;
}.shortcut ul li {float: left;
}.style_red {color: #c81623;
}.fl {float: left;}.fr {float: right;
}/* 选择所有偶数的li */
.shortcut .w .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0px;
}.mypin::after {font-family: 'icomoon';content: '';margin-left: 6px;
}.focuspin::after {content: '';margin-left: 6px;font-family: 'icomoon';
}.clientcare::after {content: '';font-family: 'icomoon';margin-left: 6px;
}.naviationofwebsite::after {content: '\e91e';font-family: 'icomoon';margin-left: 6px;
}.header {position: relative;height: 105px;/* background-color: aquamarine; */
}.logo { position: absolute;top: 25px;
width: 171px;
height: 61px;
/* background-color: skyblue; */
}.logo h1 a { display: block;width: 171px;height: 61px;background: url("../images/logo.png") no-repeat;font-size: 0;
}
.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;/* margin: 346px auto; */
}
.search input { float: left;width: 454px;height: 32px;padding-left: 10px;
}
.search button { float: left;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;line-height: 35px;text-align: center;width: 140px;height: 35px;background-color: #f7f7f7;border: 2px solid #dfdfdf;
}
.shopcar::before{content: '\e93a';font-family: 'icomoon';margin-right: 10px;color: #b1191a;
}
.shopcar::after{content: '\e920';font-family: 'icomoon';margin-left: 5px;
}
.count{position: absolute;top: -5px;/* right: 20px; 注意左对齐效果更好*/left: 105px; height: 14px;color: #fff;background-color: #600012;padding: 0 5px;line-height: 14px;border-radius: 7px 7px 7px 0;
}
.nav{height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown{float: left;position: relative;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; */position: absolute;top: 45px;left: 0;width: 210px;height: 465px;background-color: #c81623;/* overflow: hidden;transition: all 0.5s; */
}
.dropdown .dd ul li{position: relative;width: 100%;height: 31px;line-height: 31px;margin-left: 2px;
}
.dropdown .dd ul li::after {content: '\e920';font-family: 'icomoon';position: absolute;right: 10px; top: 1px;color:#fff ;
}
.dropdown .dd ul li:hover{background-color: #fff;}
.dropdown .dd ul li a{font-size: 14px;color: #fff;padding-left: 10px;
}
.dropdown .dd ul li:hover a{color: #c81623;
}.navitems li{float: left;
}
.navitems li a{display: block;line-height: 45px;padding: 0 25px;height: 45px;font-size: 16px;
}.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service{height: 110px;border-bottom: 1px solid #ccc;
}.mod_service ul li{float: left;width: 240px;height: 50px;/* background-color: pink; */padding-left: 35px;
}
.mod_service ul .zhengpin h5{float: left;background:url("../images/icons.png") no-repeat -252px -2px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .wuliu h5 {float: left;background: url("../images/icons.png") no-repeat -254px -54px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .shouhou h5 {float: left;background: url("../images/icons.png") no-repeat -257px -105px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .service h5 {float: left;background: url("../images/icons.png") no-repeat -257px -156px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .help h5 {float: left;background: url("../images/icons.png") no-repeat -257px -209px;width: 50px;height: 50px;margin-right: 10px;
}.service_txt{float:left
}
.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 dt {font-size: 16px;margin-bottom: 10px;
}
.mod_help dl{float: left;width: 200px;
}
.mod_help dl:last-child{width: 90px;text-align: center;
}
.mod_copyright{line-height: 15px;text-align: center;padding-top: 20px;
}
.copyright_top {margin-bottom: 15px;
}
.copyright_top a{ margin:0 3px;}index.css
/* 此处的css文件是针对 main模块而设计的 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?mfgl5q');src: url('../fonts/icomoon.eot?mfgl5q#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?mfgl5q') format('truetype'),url('../fonts/icomoon.woff?mfgl5q') format('woff'),url('../fonts/icomoon.svg?mfgl5q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}.main {width: 980px;height: 455px;/* background-color: aqua; */margin-left: 220px;margin-top: 10px;
}.focus {float: left;width: 721px;height: 455px;background-color: bisque;
}.newsflash {float: right;width: 250px;height: 455px;/* background-color: #ccc; */
}.news {height: 165px;background-color: rgb(255, 255, 255);
}.lifeservice {overflow: hidden;height: 209px;/* background-color: blanchedalmond; */border: 1px solid #e4e4e4;border-top: 0;
}.lifeservice ul {width: 252px;
}/* 编者按：由于下方的li样式过大，导致ul、lifeservice的宽度容纳不下，右下方向都会多出来一块，此时设置一个overflow:hidden; 过大的部分直接切掉 不影响视觉效果*/.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 {margin-top: 12px;display: inline-block;width: 24px;height: 28px;/* background-color: aqua; */background: url(../images/icons.png)no-repeat -18px -15px;
}.bargain {margin-top: 5px;
}.newsflash .news {border: 1px dotted #e4e4e4;
}.newsflash .news .hd {height: 35px;border-bottom: 1px dotted #e4e4e4;
}.newsflash .news .hd h5 {float: left;padding-left: 15px;font-size: 14px;line-height: 35px;
}.newsflash .news .hd .gengduo {padding-right: 5px;line-height: 35px;float: right;
}.newsflash .news .hd .gengduo::after {content: '\e920';font-family: 'icomoon';
}.newsflash .news .bd {padding: 5px 15px 0px;
}.newsflash .news .bd ul li {height: 24px;line-height: 24px;/* 超出文字省略号表示 三个步骤 : 超出部分隐藏 文字必须一行显示 超出部分ellipsis */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.recom {height: 163px;background-color: rgb(255, 255, 255);margin-top: 12px;
}.recom .recom_hd {float: left;width: 205px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}.recom .recom_bd {position: relative;float: left;
}.recom .recom_bd ul li {position: relative;float: left;
}.recom .recom_bd ul li:nth-child(-n+3)::after {/* 注意after是行内元素 */display: block;position: absolute;right: 0;top: 10px;content: '';width: 1px;height: 145px;background-color: #ddd;
}/* 家用电器模块 */
.floor .jiadian .firstfloor_hd {margin-top: 29px;border-bottom: 2px solid rgb(200, 22, 25);color: rgb(200, 22, 25);height: 30px;line-height: 21px;
}.floor .jiadian .firstfloor_hd h3 {font-size: 18px;float: left;color: #c81623;font-weight: 400;}/* 下述为 标准的错误写法 热门本来在第一个回转而变成最后一个 解决方式是li 上再加浮动left
.tab_list li{float:right;line-height: 30px;
}
.tab_list li a{margin:15px;
}.tab_list ul .tab_list_hot{color: #c81623;
} */.tab_list {float: right;line-height: 30px;
}.tab_list li{float: left;
}
.tab_list li a {margin: 15px;
}.tab_list ul .tab_list_hot {color: #c81623;
}
.jiadian .firstfloor_bd{height: 361px;/* background-color: pink; */
}
.tab_list_tiem>div{float: left;height: 361px;
}
.col_210{width: 210px;text-align: center;background-color: #f9f9f9;
}
.col_210 ul li{width: 85px;height: 34px;border-bottom: 1px solid #ccc;float:left;text-align: center;line-height: 34px;padding-right:10px;
}.col_210 ul{padding-left: 12px;
}.col_329{width: 329px;
}
.col_221{width: 221px;border-right: #ccc 1px solid;
}.col_219{width: 219px;
}
.bb{/* 一般情况下，a如果包含有宽度的盒子，a需要转化为块级元素 */display: block;border-bottom: #ccc 1px solid;
}list.css
/* 列表页专有的CSS样式 */ .nav{overflow: hidden; } .sk{position: absolute;border-left: 1px solid #c81523;left: 190px;top: 40px;padding: 3px 0 0 14px; } .sk_list{float: left; } .sk_list ul li{float: left; } .sk_list ul li a{float: left;display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color:black }.sk_con{float: left; }.sk_con ul li{float: left; }.sk_con ul li:hover a{color: #c81523;}.sk_con ul li a{display: block;line-height: 49px;padding: 0 20px;font-size: 14px;font-weight: 400;color: black;}.sk_con .sk_con_secondli{color: #c81623; }.sk_con .sk_con_lastli::after{display: inline-block;content: '\e91e';font-family: 'icomoon';padding-left:2px ; }.sk_bd li{float: left;margin-right: 2px;margin-top: 2px; }.sk_bd li:hover{border: #c81523 1px solid; }.sk_bd li:nth-child(4n){margin-right: 0; }
register.css
.w { margin: 0 auto;width: 1200px;;}.header{height: 84px;border-bottom:2px solid #c81623;
}.logo{padding-top: 18px;
}.registerarea{height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3{height: 42px;border: 1px solid #ccc;background-color: #e4e4e4;line-height: 42px;font-size: 18px;padding: 0 10px;font-weight: normal;
}.registerarea h3 .login{float: right;font-size: 14px;
}.login a{color: #c81623;}.reg_form {width: 600px;margin:50px auto 0;/* background-color:pink; */
}.reg_form ul li label{display: inline-block;width: 88px;text-align: center;
}.reg_form ul li .inp{width: 242px;height: 37px;border: 1px solid #ccc;
}.reg_form ul li{margin-bottom: 20px;
}
.error{color: #c81523;
}.reg_form ul li .error_icon{display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url("../images/error.png") no-repeat;margin-top: -2px;
}.success{color: #00a854;}
.success_icon{display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/success.png);
}.safe {padding-left: 175px;
}.safe em{padding: 0 12px;color: #fff;
}.ruo{background-color: #de1111;
}.zhong {background-color: greenyellow;
}.qiang {background-color: #f79100;
}.agree{padding-left: 95px;
}.agree input{vertical-align: middle;
}.btn{width: 200px;height: 34px;background-color: #c81523;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}.mod_copyright {line-height: 15px;text-align: center;padding-top: 20px;
}.copyright_top {margin-bottom: 15px;
}.copyright_top a {margin: 0 3px;
}相关文章：
品优购项目（HTML\CSS）
项目效果可访问 http://zhousunyu.3vdo.club 查看 主页 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><titl…...
Attention Is All You Need论文阅读笔记
Attention is All You Need是如今机器学习研究者必读的论文，该文章提出的Transformer架构是如今很多机器学习项目的基础，说该文章极大推动了机器学习领域的研究也不为过。 但这么重要，也是必读的文章对初学者来说其实并不友好，很多…...
深入理解设计模式之中介者模式
深入理解设计模式之：中介者模式（Mediator Pattern） 一、什么是中介者模式？ 中介者模式（Mediator Pattern）是一种行为型设计模式。它通过引入一个中介对象，来封装一组对象之间的交互࿰…...
OpenCV 图像像素的读写操作
一、知识点 1、在OpenCV中，一切图像皆Mat。 2、对图像像素的读写操作，就是对Mat元素的遍历与访问。 3、对Mat使用数组方式遍历与访问。 (1)、函数声明: template<typename _Tp> inline_Tp & Mat::at(int i0, int i1) (2)、参数说明:…...
【前端】【Vue3】vue3性能优化总结
第一章 Vue3性能优化概述 1.1 Vue3性能提升背景 1.1.1 Vue2性能瓶颈分析 1. 响应式原理的局限性 Object.defineProperty 的缺陷：Vue2 使用 Object.defineProperty 来实现响应式。这个方法只能劫持对象的属性，对于新增或删除属性无法自动响应。例如&a…...
如何制作全景VR图？
全景VR图，特别是720度全景VR，为观众提供一种沉浸式体验。 全景VR图能够捕捉场景的全貌，还能将多个角度的图片或视频无缝拼接成一个完整的全景视角，让观众在虚拟环境中自由探索。随着虚拟现实（VR）技术的飞速…...
动态防御新纪元：AI如何重构DDoS攻防成本格局
1. 传统高防IP的静态瓶颈与成本困境 传统高防IP依赖预定义规则库，面对SYN Flood、CC攻击等威胁时，常因规则更新滞后导致误封合法流量。例如，某电商平台曾因静态阈值过滤误封20%的订单接口流量，直接影响营收。以下代码模拟传统方案…...
汽车软件刷写 APP SBL PBL概念
目录 PBL（Primary Boot Loader）SBL（Secondary Boot Loader）PBL与SBL的协作流程在汽车刷写中，APP、PBL、SBL的含义如下： APP：指应用程序（Application），是汽车电子控制单元（ECU）中实现具体功能的软件，如发动机控制、变速箱控制、车身电子稳定系统等功能的程序。在刷…...
自动化中的伦理：驯服人工智能中的偏见与守护合规之路
当算法取代人脑做出关乎就业、信贷、医疗乃至法律判决的决定时，我们赋予机器的不仅仅是效率，更是塑造社会公平的巨大力量。自动化系统在提升生产力的同时，其内在的偏见风险如同暗流涌动，若缺乏道德罗盘与严格约束，本应…...
Flask与PostgreSQL交互教程
目录 1. 项目结构2. 环境准备2.1 安装依赖2.2 使用Docker启动PostgreSQL 3. 数据库配置3.1 环境变量配置3.2 数据库连接配置 4. 定义数据库模型5. 实现API接口5.1 创建用户5.2 获取所有用户5.3 获取单个用户5.4 更新用户5.5 删除用户 6. 运行应用7. API测试7.1 创建用户7.2 获取…...
XJTU-SY轴承振动数据集的json自封装
1.最终形式的形式 不用再去翻文档找对应的故障类型，采样率等信息了，所有的信息自包含在.json文件里，15个测试例，一个测试例对应一整个.json文件。 {"dataset": {"name": "XJTU-SY_Bearing_Datasets&quo…...
Spring AI 系列2: Advisors增强器简介
一、Advisors简介 1.1 Advisors定义 Advisors 是在 AI 应用程序中处理请求和响应的拦截器。我们可以使用它们为提示流程设置额外的功能。例如，可以建立聊天历史、排除敏感词或为每个请求添加额外的上下文。 Spring AI的Advisor，本质上是一个拦截…...
通过Func实现飞书应用通知消息加急处理
前言 在现代企业运作中，及时响应告警信息对保障系统的稳定性和业务的连续性至关重要。随着业务的数字化转型，越来越多的企业依赖于复杂的技术架构，这使得故障和异常事件的及时处理变得愈发重要。传统的告警通知方式往往存在响应不及时、信息…...
【目标检测】【AAAI-2022】Anchor DETR
Anchor DETR： Query Design for Transformer-Based Object Detection 锚点DETR：基于Transformer的目标检测查询设计 论文链接 代码链接 摘要 在本文中，我们提出了一种基于Transformer的目标检测新型查询设计。此前的Transformer检测器中&am…...
Spring Cloud Alibaba 学习 —— 简单了解常用技术栈
Spring Cloud Alibaba 官网：https://sca.aliyun.com/ 什么是 Spring Cloud Alibaba Spring Cloud Alibaba 是 Spring Cloud 规范在阿里生态的扩展实现，结合了阿里自研组件与开源生态，提供面向云原生场景的微服务解决方案。其核心功能可概括…...
智慧工厂整体解决方案
该方案围绕智能工厂建设，阐述其基于工业 4.0 和数字化转型需求，通过物联网、大数据、人工智能等技术实现生产自动化、数据化管理及联网协同的特点。建设步骤包括评估现状、设定目标、制定方案、测试调整、实施计划及持续改进，需整合 MES、ERP 等软件系统与传感器、机器人等硬…...
秋招Day12 - 计算机网络 - TCP
详细说一下TCP的三次握手机制 TCP的三次握手机制是为了在两个主机之间建立可靠的连接，这个机制确保两端的通信是同步的，并且在开始传输数据前，双方都做好了要通信的准备。 说说SYN的概念？ SYN 是 TCP 协议中用来建立连接的一个标…...
KubeMQ 深度实践：构建可扩展的 LLM 中台架构
文章简介 在 AI 应用开发中，集成 OpenAI、Anthropic Claude 等多大型语言模型（LLM）常面临 API 碎片化、请求路由复杂等挑战。本文将介绍如何通过 ** 消息代理（Message Broker）** 实现高效的 LLM 管理，以开…...
vueflow
自定义节点，自定义线，具体细节还未完善，实现效果： 1.安装vueflow 2.目录如下 3. index.vue <script setup> import { ref } from vue import { VueFlow, useVueFlow } from vue-flow/core import { Background } from vue-…...
LearnOpenGL-笔记-其十一
Normal Mapping 又到了介绍法线贴图的地方，我感觉我已经写了很多遍了... 法线贴图用最简单的话来介绍的话，就是通过修改贴图对应物体表面的法线来修改光照效果，从而在不修改物体实际几何形状的前提下实现不同于物体几何形状的视觉效果。 因…...
@Docker Compose 部署 Prometheus
文章目录 Docker Compose 部署 Prometheus1. 环境准备2. 配置文件准备3. 编写 Docker Compose 文件4. 启动服务5. 验证部署6. 常用操作7. 生产环境增强建议8. 扩展监控对象 Docker Compose 部署 Prometheus 1. 环境准备 安装 Docker（版本 ≥ 20.10）和 …...
openppp2 -- 1.0.0.25225 优化多线接入运营商路由调配
本文涉及到的内容，涉及到上个发行版本相关内容，人们在阅读本文之前，建议应当详细阅读上个版本之中的VBGP技术相关的介绍。 openppp2 -- 1.0.0.25196 版本新增的VBGP技术-CSDN博客 我们知道在现代大型的 Internet 网络服务商，很多…...
二次封装 Vuex for Uniapp 微信小程序开发
作为高级前端开发工程师，我将为你提供一个针对 Uniapp Vue2 Vuex 的 Store 二次封装方案，使团队成员能够更便捷地使用和管理状态。 封装目标 模块化管理状态 简化调用方式 提供类型提示（在 Vue2 中尽可能实现） 便于维护和查…...
详细到用手撕transformer下半部分
之前我们讨论了如何实现 Transformer 的核心多头注意力机制，那么这期我们来完整地实现整个 Transformer 的编码器和解码器。 Transformer 架构最初由 Vaswani 等人在 2017 年的论文《Attention Is All You Need》中提出，专为序列到序列（seq2s…...
Spring Boot 整合 Spring Data JPA、strategy 的策略区别、什么是 Spring Data JPA
DAY29.2 Java核心基础 Spring Boot 整合 Spring Data JPA Spring Data JPA根据具体的数据库分为不同的子模块，无论是关系型数据库和非关系型数据库，Spring Data都提供了支持 Mysql：Spring Data JPA Redis：Spring Data Redis …...
Vue 3.0 中的路由导航守卫详解
1. 路由导航守卫 1.1. 全局前置守卫 Vue-Router 提供的导航守卫主要用来守卫路由的跳转或取消。它们可以植入到全局、单个路由或组件级别。 全局前置守卫可以使用 router.beforeEach 注册： const router createRouter({... });router.beforeEach((to, from) &g…...
【Sqoop基础】Sqoop生态集成：与HDFS、Hive、HBase等组件的协同关系深度解析
目录 1 Sqoop概述与大数据生态定位 2 Sqoop与HDFS的深度集成 2.1 技术实现原理 2.2 详细工作流程 2.3 性能优化实践 3 Sqoop与Hive的高效协同 3.1 集成架构设计 3.2 数据类型映射处理 3.3 案例演示 4 Sqoop与HBase的实时集成 4.1 数据模型转换挑战 4.2 详细集成流程…...
MySQL + CloudCanal + Iceberg + StarRocks 构建全栈数据服务
简述 在业务数据快速膨胀的今天，企业对 低成本存储 与 实时查询分析能力 的需求愈发迫切。 本文将带你实战构建一条 MySQL 到 Iceberg 的数据链路，借助 CloudCanal 快速完成数据迁移与同步，并使用 StarRocks 完成数据查询等操作，…...
MSVC支持但是Clang会报错的C++行为
MSVC的非标 目的友元别名模板类显式特例化的命名空间限制 目的 因为在使用clang进行ast分析msvc项目的时候，出现了爆红现象，了解到msvc会有一些不严格按照c标准但是允许的语法，在这点上clang就很严格，所以本文以clang为基准&…...
截屏精灵：轻松截屏，高效编辑
在移动互联网时代，截图已经成为我们日常使用手机时的一项基本操作。无论是记录重要信息、分享有趣内容，还是进行学习和工作，一款好用的截图工具都能极大地提升我们的效率。截屏精灵就是这样一款功能强大、操作简单的截图工具，它不…...