CSS+div网页设计 电脑浏览器打开网页正常 但手机浏览器打开col-sm-4位置乱了

如题,电脑浏览器打开网页正常,但手机浏览器打开原先在一行的两个col-sm-4变成了两行,如图

这是用电脑上的浏览器打开的,都正常

图片说明

但是用手机的qq浏览器打开位置就乱了,电脑打开发大300%也会乱。

图片说明

相关代码:

图片说明

还请会的小伙伴不吝赐教~~感谢~~

6个回答

首先,浏览器不同对css+div的支持也不同,其次你的布局有没有做适配操作呢?不同分辨率下布局肯定也是不一样的,做了适配后统一用%来分配长高(具体做法可在网上找),
最后,bootstarp里面的css是可以根据自己的需求来改的,它里面都是用的px来做单位。根据上面三步的操作后一套界面便可以在手机、电脑、平版都浏览器上运行咯

图片说明

weixin_35706605
C 那我如果想要手机和电脑上的浏览器都可以访问呢,难道要做两份网站吗,(ㄒoㄒ)
2 年多之前 回复

你这个是用的bootstarp搭建网站,这是一个响应式的插件,严格来说手机和网页应该做两套,但是开发成本太高,所以很多公司采用响应式开发只需要一套

外层div设置成12 ,里面3个分别设置成4

首先你要知道,我们在写响应式网站的时候,普遍来说,都是禁止缩放的。也就是禁止你做的缩放行为。因为响应式也无法解决缩放网页的情况下很好的把网页适配到屏幕中去。
使用bootstarp编写响应式就OK了,不用考虑缩放情况,而且假设你的网页可以缩放,那么当字体放大的几十倍后,一个手机屏幕一个字都显示不完,你要让程序怎么响应?

具体怎么禁止网页缩放,只需要一两行代码就行了。具体的你百度一下就知道了。

打字不容易,如果有用,麻烦结帖给分,谢谢!

