2020年史上最全移动端Web整理从开发基础到实战(四)
1、案例要求
利用响应式布局,实现微金所页面结构。
2、不同屏幕尺寸布局
整体样式
中大屏幕下样式
小屏幕下样式
超小屏幕(移动端)下样式
3、代码结构
4、页面结构
页面结构主要分8大块:
- 头部块
- 导航条
- 轮播图
- 信息块
- 预约块
- 产品块
- 新闻块
- 合作块
5、源码
相关源代码已放置github:https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zip
index.html 文件
<!DOCTYPE html>
<html lang="zh-CN"><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 href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- 在线字体图标文件 --><link href="./lib/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/wjs-index.css">
</head><body><!-- 头部块开始 --><header class="wjs-header hidden-sm hidden-xs"><div class="container"><div class="row"><!-- 在xs sm下是不显示的,所以没必要写 --><div class="col-md-2"><a href="javascript:;" class="code"><span class="fa fa-mobile fa-lg"></span><span>手机微金所</span><span class="fa fa-angle-down fa-lg"></span><img src="./images/code.jpg" alt=""></a></div><div class="col-md-5"><span class="fa fa-phone"></span><a href="javascript:;">4006-89-4006(服务时间:9:00~21:00) 联系在线客服</a></div><div class="col-md-2"><a href="javascript:;">常见问题</a> <a href="javascript:;">财富登录</a></div><div class="col-md-3"><button type="button" class="btn btn-danger">免费注册</button><button type="button" class="btn btn-link">登录</button></div></div></div></header><!-- 头部块结束 --><!-- 导航条开始 --><nav class="navbar navbar-default wjs-nav"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"><span class="wjs_icon wjs_icon_logo"></span><span class="wjs_icon wjs_icon_text"></span></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav hidden-sm"><li class="active"><a href="#">我要投资<span class="sr-only">(current)</span></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><ul class="nav navbar-nav navbar-right"><li><a href="#">个人中心</a></li></ul></div></div></nav><!-- 导航条结束 --><!-- 轮播图开始 --><div class="wjs-banner"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 小白点 --><ol class="carousel-indicators"><!-- data-target="#carousel-example-generic":自定义属性,给哪个id的轮播图加小白点 --><!-- data-slide-to="0":第几个小白点 --><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- 轮播图主体部分 --><div class="carousel-inner" role="listbox"><!-- HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。jQuery中可以使用data()方法获取自定义属性的值 --><div class="item active" data-large-image="./images/slide_01_2000x410.jpg" data-small-image="./images/slide_01_640x340.jpg"><!-- 这里面的轮播图片使用jq动态添加,否则加大小图的话,加载的时候,不管是大屏幕还是小屏幕大小图都会加载,浪费流量 --><!-- 每张轮播图的图片说明,这里不需要 --><!-- <div class="carousel-caption">...</div> --><a href=""><img src="" alt=""></a></div><div class="item" data-large-image="./images/slide_02_2000x410.jpg" data-small-image="./images/slide_02_640x340.jpg"></div><div class="item" data-large-image="./images/slide_03_2000x410.jpg" data-small-image="./images/slide_03_640x340.jpg"></div><div class="item" data-large-image="./images/slide_04_2000x410.jpg" data-small-image="./images/slide_04_640x340.jpg"></div></div><!-- 左右箭头,点击可切换上下一张 --><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><!-- 轮播图结束 --><!-- 信息块开始 --><div class="wjs-info hidden-xs"><!-- 信息块的制作可以使用bootstrap组件的媒体对象来做 --><div class="container"><div class="row"><div class="col-sm-6 col-md-4"><a href="javascript:;"><div class="media"><span class="media-left wjs_icon wjs_icon_E900"></span><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="javascript:;"><div class="media"><span class="media-left wjs_icon wjs_icon_E900"></span><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="javascript:;"><div class="media"><span class="media-left wjs_icon wjs_icon_E900"></span><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="javascript:;"><div class="media"><span class="media-left wjs_icon wjs_icon_E900"></span><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="javascript:;"><div class="media"><span class="media-left wjs_icon wjs_icon_E900"></span><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="javascript:;"><div class="media"><span class="media-left wjs_icon wjs_icon_E900"></span><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障安全</p></div></div></a></div></div></div></div><!-- 信息块结束 --><!-- 预约块开始 --><div class="wjs-reverse hidden-xs"><div class="container"><div class="row"><div class="col-sm-9"><span class="wjs_icon wjs_icon_E906"></span><span>现在的 272 人在排队,累计预约交易成功 7571 次</span><a href="javascript:;">什么叫预约投标</a><a href="javascript:;">立即预约</a></div><div class="col-sm-3"><span class="wjs_icon wjs_icon_E905"></span><a href="javascript:;">微金所企业宣传片</a></div></div></div></div><!-- 预约块结束 --><!-- 产品块开始 --><div class="wjs-product"><div class="container"><!-- 手动滑动效果 --><div class="tabs-parent"><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#p1" aria-controls="p1" role="tab" data-toggle="tab">特别推荐</a></li><li role="presentation"><a href="#p2" aria-controls="p2" role="tab" data-toggle="tab">微投资</a></li><li role="presentation"><a href="#p3" aria-controls="p3" role="tab" data-toggle="tab">友金所</a></li><li role="presentation"><a href="#p4" aria-controls="p4" role="tab" data-toggle="tab">团贷网</a></li><li role="presentation"><a href="#p5" aria-controls="p5" role="tab" data-toggle="tab">懒投资</a></li><li role="presentation"><a href="#p6" aria-controls="p6" role="tab" data-toggle="tab">掌游宝</a></li><li role="presentation"><a href="#p7" aria-controls="p7" role="tab" data-toggle="tab">英雄联盟</a></li></ul></div><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="p1"><div class="container"><div class="row"><div class="col-xs-12 col-sm-6 col-md-4"><div class="wjs-pBox active"><div class="wjs-pLeft"><p>新手体验1002期</p><div class="row"><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div></div></div><div class="wjs-pRight"><b>8</b><sub>%</sub><p>年利率</p></div></div></div><div class="col-xs-12 col-sm-6 col-md-4"><div class="wjs-pBox"><div class="wjs-pLeft"><p>新手体验1002期</p><div class="row"><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div></div></div><div class="wjs-pRight"><div class="wjs-pRight-tip"><span data-toggle="tooltip" data-placement="top" title="微金宝">宝</span><span data-toggle="tooltip" data-placement="top" title="北京市">北</span></div><b>8</b><sub>%</sub><p>年利率</p></div></div></div><div class="col-xs-12 col-sm-6 col-md-4"><div class="wjs-pBox"><div class="wjs-pLeft"><p>新手体验1002期</p><div class="row"><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div></div></div><div class="wjs-pRight"><b>8</b><sub>%</sub><p>年利率</p></div></div></div><div class="col-xs-12 col-sm-6 col-md-4"><div class="wjs-pBox"><div class="wjs-pLeft"><p>新手体验1002期</p><div class="row"><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div><div class="col-xs-6"><p>起投金额(元)</p><p>0.01万</p></div></div></div><div class="wjs-pRight"><b>8</b><sub>%</sub><p>年利率</p></div></div></div></div></div></div><div role="tabpanel" class="tab-pane" id="p2">2</div><div role="tabpanel" class="tab-pane" id="p3">3</div><div role="tabpanel" class="tab-pane" id="p4">4</div><div role="tabpanel" class="tab-pane" id="p5">5</div><div role="tabpanel" class="tab-pane" id="p6">6</div><div role="tabpanel" class="tab-pane" id="p7">7</div></div></div></div><!-- 产品块结束 --><!-- 新闻块开始 --><div class="wjs-news"><div class="container"><div class="row"><div class="col-md-2 col-md-offset-2"><h3 class="wjs_nTitle">全部新闻</h3></div><div class="col-md-1"><div class="wjs_newsLine hidden-xs hidden-sm"></div><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"><span class="wjs_icon wjs_icon_new01"></span></a></li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span class="wjs_icon wjs_icon_new02"></span></a></li><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><span class="wjs_icon wjs_icon_new03"></span></a></li><li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><span class="wjs_icon wjs_icon_new04"></span></a></li></ul></div><div class="col-md-7"><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home"><ul class="wjs_newslist"><li><a href=""><span class="hidden-xs">2016-01-22</span>【微公告】关于海航通宝22期项目募集期延长通知</a></li><li><a href=""><span class="hidden-xs">2016-01-22</span>【微动态】世纪佳缘与百合网的投资人首善财富董事长吴正新一行莅临微金所调研指导</a></li><li><a href=""><span class="hidden-xs">2016-01-22</span>【微动态】封面人物第六期 ▏万雅泉—— 手写心情的双鱼座美女</a></li><li><a href=""><span class="hidden-xs">2016-01-22</span>【微公告】2016年7月11日微金所平台系统升级维护公告</a></li><li><a href=""><span class="hidden-xs">2016-01-22</span>【微动态】微金所与前海航交所携手,正式推出安全优质的理财产品—海航金宝!</a></li><li><a href=""><span class="hidden-xs">2016-01-22</span>【微动态】微金所七月电脑节,激情狂欢理财好礼送不停!</a></li><li><a href=""><span class="hidden-xs">2016-01-22</span>【微还款】一周还款公告2016年7月11日-7月17日</a></li></ul></div><div role="tabpanel" class="tab-pane" id="profile">2</div><div role="tabpanel" class="tab-pane" id="messages">3</div><div role="tabpanel" class="tab-pane" id="settings">4</div></div></div></div></div></div><!-- 新闻块结束 --><!-- 合作块开始 --><footer class="wjs-partner"><div class="container"><h3>合作伙伴</h3><ul><li><a href="javascript:;" class="wjs_icon wjs_icon_partner01"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner02"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner03"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner04"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner05"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner06"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner07"></a></li><li><a href="javascript:;" class="wjs_icon wjs_icon_partner08"></a></li></ul></div></footer><!-- 合作块结束 --><script src="./lib/jquery/jquery.min.js"></script><script src="./lib/bootstrap/js/bootstrap.min.js"></script><script src="./js/iscroll.js"></script><script src="./js/wjs-index.js"></script>
</body></html>
common.css 文件
/*公共css样式*/body {font-family: "Microsoft YaHei", sans-serif;font-size: 14px;color: #333;
}a {text-decoration: none;color: #333;
}a:hover {text-decoration: none;color: #333;
}/*左边距*/.m_l10 {margin-left: 10px;
}/*右边距*/.m_r10 {margin-right: 10px;
}/*自定义字体*/@font-face {font-family: 'wjs';src: url('../fonts/MiFie-Web-Font.eot');/* IE9*/src: url('../lib/fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */url('../lib/fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */url('../lib/fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('../lib/fonts/MiFie-Web-Font.svg') format('svg');/* iOS 4.1- */
}/*自定义字体使用样式*/.wjs_icon {font-family: wjs;
}/*手机图标对应的编码*/.wjs_icon_phone::before {content: "\e908";
}/*电话图标对应的编码*/.wjs_icon_tel::before {content: "\e909";font-size: 14px;
}/*wjs logo*/.wjs_icon_logo::before {content: "\e920";
}/*wjs 文本*/.wjs_icon_text::before {content: "\e93e";
}.wjs_icon_new01::before {content: "\e90e";
}.wjs_icon_new02::before {content: "\e90f";
}.wjs_icon_new03::before {content: "\e910";
}.wjs_icon_new04::before {content: "\e911";
}.wjs_icon_partner01::before {content: "\e946";
}.wjs_icon_partner02::before {content: "\e92f";
}.wjs_icon_partner03::before {content: "\e92e";
}.wjs_icon_partner04::before {content: "\e92a";
}.wjs_icon_partner05::before {content: "\e929";
}.wjs_icon_partner06::before {content: "\e931";
}.wjs_icon_partner07::before {content: "\e92c";
}.wjs_icon_partner08::before {content: "\e92b";
}.wjs_icon_partner09::before {content: "\e92d";
}.wjs_iconn_E903::before {content: "\e903";
}.wjs_icon_E906::before {content: "\e906";
}.wjs_icon_E905::before {content: "\e905";
}.wjs_icon_E907::before {content: "\e907";
}.wjs_icon_E901::before {content: "\e901";
}.wjs_icon_E900::before {content: "\e900";
}.wjs_icon_E904::before {content: "\e904";
}.wjs_icon_E902::before {content: "\e902";
}.wjs_icon_E906::before {content: "\e906";
}
wjs-index.less 文件
@baseColor: #e92322;/* 头部块 */
.wjs-header {height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;.row {height: 100%;text-align: center;> div:nth-of-type(-n+3) {border-right: 1px solid #ccc;}.code {display: block;position: relative;> img {display: none;position: absolute;border: 1px solid #ccc;border-top: none;left: 50%;transform: translateX(-50%);top: 49px;}&:hover {> img {display: block;}}}> div:nth-last-of-type(1) {> .btn-danger {background-color: @baseColor;border-color: @baseColor;}> .btn {padding: 3px 15px;}> .btn-link {text-decoration: none;color: #aaa;}}}
}/*导航条*/
.wjs-nav {&.navbar {margin-bottom: 0;}.navbar-brand {height: 80px;line-height: 50px;font-size: 40px;> span:nth-of-type(1) {color: @baseColor;}> span:nth-of-type(2) {color: #333;}}.navbar-toggle {margin-top: 23px;;}.navbar-nav {> li {height: 80px;> a {height: 80px;line-height: 50px;font-size: 16px;&:hover, &:active {color: #777;border-bottom: 3px solid @baseColor;}}}.active {a,a:hover,a:active {background-color: transparent;border-bottom: 3px solid @baseColor;}}}
}/*轮播图*/
/*
w<768px-移动端:图片会随着屏幕的缩小自动适应--缩小img的宽度为100%,通过img标签来实现w>=768px:图片做为背景,当屏幕宽度变宽的时候,会显示更多的图片的两边区域1.background-image添加图片2.添加background-position:center center3.background-size:cover
*/
.wjs-banner {.bigImg {width: 100%;height: 410px;/*去除图片基线*/ display: block;background-position:center center;background-size: cover;}.smallImg {// width: 100%;// display: block;img {width: 100%;/*去除图片基线*/ display: block;}}
}/*信息块*/
.wjs-info {padding: 20px;.wjs_icon {font-size: 26px;}.row {> div {margin: 10px 0;> a:hover {color: @baseColor;}}}
} /*预约块*/
.wjs-reverse {height: 60px;line-height: 60px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;.wjs_icon {font-size: 18px;}a:hover {color: @baseColor;}.col-sm-9 {> a:last-of-type {color: @baseColor;border-bottom: 1px dashed @baseColor;}}
}/*产品块*/
.wjs-product{clear: both;background-color: #eee;li {height: 100px;line-height: 100px;padding: 0 10px;> a {margin: 0;border: none;line-height: 50px;}a:hover {border: none;border-bottom: 3px solid @baseColor;}&.active {> a,a:hover,a:focus{background-color: transparent;border: none;border-bottom: 3px solid @baseColor;}}}
}/*产品块*/
.wjs-product {.tabs-parent {width: 100%;overflow: hidden;}.wjs-pBox {height: 100%;background-color: #fff;margin-top: 20px;position: relative;box-shadow: 1px 1px 5px #ccc;> .wjs-pLeft {height: 100%;margin-right: 100px;padding: 10px 0;font-size: 12px;position: relative;> p {font-size: 16px;text-align: center;}.row {margin-left: 0;margin-right: 0;> div:nth-of-type(even) {text-align: right;}}}> .wjs-pRight {width: 100px;height: 100%;position: absolute;right: 0;top: 0;border-left: 1px dashed #ccc;text-align: center;padding-top: 40px;> .wjs-pRight-tip {width: 100%;span {font-size: 12px;border-radius: 3px;cursor: pointer;}span:first-of-type {border: 1px solid @baseColor;color: @baseColor;}span:last-of-type {border: 1px solid blue;color: blue;}}> b {font-size: 40px;color: @baseColor;}> sub {bottom: 0;color: @baseColor;}&::before, &::after {content: "";width: 10%;height: 10px;border-radius: 5px;background-color: #eee;position: absolute;left: -5px;}&::before {top: -5px;}&::after {bottom: -5px;}}&.active {background-color: @baseColor;.wjs-pLeft {color: #fff;&::before {content: "\e915";font-family: "wjs";position: absolute;left: 0;top: -4px;font-size: 26px;}}.wjs-pRight {b,sub,p {color: #fff;}} }}
}/*新闻块*/
.wjs-news {padding: 20px;.wjs_nTitle{line-height:50px;font-size: 25px;border-bottom: 1px solid #ccc;text-align: center;position: relative;&::before{content: "";width: 8px;height: 8px;border-radius: 4px;border: 1px solid #ccc;position: absolute;bottom: -4px;right: -8px;}}/*设置li元素间的虚线*/ .wjs_newsLine {width: 1px;height: 100%;position: absolute;border-left: 1px dashed @baseColor;left:45px;top:0;}.nav-tabs {border-bottom: none;> li {margin-bottom:60px;> a {background-color: #ccc;width: 60px;height: 60px;border: none;border-radius: 50%;}> a:hover {border: none;background-color: @baseColor;}&.active {> a {border: none;background-color: @baseColor;}}.wjs_icon{font-size: 30px;color: #fff;}}> li:last-of-type {margin-bottom: 0;}/*媒体查询设置li元素的样式*/@media screen and (min-width: 768px) and (max-width: 992px) {li {margin: 20px 30px;}} @media screen and (max-width: 768px) {li {margin: 20px 0;width: 25%;}} }.tab-content {.wjs_newslist {list-style: none;> li {line-height:60px;}}}
} /*合作块*/
.wjs-partner {background-color: #eee;padding: 20px;text-align: center;h3 {width: 100%;}ul {list-style: none;display: inline-block;> li {float: left;margin: 0 15px;}.wjs_icon {font-size: 80px;}}
}
wjs-index.js 文件
$(function () {// 获取所有的item元素var items = $(".carousel-inner .item");// 当屏幕大小改变的时候,动态创建图片// triggle函数表示页面在第一次加载的时候,自动触发一次。$(window).on("resize", function () {// 判断屏幕的大小,以决定加载大图还是小图var screenWidth = $(window).width();// 添加大屏幕的图片if (screenWidth >= 768) {// 为每个item添加大图片items.each(function (index, value) {// 获取每个item的图片,使用data()获取自定义属性var imgSrc = $(this).data("largeImage");// 使用插入小图片的方法不可以,因为路径符号会被解析成空格$(this).html($('<a href="javascript:;" class="bigImg"></a>').css("backgroundImage", "url('" + imgSrc + "')"));});// 添加小屏幕的图片} else {// 为每个item添加小图片items.each(function (index, value) {// 获取每个item的图片,使用data()获取自定义属性var imgSrc = $(this).data("smallImage");$(this).html('<a href="javascript:;" class="smallImg"><img src="' + imgSrc + '"></a>');});}}).trigger("resize");// 实现滑动轮播效果// 实现滑动轮播可以可以直接调用插件的点击按钮上下切换的功能// 获取滑动区域的元素var carouselInner = $(".carousel-inner");var carousel = $(".carousel");var startX, endX;// 给元素添加touchstart和touchend事件carouselInner[0].addEventListener("touchstart", function (e) {startX = e.targetTouches[0].clientX;});carouselInner[0].addEventListener("touchend", function (e) {endX = e.changedTouches[0].clientX;// endX - startX > 10px 证明往右滑动if (endX - startX > 10) {carousel.carousel("prev");} else if (startX - endX > 10) {carousel.carousel("next");}});// 产品块的宝,北标签的鼠标悬停效果$('[data-toggle="tooltip"]').tooltip();// 设置产品块的标签栏在移动端时可以滑动var ulProduct = $(".tabs-parent .nav-tabs");var liProducts = ulProduct.children("li");var totleWidth = 0;liProducts.each(function (index, element) {/*获取宽度的方法的说明:* width():它只能得到当前元素的内容的宽度* innerWidth():它能获取当前元素的内容的宽度+padding* outerWidth():获取当前元素的内容的宽度+padding+border* outerWidth(true):获取元素的内容的宽度+padding+border+margin*/totleWidth += $(element).innerWidth();});ulProduct.width(totleWidth);// 使用iScroll插件实现滑动效果/*使用插件实现导航条的滑动操作*/var myScroll = new IScroll('.tabs-parent', {/*设置水平滑动,不允许垂直滑动*/scrollX: true,scrollY: false});
});
6、代码说明
使用到的技术点:
- 大面积使用 bootstrap 的
.container
+.row
+.col-xx-xx
的布局,构成响应式布局结构; - 在某些屏幕尺寸下不显示,使用
hidden-xx
; - 字体图标的使用;
- 导航条样式直接使用 bootstrap 组件中的导航条样式修改而成。
- 轮播图直接使用 bootstrap js插件下的 Carousel (轮播图)插件。
由于需要轮播图效果:
w<768px-移动端:图片会随着屏幕的缩小自动适应–缩小
实现方式:img的宽度为100%,通过img标签来实现。
w>=768px:
图片做为背景,当屏幕宽度变宽的时候,会显示更多的图片的两边区域
实现方式:
1.background-image添加图片
2.添加background-position:center center;
3.background-size:cover;
所以不能在 html 中直接添加代码的方式,只能通过 js 动态插入图片或背景图的方式。
- 信息块的制作可以使用 bootstrap 组件的媒体对象来做,实现左边为图标,右边为文字说明的样式;
- 产品块的制作可以使用 bootstrap js插件下的标签页修改得到,而且为了实现在小屏幕下的滑动效果,引入了
iScroll 插件。
产品块中“宝北”的添加:
- 添加两个文本
- 宝 北 两个字应该是一个整体,所以使用div包含
- 添加两个字之后,不应该破坏之前的元素的布局,所以可以让div进行定位
- 设置div的水平居中,垂直方向的偏移可以使用top实现
- 添加文本的颜色和边框
添加工具提示 - 添加工具提示,可以修改类型为span
type=“button”:说明当前工具提示的类型,类型默认是按钮,如果不需要,可以修改为其它任意的元素类型
data-toggle=“tooltip”:说明当前插件/组件是一工具提示
data-placement=“top”:提示出现的位置
title=“提示文本”
- 工具提示会默认的生成一个新的div标签,只不过默认的文本显示会换行,原因是新添加的标签的宽度是参照父容器的
,应该将父容器div的宽度设置为100%。 - 记得对工具提示进行初始化
$('[data-toggle="tooltip"]').tooltip();
- 新闻块同产品块一样,也是使用 bootstrap js插件下的标签页修改得到,值得注意的是,在不同屏幕大小下,的显示方式不同,所以在css样式中使用到了媒体查询的方式。
最后
还有2件事拜托大家
一:求赞 求收藏 求分享 求留言,让更多的人看到这篇内容
二:欢迎添加我的个人微信
备注“资料”, 300多篇原创技术文章,海量的视频资料即可获得
备注“加群”,我会拉你进技术交流群,群里大牛学霸具在,哪怕您做个潜水鱼也会学到很多东西
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 深度 | 申报企业下半年锐减,科创板要啥样的硬科技?
自2019年7月22日首批企业上市,科创板已平稳运行四个多月。一个不可忽视的现状是,在经过上半年的冲刺后,下半年整体申报企业数量出现锐减,市场开始担忧后续供给力量不足。据财新记者统计,自3月22日科创板开始受理企业申报以来,首月共有28家企业申报;4月70家申请,达到申报…...
2024/3/19 8:49:55 - 德媒预测:中国经济下个十年将超越美国
参考消息网12月12日报道 德国《世界报》网站12月9日发表题为《下个十年世界经济将发生重大变化》的文章称,主要经济体排行榜将在下个十年发生根本性变化,中国将超越美国。文章称,再过几周,新的十年就要开始了。上世纪20年代是一个繁荣期,因此后来被称为“黄金20年…...
2024/3/19 8:49:53 - 汇丰银行协助客户逃避巨额税金,被美国罚款1.9亿美元
据俄罗斯卫星网12日报道,自2008年金融危机爆发以来,汇丰银行一直深陷丑闻。这家银行一直试图走出困境,把丑闻抛在身后。然而该银行的瑞士私人银行部门近日承认帮助个人和公司逃税,并同意向美国司法部支付1.92亿美元罚金。美国联邦检察官表示,总部位于日内瓦的汇丰私人银行…...
2024/3/27 8:46:52 - 分布式事务问题解决方案
在分布式系统中,同时满足“一致性”、“可用性”和“分区容错性”三者是不可能的。分布式系统的事务一致性是一个技术难题,各种解决方案孰优孰劣?老司机介绍丁浪,现就职于某垂直电商平台,担任技术架构师。关注高并发、高可用的架构设计,对系统服务化、分库分表、性能调优…...
2024/3/24 8:51:53 - JQData | 股市估值分析,带你穿越资本市场迷雾
投资最重要的事 -- 估值投资最重要的是什么?答:判断“胖瘦”的能力。巴菲特:对面过来一个200斤的人,你不需要一台体重秤,也该知道他是胖子。 要想做好投资,你该知道自己心仪的标的到底是贵还是便宜。在资本市场,判断“胖瘦”的能力,我们也叫估值。没有估值,没有识别贵…...
2024/3/19 8:49:46 - Bridge使用教程:从macOS上的设备导入照片
今天分享的是Bridge使用教程:从macOS上的设备导入照片,在macOS上,Bridge提供了附加选项“ 文件”>“从设备导入”以从设备导入媒体。当您在macOS上工作时,此选项的导入设置受到限制,可以用作“ 文件”>“从相机获取照片”选项的替代选项。在macOS上,Bridge提供了附加…...
2024/3/19 7:41:00 - 一部手机即可轻松玩转抖音四大主流变现方式——匀思电商
前几天,一位毕业不到五年的好友小李发了条朋友圈:“现在出门坐车太不方便了,还是买一辆奔驰E300来代步吧。”看到这后半句话,老思机陷入了沉思,分不清心里是羡慕还是嫉妒。 09年炒房子,你说你没有资金; 13年写公众号,你说你没有文笔; 现如今,短视频赚钱,只需要一部人人…...
2024/3/25 15:14:14 - Python量化交易平台:JQData | API使用文档(转)
Python量化交易平台:JQData | API使用文档(转)#原文地址:https://www.joinquant.com/help/api/help?name=JQData JQData说明书 由于内容较多,可使用Ctrl+F搜索您需要的数据。 注意:query函数的更多用法详见:query简易教程JQData是什么 JQData是聚宽数据团队专门为金融机…...
2024/3/29 4:54:32 - java-多线程的状态以及状态之间的转换
点赞收藏分享文章举报吃桃子不吐葡萄皮发布了58 篇原创文章 获赞 17 访问量 755私信关注...
2024/3/27 19:06:46 - 新程序员的七宗罪
前言: 当我发表这篇文章《为什么每个工程师都应该开始考虑开发中的分析和编程技能呢?》时,我从未想到它会对读者产生如此积极的影响。那些想要开始探索编程和数据科学领域的人向我寻求建议;还有一些人问我下一篇文章的发布日期;还有许多人询问如何顺利过渡到这个职业。我非常…...
2024/3/19 8:49:35 - centos7安装lmnp环境
yum安装 lnmp (linux+nginx+php7.1+mysql5.7) 1、第一步先更新yum update 2、yum安装nginx 安装nginx最新源: yum localinstall http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm yum repolist enabled | grep “nginx*” 安装n…...
2024/3/27 0:52:56 - Redis的过期策略和内存淘汰机制
过期策略我们set key的时候,都可以给一个expire time,就是过期时间,指定这个key比如说只能存活1个小时,我们自己可以指定缓存到期就失效。 如果假设你设置一个一批key只能存活1个小时,那么接下来1小时后,redis是怎么对这批key进行删除的? 答案是:定期删除+惰性删除 所谓…...
2024/3/26 11:41:06 - 【Python】python安装步骤
python安装步骤 借用百度来的步骤做记录。 第一步:下载Python安装包 在Python的官网 www.python.org 中找到最新版本的Python安装包,点击进行下载,请注意,当你的电脑是32位的机器,请选择32位的安装包,如果是64位的,请选择64位的安装包; 第二步:安装 A.双击下载好的安装…...
2024/3/28 22:43:01 - AOE工程实践-银行卡OCR里的图像处理
近期我们开发了一个银行卡 OCR 项目。需求是用手机对着银行卡拍摄以后,通过推理,可以识别出卡片上的卡号。 工程开发过程中,我们发现手机拍摄以后的图像,并不能满足模型的输入要求。以 Android 为例,从摄像头获取到的预览图像是带 90 度旋转的 NV21 格式的图片,而我们的模…...
2024/3/19 8:49:26 - Spring核心详解!!!
Spring核心详解!!! Spring出现的原因? Spring出现的原因 解除耦合 软件开发的开闭原则:通过多态实现,要么子类重写父类,要么增加方法 提高抽象层次; 提高抽象层次的方法 把子类对象赋给父类对象进行使用的动态多态 注入Injection:某一个类想要什属性,通过set方法给他 就叫注…...
2024/3/26 8:15:17 - 数据库学习总结
数据库 第一节 MySQL介绍和安装 mysql安装简单总结 #1、下载:MySQL Community Server 5.7.16 http://dev.mysql.com/downloads/mysql/#2、解压 如果想要让MySQL安装在指定目录,那么久将解压后的文件夹移动到指定目录,如:C:\mysql-5.7.16-winx64#3、添加环境变量 【右键计算…...
2024/3/25 15:06:04 - Spring IOC容器
在 Spring IOC 容器读取 Bean 配置创建 Bean 实例之前, 必须对它进行实例化. 只有在容器实例化后, 才可以从 IOC 容器里获取 Bean 实例并使用。 Spring 提供了两种类型的 IOC 容器实现:BeanFactory: IOC 容器的基本实现 ApplicationContext: 提供了更多的高级特性. 是 BeanFac…...
2024/3/21 23:50:06 - vue性能优化
最近用vue-cli3搭建项目,由于项目比较大,业务逻辑比较多,导致了打包后文件比较大,导致首页页面白屏时间过长,用户体验不友好,可以往下面几个方法进行处理。js,css代码的最小化压缩和分割 核心组件的cdn加载 路由和组件懒加载 gzip的压缩 去除console.log 公共代码抽离js,…...
2024/3/22 23:46:17 - LeetCode-89、格雷编码-中等
LeetCode-89、格雷编码-中等格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个位数的差异。给定一个代表编码总位数的非负整数 n,打印其格雷编码序列。格雷编码序列必须以 0 开头。示例 1:输入: 2 输出: [0,1,3,2] 解释: 00 - 0 01 - 1 11 - 3 10 - 2对于给定…...
2024/3/27 19:06:36 - Java设计模式之单例模式
文章目录1.概述2.实现单例模式的两种方法(1)饿汉单例模式(2)懒汉单例模式3.单例模式的优点4.单例模式使用场景5.单例模式注意事项 1.概述什么是单例模式 定义:确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例 单例模式包括: 1.私有的构造方法 2.指向自己实例…...
2024/3/29 0:03:05
最新文章
- 如何使用C语言进行异常处理?C语言中的可变参数函数
一、如何使用C语言进行异常处理? 在C语言中,并没有像C或Java等语言那样内置的异常处理机制。C语言主要依赖于返回值、错误码以及条件编译指令来进行错误处理。然而,你仍然可以通过一些方法模拟异常处理的行为。 一种常见的模拟异常处理的方…...
2024/3/29 9:40:50 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 制作一个RISC-V的操作系统七-UART初始化(UART NS16550A 规定 目标 发送数据 代码 extern)
文章目录 UARTNS16550A规定目标发送数据代码extern UART 对应到嵌入式开发中,qemu模拟的就是那块开发板(硬件) 电脑使用qemu时可以理解为qemu模拟了那块板子,同时那块板子与已经与你的电脑相连接了(我们对应的指定的内…...
2024/3/29 7:08:16 - 流畅的 Python 第二版(GPT 重译)(九)
第四部分:控制流 第十七章:迭代器、生成器和经典协程 当我在我的程序中看到模式时,我认为这是一个麻烦的迹象。程序的形状应该只反映它需要解决的问题。代码中的任何其他规律性对我来说都是一个迹象,至少对我来说,这表…...
2024/3/28 2:16:16 - 基于python+vue智慧社区家政服务系统的设计与实现flask-django-nodejs
论文主要是对智慧社区家政服务系统进行了介绍,包括研究的现状,还有涉及的开发背景,然后还对系统的设计目标进行了论述,还有系统的需求,以及整个的设计方案,对系统的设计以及实现,也都论述的比较…...
2024/3/28 0:12:18 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/3/27 10:21:24 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/3/24 20:11:25 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/3/29 2:45:46 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/3/24 20:11:23 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/3/29 5:19:52 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/3/28 17:01:12 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/3/24 5:55:47 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/3/29 1:13:26 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/3/29 8:28:16 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/3/29 7:41:19 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/3/24 20:11:18 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/3/28 9:10:53 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/3/29 0:49:46 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/3/24 20:11:15 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/3/27 7:12:50 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/3/24 20:11:13 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/3/26 11:21:23 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/3/28 18:26:34 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/3/28 12:42:28 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/3/28 20:09:10 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57