使用rem来做单位div使用百分比 做成自适应

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
CSS+div网页设计 电脑浏览器打开网页正常 但手机浏览器打开col-sm-4位置乱了
如题,电脑浏览器打开网页正常,但手机浏览器打开原先在一行的两个col-sm-4变成了两行,如图 这是用电脑上的浏览器打开的,都正常 ![图片说明](https://img-ask.csdn.net/upload/201708/29/1503987302_16089.jpg) 但是用手机的qq浏览器打开位置就乱了,电脑打开发大300%也会乱。 ![图片说明](https://img-ask.csdn.net/upload/201708/29/1503987781_174453.png) 相关代码: ![图片说明](https://img-ask.csdn.net/upload/201708/29/1503987467_10180.jpg) 还请会的小伙伴不吝赐教~~感谢~~
css设计的样式在IE浏览器显示正常但是在谷歌浏览器显示不对
css设计的样式在IE浏览器显示正常但是在谷歌浏览器显示不对,例如在IE浏览器下字体正常但是在谷歌浏览器下字体粗细不同
CSS+div网页设计,放大缩小后网页控件乱序的问题
最近在学习用VS2010设计网站,网站设计好之后看着没有什么问题,但是在浏览器上放大或者缩小页面之后里面的div位置就乱了,有没有大神知道怎么固定他们的位置啊,我想实现的是放大页面,本来在一行的两个div也不会变成两行,而是出现上下和左右的滑动条,缩小页面,整个页面就缩小且靠右上,右边和下边留白。 大概就像这样: ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503905632_912821.jpg) ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503905652_140320.jpg) 请问会的人这怎么修改呀,十分感谢, 另外我的网页比较简单,只有div和ul,li的嵌套等等。附上代码吧。 ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503905954_146074.jpg) ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503905964_113245.jpg) <head>中也只定义了background,color,margin,padding,width,heigth等基本属性,没有其他特别的。不过有的width是**px,有的是**%。不知道影响没。 还请大家不吝赐教,实在感谢!
浏览器打开html文件,其中引入的css为什么无法加载?
test.html如下: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <span class="txt">hello</span> </body> </html> ``` test.css如下: ``` .txt { background-color: #eee; } .txt::before { content: "world!"; } .txt { color: red; } ``` *test.html* 文件代码如上图,浏览器打开后css样式却加载不出来(css路径没问题)。 然后,我又新建了一个 *test2.html* ,将 *test.html* 代码全选复制了进来,用浏览器打开 *test2.html* ,css成功加载了。 两个html都是同样的代码,为什么 *test2.html* 好使,*test1.html* 的css却加载不出来**???**
DIV + CSS设计中的DIV是指的html中的div标签吗?
在DIV+CSS设计中的DIV如果是div标签的话, 那么DIV+CSS的意思就是换行标签与层叠样式表。 这个意思好像有些别扭。
div+css 如何实现页面随浏览器窗口伸缩而变化
浏览器的页面缩小,页面的内容也接着缩小。 使得用户在不放大窗口的情况下浏览全局。 具体的能说下关键代码或思路吗
CSS+div网页设计,导航栏随页面上下滚动,导航栏宽度变化
最近在学习网站设计,在制作导航栏随网页上下滚动的时候,出现了一些错误,希望懂的小伙伴可以帮忙看一下。 我的错误如下: 当页面打开后导航栏是这样的: ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927175_356851.jpg) 但是页面向下拉的时候,虽然导航栏也跟着向下滑动了,但是导航栏的宽度发生了变化: ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927200_304258.jpg) 而我想他的样式不变, 相关代码如下,其中由于我想使页面在放大缩小的时候是同比例的放大缩小,所以设置了导航栏宽度为12%,内容的宽度是88%,且他们两个div外的总div宽度是1210px;这个我不想改变,不知道其他哪里出了问题,希望知道办法的小伙伴不吝赐教,实在感谢~ ![图片说明](http://img..csdn.net/upload/201708/28/1503927402_761154.jpg) ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927460_937460.jpg) ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927472_130945.jpg)
css div 急速模式和兼容模式中浏览出现布局问题
div+css 如下 <div> <div id="HeadLeft"> <div class="inner"></div> </div> <div id="HeadContent"> <div class="inner"></div> </div> <div id="HeadRight"> <div class="inner"></div> </div> //css <style type="text/css"> #HeadLeft, #HeadRight { float: left; margin: 0 0 0 -490px; width: 50%; height: 335px; } #HeadContent { width: 980px; float: left; background: green; height: 335px; background-image: url('../Images/HeadContent.jpg'); } #HeadLeft .inner { height: 335px; margin: 0 0 0 490px; background-image: url('../Images/bg左.jpg'); } #HeadRight .inner { height: 335px; margin: 0 0 0 490px; background-image: url('../Images/bg右.jpg'); } </style> 详细效果 http://zhidao.baidu.com/question/1701813123007867100.html?sort=6#answer-1603821885 浏览效果 在360急速模式下如下图,没问题。 但是在兼容模式下,出现错位问题。 在网站没发布的时候,兼容模式,急速模式浏览都没问题,发布后就出现以上问题!
帮我看下这个网页中的三个图片div的大小和位置怎么更改设置
我想更换几张大图,但是无论放多大的图片都会局限在这个边框里,怎么样才能更改所放图片的大小和位置呢? ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577260837_900227.png) 下边的图其实我放了一张很大的图,但是都会按比例缩放到这个位置,怎么才能更改默认图片的长宽?和位置? ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577260847_818926.png) ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3鼠标悬停图片遮罩层动画特效</title> <!--bootstrap布局框架--> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /> <!--字体图标样式--> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"> <style> body{background-color: #353535} .box { font-family: 'Ubuntu', sans-serif; overflow: hidden; position: relative; transition: all 0.3s; } .box:hover { box-shadow: 0 0 15px -5px #000; } .box:before { content: ''; background-color: transparent; background-image: radial-gradient(circle at 20% 80%, transparent 29%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 33%, transparent 34%), radial-gradient(circle at 80% 20%, transparent 29%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 33%, transparent 34%); background-size: 30px 30px; height: 100%; width: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; transition: all 0.3s ease 0.2s; } .box:hover:before { opacity: 1; } .box img { width: 100%; height: auto; transition: all 0.3s ease 0s; } .box:hover img { filter: blur(2px); } .box .box-content { color: #fff; background-color: rgba(0,0,0,0.6); text-align: center; width: 100%; height: 59%; padding: 18% 0 0 0; position: absolute; left: 0; top: -100%; z-index: 2; transition: all 0.3s ease 0s; } .box:hover .box-content { top: 0; } .box .title { color: #fff; font-size: 23px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0; } .box .post { color: #32c287; font-size: 14px; font-style: italic; text-transform: capitalize; letter-spacing: 2px; } .box .icon { background: rgba(50,194,135,0.6); text-align: center; height: 39%; width: 100%; padding: 15px 0 0; margin: 0; list-style: none; transform: translateX(50%); position: absolute; right: 50%; bottom: -100%; z-index: 1; transition: all 0.3s; } .box:hover .icon { bottom: 0; } .box .icon li { display: inline-block; margin: 0 3px; } .box .icon li a { color: #32c287; background-color: #fff; font-size: 18px; line-height: 40px; height: 40px; width: 40px; border-radius: 40%; display: block; transition: all 0.3s; } .box .icon li a:hover { color: #fff; background-color: #04a562; box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 5px rgba(0,0,0,0.5) inset; } @media only screen and (max-width:990px) { .box { margin-bottom: 30px; } } @media only screen and (max-width:479px) { .box .title { font-size: 20px; } } </style> </head> <body> <h4 style="text-align: center; color: aliceblue;line-height: 50px">CSS3图片鼠标悬停动画特效 <span>Hover Effect Style</span></h4> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-1.jpg" alt=""> <div class="box-content"> <h3 class="title">餐饮软件</h3> <span class="post">web developer</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-2.jpg" alt=""> <div class="box-content"> <h3 class="title">零售软件</h3> <span class="post">web designer</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-3.jpg" alt=""> <div class="box-content"> <h3 class="title">会员系统</h3> <span class="post">web developer</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源:<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html> ```
网页设计,在IE浏览器上可以正常输入,但其他浏览器上无法正常使用输入栏。大神们帮忙看看,马上要交的作业,急。
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小学数学练习</title> <style type="text/css"> #big_frame{ line-height:45px; vertical-align:middle; margin:40px auto; } #frame1{ border-width:1px; border-style:solid; border-color;#a16c; width:544px; height:50px; } #frame1 div{ border-width:1px; border-style:solid; border-color;#a16c; border-top:none; border-bottom:none; border-left:none; width:108px; height:50px; float:left; line-height:45px; vertical-align:middle; background-color: skyblue; } #frame2{ border-width:1px; border-style:solid; border-color:black; background-color:lightblue; width:544px; display:none; border-top:none; } #result_inp{ background-color: skyblue; } #frame3{ border-width:1px; border-style:solid; border-color;#a16c; border-top:none; width:544px; height:50px; background-color:whitesmoke; line-height:45px; } #frame3 button{ float:center; width:110px; height:30px; border-radius:20px; border-color: lightblue; line-height:20px; vertical-align:middle; background-color: skyblue; } div#div1{ position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1; } div#div1 > img { height:100%; width:100%; border:0; } } </style> <script> var left_num; var op; var right_num; var result; var count; var remain; var i=1; var sign; var answer; var tanswer = 0; onload = function(){ left_num = document.getElementById("left_num"); op = document.getElementById("op"); right_num = document.getElementById("right_num"); result = document.getElementById("result"); } function join(){ tanswer = 0; i = 1; document.getElementById("result_inp").disabled = false; document.getElementById("result_inp").readOnly = false ; result_inp.value = " "; document.getElementById("frame2").innerHTML = " "; frame2.style.display = "none"; var temp = Number(prompt("你想在这练习几道题?","")) if(!temp){ alert("你输入的操作不正确") } else{ count = temp; remain = count; join_btn.disabled = true; start_btn.disabled = null; } } function start(){ start_btn.disabled = true; creatQuestion() document.getElementById("left_num").innerHTML=left_num ; document.getElementById("right_num").innerHTML= right_num ; document.getElementById("op").innerHTML= sign ; result_inp.focus(); } function creatQuestion(){ op = Math.floor(Math.random()*4); switch(op) { case 0: sign = " + "; left_num= Math.floor(10+Math.random()*90); right_num = Math.floor(10+Math.random()*90); answer = eval(left_num + right_num); break; case 1: sign = " - "; right_num = Math.floor(10+Math.random()*90); left_num=right_num + Math.floor(10+Math.random()*90); answer = eval(left_num - right_num); break; case 2: sign = " ×"; left_num = Math.floor(10+Math.random()*90); right_num = Math.floor(10+Math.random()*90); answer = eval(left_num * right_num); break; case 3: sign = " ÷"; right_num= Math.floor(10+Math.random()*90); left_num = right_num * Math.floor(1+Math.random()*10); answer = eval(left_num / right_num); break; } } function inp(){ var code=event.keyCode; var you_answer = result_inp.value ; document.getElementById("result_inp").readOnly = false; var signtf; if ((code < 48 && code != 13) || (code > 57 && code <96) || code > 105 ){ result_inp.value =result_inp.value.substring(0,result_inp.value.length-1); } else if(code == 13){ if(answer == you_answer) { signtf = "真棒!你做对啦!";tanswer += 1;} else { signtf = "做错啦,是不是粗心啦?";} tanswer += 1;document.getElementById("frame2").innerHTML += "第" + i +"题:" +signtf + " ,正确答案:" + answer + ", 你的答案: " + you_answer +" <br / >"; i = i +1; result_inp.value = ""; remain--; if(remain != 0){ creatQuestion(); document.getElementById("left_num").innerHTML=""+left_num+"" ; document.getElementById("right_num").innerHTML= ""+ right_num +"" ; document.getElementById("op").innerHTML= ""+ sign +"" ; } else{ result_inp.value="已完成"; document.getElementById("result_inp").readOnly = "true" ; show_btn.disabled = null; var grade; grade = Math.floor(tanswer / count * 100); document.getElementById("frame2").innerHTML += "满分为一百,你得到的分数为:" + grade + "分" + " <br / > 小朋友再接再厉哦!"; document.getElementById("result_inp").disabled = "true"; } } } function compute(){ frame2.style.display = "block"; show_btn.disabled = true; join_btn.disabled = null; } </script> </head> <body > <div id="div1"><img src="111.jpg" /></div> <div id="big_frame" align="center"> <div id="frame1"> <div id="left_num"></div> <div id="op"></div> <div id="right_num"></div> <div >=</div> <div id="result" style="border-right:none"> <input id= "result_inp" type="text" style="width:106px;height:47px; border: 0;" value="" readonly onkeyup="inp()" > </div> </div> <div id="frame2"> </div> <div id="frame3" > <button id="join_btn" onclick="join()" >参加测试</button> <button id= "start_btn" disabled onclick="start()" >开始出题</button> <button id= "show_btn" disabled onclick="compute()">显示结果</button> </div> </div> </body> </html> ```
HTML/CSS 关于<div>然后接受并且显示传过来的值
![图片说明](https://img-ask.csdn.net/upload/201912/26/1577351589_338259.png) 红色的地方,我传过来一个名字的参数,然后添加到“申请人签名:”后面 ``` <div style="float: right;">申请人签名:</div> ```
手机端UC浏览器和手机自带的浏览器不显示部分内容
目前写了一个手机端的html,往常都是可以正常显示内容的,但是这次写的却有部分怎样都不显示,但是主要是在UC浏览器和手机自带的浏览器不显示,其他浏览器如百度,QQ,firefox,chrome都正常显示的。 ``` <p id="adv_tit">优势与支持&nbsp;▼</p> <p class="adv_titt">—&nbsp;4大优势&nbsp;—</p> <div class="adv_back"> <div class="adv_con"> <div class="adv_left"> <p>款式多样</p> <p><span>80+</span>款桑拿房,<span>60+</span>款湿蒸房,尺寸多样,<span>款式齐全</span></p> </div> <div class="adv_right"> <p>厂家直销</p> <p>工厂占地<span>7万</span>平米,集研发,生产,销售一体,厂家直销,<span>欢迎参观</span></p> </div> </div> <img src="images/Index/adv.jpg" alt="" id="adv_img"> <div class="adv_con"> <div class="adv_left"> <p>24年经验</p> <p>建于<span>1995年,</span>24年生产服务经验,确保产品质量与<span>销售服务</span></p> </div> <div class="adv_right"> <p>安全安心</p> <p>产品贴合人体设计,<span>安全漏电开关保护,</span>安全指标认证,<span>健康安心</span></p> </div> </div> </div> <p class="adv_titt" style="margin-top: 2em;">—&nbsp;3大支持&nbsp;—</p> <div class="adv_back"> <div id="adv_mid"> <div>水电图纸</div> <p>根据现场基建环境,<span>0元</span>提供<span>专属水电图纸</span></p> </div> <div class="adv_con" id="support"> <div class="adv_left"> <p>经验丰富</p> <p>安排我厂<span>10年</span>以上经验师傅<span>上门安装,</span>指导建议</p> </div> <div class="adv_right"> <p>专车运输</p> <p>专车运输,破损赔付,<span>无忧送货安装</span></p> </div> </div> </div> ``` ## CSS: ``` #adv_tit{width: 26%;text-align: center;color: #fff;background:#ff7c08;font-size: 1em;padding:0.2em 0.5em;margin-left: 1.5625%;line-height: 1.2em;margin-top:2.7778em;margin-bottom: 1.5em;} .adv_titt{width: 100%;background:#ff7c08;text-align: center;color: #fff;font-size: 1.1em;font-weight: bold;height: 1.6842em;margin-bottom: 1.5em;box-sizing: border-box;padding-top: 0.3em;} .adv_back{width: 100%;overflow: hidden;} .adv_con{width: 100%;overflow: hidden;position: relative;} .adv_left{float: left;width: 35%;margin-left:1.5625%; } .adv_right{float: right;width: 35%;margin-right: 1.5625%;} .adv_left p:nth-child(1),.adv_right p:nth-child(1){width: 70%;border-bottom: 0.05em dashed #000;color: #ff7c08;font-size: 1.043478em;font-weight: bold;padding-bottom: 0.3em;margin-bottom: 0.3em;} .adv_left p{text-align: left;} .adv_right p{text-align: right;} .adv_right p:nth-child(1){margin-left: 30%;} .adv_left p:nth-child(2),.adv_right p:nth-child(2){font-size: 0.869565em;} .adv_left p span,.adv_right p span{color: #ff7c08;font-weight: bold;} #adv_img{width: 100%;margin: 1em 0;} #adv_mid{width: 100%;text-align: center;} #adv_mid div{width:30%;border-bottom: 0.05em dashed #000;color:#ff7c08;font-weight: bold;padding-bottom: 0.3em;font-size: 1.1em;margin: 0 auto;margin-bottom: 0.5em;} #adv_mid p{width: 30%;margin: 0 auto;text-align: center;font-size: 0.869565em;} #adv_mid p span{font-weight: bold;color:#ff7c08;} #support{width: 100%; background: url(../images/Index/sup.jpg) center center no-repeat;background-size: 100%;height: 21em;margin-top:1em;box-sizing: border-box;padding-top: 2em;} ``` 这段代码最后在手机上正常显示的是adv_mid的那段文字,还有图片,还有3个标题,其他段落的文字显示不出来。然后最近更新的连#support的背景图都显示不出来。到底是什么原因。 问题已解决: 思路:因为是html不显示,而不是css不显示。所以考虑到class命名问题,后来修改后就显示了。估计是adv_left和adv_right这两个名字跟UC浏览器里面的命名有重叠了吧。。因为找了网页关联的文件都没有找到对应的css。。JS没找。。问题解决了,就这样吧。愁了我一天
请教各位大神 设置body宽高后,怎么才能自适应手机端?
我的body的css 是这样的,请问各位大神,怎么才能在这个不改的前提下,让页面自适应手机端? body { /* border: solid; */ position: relative; width: 750px; height: 1216px; background-repeat: no-repeat; background-size: 100% 100%; } ``` 用了 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ``` 这个元素之后页面会变的特别特别大,
关于div布局问题,怎样使div大小不随浏览器窗口大小改变
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .logo1{padding:0px 0px 0px 0px;background-color:#3a3c75;height:120px;width: 1000px;float: right} .logo2{padding:0px 0px 0px 0px;background-color:red;height: 120px;width:500px ;background-image: url("./logo.png")} </style> </head> <body> <div class="logo1"></div> <div class="logo2"></div> </body> </html> ``` 俩个div同行,缩小浏览器窗口是总是一个将领一个覆盖。为什么
浏览器打开网页的时候样式不全,求教解答方法
![图片说明](https://img-ask.csdn.net/upload/201909/30/1569796380_630431.png)比如打开优酷是这样的 ![图片说明](https://img-ask.csdn.net/upload/201909/30/1569796397_119033.png) 从网页源代码去找的话发现是这个CSS文件载入不了,报错如下,求教大神解决方法,是哪里设置错了吗,该如何快速的还原?求求大神有能力的远程帮我一下,重谢,我的QQ390651027,真的谢谢了
怎么用脚本 把当前网页的html,css,js全部保存到本地?
怎么用脚本 把当前网页的html,css,js全部保存到本地?
求助!background-position再IE浏览器下位置整体下移了
除IE外浏览器正常 ![图片说明](https://img-ask.csdn.net/upload/201912/10/1575976604_973022.png) 如果用IE浏览器打开或者手机端打开都是这样 ![图片说明](https://img-ask.csdn.net/upload/201912/10/1575976633_959633.png) 图标整体往下走了,麻烦大神们帮忙看看 在线调试网址:https://www.juyimv.cn/article/924739537.html 感恩 ``` .article-infobox .delicon{ background:url(../images/delIcon.png) no-repeat; background-size:16px; } .article-infobox .tag{ background-position:0px 1px; } .article-infobox .auther{ background-position:0px -17px; } .article-infobox .time{ background-position:0 -35px; } .article-infobox .view{ background-position:0px -52px; } ```
css 重叠部分透明 如何实现
![图片说明](https://img-ask.csdn.net/upload/202001/13/1578920268_591941.png) 就是这种让中间为透明是如何实现的
uniapp 项目打包后端运行后部分css失效?
求助下大家,下面说明问题: 1.h5项目本地运行调试正常。 2.打包后直接上传到云存储空间,调试运行正常。 3.上传至后端php环境后,有一部分css样式失效,(后端为tp5,环境在微信公众号网页内)。 有人碰到过是什么问题引起的吗?
内联样式和外联样式中的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>Document</title> <link rel="stylesheet" href="demo.css"> <!-- 如果使用上面一行的外链样式表,页面刚打开的时候,就有动态效果 --> <!-- <style>同样的css代码写在这里,不会产生页面一打开就有动态效果的问题</style> --> </head> <body> <div class="box"> <ul> <li> <div class="wrapper"> <div>1</div> <p>2</p> </div> </li> <li> <div class="wrapper"> <div>1</div> <p>2</p> </div> </li> <li> <div class="wrapper"> <div>1</div> <p>2</p> </div> </li> </ul> </div> </body> </html> ``` 然后以下是css代码: ``` * { padding: 0; margin: 0; box-sizing: border-box; list-style: none; } body { background-color: #fff; } .box { width: 630px; height: 200px; margin: 100px auto 0; } .box ul { width: 100%; height: 100%; list-style: none; text-align: center; line-height: 200px; } .box ul li { float: left; width: 200px; height: 100%; margin-right: 15px; perspective: 1500px; cursor: pointer; } .box ul li:last-of-type { margin-right: 0; } .box ul li .wrapper { width: 100%; height: 100%; transition: -webkit-transform 1.6s; position: relative; transform-style: preserve-3d; } .box ul li .wrapper div { width: 100%; height: 100%; border-radius: 5px; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3); background-color: blue; position: absolute; top: 0; transform: translateZ(100px); transition: all 1.6s; } .box ul li .wrapper p { width: 100%; height: 100%; border-radius: 15px; position: absolute; top: 0; box-shadow: none; background-color: gold; transform: rotateX(-90deg) translateZ(100px); transition: all 1.6s; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } .box ul li .wrapper:hover div { box-shadow: none; border-radius: 15px; } .box ul li .wrapper:hover p { box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3); border-radius: 5px; } .box ul li:hover .wrapper { transform: rotateX(90deg); } ```
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、PDF搜索网站推荐 对于大部
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入  假设现有4个人
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方
致 Python 初学者
文章目录1. 前言2. 明确学习目标,不急于求成,不好高骛远3. 在开始学习 Python 之前,你需要做一些准备2.1 Python 的各种发行版2.2 安装 Python2.3 选择一款趁手的开发工具3. 习惯使用IDLE,这是学习python最好的方式4. 严格遵从编码规范5. 代码的运行、调试5. 模块管理5.1 同时安装了py2/py35.2 使用Anaconda,或者通过IDE来安装模
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
      11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下
日均350000亿接入量,腾讯TubeMQ性能超过Kafka
整理 | 夕颜出品 | AI科技大本营(ID:rgznai100) 【导读】近日,腾讯开源动作不断,相继开源了分布式消息中间件TubeMQ,基于最主流的 OpenJDK8开发的
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车? 某胡同口的煎饼摊一年能卖出多少个煎饼? 深圳有多少个产品经理? 一辆公交车里能装下多少个乒乓球? 一
相关热词 c#处理浮点数 c# 生成字母数字随机数 c# 动态曲线 控件 c# oracle 开发 c#选择字体大小的控件 c# usb 批量传输 c#10进制转8进制 c#转base64 c# 科学计算 c#下拉列表获取串口
立即提问