- li里面的文字在 li 框里居中
-
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>宽度和高度</title> <style type="text/css"> li{ border:1px dotted #ccc; width:200px; height:30px; text-align :center; padding-bottom:auto; } </style> </head> <body> <ul> <li>别让不会说话害了你</li> <li>二十七八岁就应该有的见识</li> <li>别让不好意思害了你</li> </ul> </body> </html>怎么讲 li里面的文字在 li 框里居中 上下左右都居中
li{
border:1px dotted #ccc;
width:200px;
height:30px;
text-align :center;
padding-bottom:auto;
line-height:30px;
}
样式加一个
line-height:30px;，这个高度等于height就行了
- 其他相关推荐
- css ul li 居中问题，li left之后还是实现居中
- 代码如下，像是这种，如何让多个li float之后，还是居中？我给ul加了宽度之后，只是ul居中，UL里面的li还是float：left排列，怎么实现ul里面的li居中？ ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> ul{ list-style:none; margin:0 auto; text-align:center; background-color:#90F8B5} li{ width:72px; height:38px; background-color:#999; margin:15px; float:left;} </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> ```
- li标签里面文字和图片怎么水平垂直居中啊！！！求大神
- 图片说明](https://img-ask.csdn.net/upload/201608/29/1472437203_378595.png)
- 求助大佬，html li标签中出现了文字错位！
-  我定义了li的高度，，也定义了a标签的行高（行高等于li的高度），可以实现文字在li中的垂直居中了！ 但是我在文字前边加了一个图像，导致文字错位了，求教大佬是怎么引起的，怎么解决呢！ 如下图，li是这样插入的 ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="@@"> <meta name="Description" content=""> <title>@@</title> <style> header{width:1000px; margin:0 auto;} #nav ul { width:1000px; margin:0 auto; height:50px; padding:0; list-style:none; border-top:solid 5px #1b0b88; border-bottom:solid 5px #1b0b88; background:url(./11.jpg); margin-bottom:25px; } #nav ul li { float:left; text-align:center; height:50px; line-height:50px; width:25%; font-size:20px ; font-family:microsoft yahei; } #nav ul li a { text-decoration:none; color:#800080; } #nav ul li a:hover { display:block; color:#FFFFFF; background:#e2e2e2; } #nav ul li:hover { display:block; color:#FFFFFF; background:#e2e2e2; } .dh1{width:1000px; height:30px; margin:0 auto; background:white; margin-bottom:10px; } .dh1 li{ float:left; width:20%; line-height:30px; list-style:none; } .dh1 ul li img{ display:inline; width:30px; padding:0px; margin:0px; vertical-align: middle; } .dh1 li a{ font-size:20px; color:black; } </style> </head> <body style="background-image:url(./22.jpg)"> <header style="border:2px solid gray;margin-bottom:20px;"> <div class="logo" style="line-height:100px; font-size:50px; font-family:Microsoft Yahei; color:#12599e;background-image:url(./11.jpg)"> <img style="height:100px;float:left;" src="./1.jpg" /> <div style="display:block; ">     <a style="list-style:none;text-decoration:none" href="@@">@@</a> </div> </div> </header> <div id="nav"> <ul> <li><a href="#" />基础导航</a></li> <li><a href="#" />倾听音乐</a></li> <li><a href="#" />前行印迹</a></li> <li><a href="#" />关于我</a></li> </ul> </div> <div class="dh1"> <ul> <li><img src="http://static.nipic.com/images/favicon.ico" /><a href="#" /><span>昵图网</span></a></li> <li><img src="https://www.baidu.com/cache/icon/favicon.ico" /><a href="#" /><span>百度图片</span></a></li> <li><img src="./00000.jpg" /><a href="#" /><span>搜狗图片</span></a></li> <li><a href="#" /><span>360图片</span></a></li> <li><a href="#" /><span>360图片</span></a></li> </ul> </div> <div class="dh1"> <ul> <li><a href="#" />昵图网</a></li> <li><a href="#" />百度图片</a></li> <li><a href="#" />搜狗图片</a></li> <li><a href="#" />360图片</a></li> <li><a href="#" />360图片</a></li> </ul> </div> <div id="main"> </div> <footer> </footer> </body> </html> ``` 之后我又尝试给img来了一个display：block;并设置了一个line-heght=li的高度，，但是把文字给顶到第二行来了，不在第一行显示！ 
- div+css 如何在table标签里面建立二级菜单
- ``` <body> <div class="ontainer"> <div class="Header" align="center"><img src="无标题.jpg" width="80%" height="160" /></div><!--定义了width为百分比，在定义高度为百分比就没用了，宽度为准按原图比例进行缩放，除非把高度定义为绝对的高度，即用像素来定义--> <div class="1"> <table width="80%" heigth:"50px" border="2" bgcolor="#66FF00" align="center"> <div id="一级菜单"> <tr> <ul> <td> <li><a href="#">张三</a> <ul class="二级菜单"> <li><a href="#">123456</a></li> </ul> </li> </td> <td><li><a href="#">李四</a></li></td> <td><li><a href="#">王五</a></li></td> <td><li><a href="#">赵六</a></li></td> <td><li><a href="#">赵六</a></li></td> <td><li><a href="#">赵六</a></li></td> <td><li><a href="#">赵六</a></li></td> <td><li><a href="#">赵六</a></li></td> </ul> </tr> </div> </table> </div> </div> </body> 最上面是一张图片，然后下面是一张表格，表格里面的文字下面新建下拉菜单 问题1：在 <style type="text/css"> #COntainer{ width:80%; margin:0 auto; } #Header{ width:80%; height:10%px; <!--由于Header中的图片在下面定义了绝对的高度，是个像素，在这里定义也就没用了,只要是下面定义了，这里定义就无用--> } #1{ background:#CF3; text-align:center; <!--并没有起到作用，表格中的字体依然没有居中，只有到<td>标签的属性中去设置了--> } </style> 之中如何定义下拉菜单的隐藏，现在情况如图：  问题2：div标签里面class，id,什么时候用class，什么时候用id,什么时候用name 问题3：在html/css中<style></style>中的div标签对该标签对应的内容为什么没用，如上面的<div class="1">,在上面定义的text-align：center没用。还有类似的，表格里的文字内容居中问题，非得在<table>标签下的<td>标签里面定义吗？ 问题四：为什么表格里一级菜单，二级菜单前面都有个点，是什么意思，怎么去掉 ```
- css 字体无法居中 我设置的 感觉text-align: center;无用
- 我设置的 感觉text-align: center;这个属性都没有什么作用，只好另外加left: -20px; 但是还是有很多，问题。因为那样只会让个别的居中。还有我的opacity:0.5; 这种设置兼容性很差。有些浏览器是完全不透明的。我很无解。。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>京东商城</title> <style type="text/css"> body,ul,li,h1,h2,h3,img,p,div{ margin: 0; margin: o;} .add{width: 990px; height: 70px; margin: 10px auto;} .nav{width: 990px; height: 40px; margin: 10px auto; background-color:#E63D40;} .nav ul{ list-style: none; } .nav ul li{ float:left;width: 85px; height: 40px; font-family: 微软雅黑; color: white; font-weight: bolder; line-height: 40px; position: relative; } .nav ul li a{ width: 85px; height: 40px; position: absolute; text-align: center; margin: 0 auto; top: 0; left: -20px; bottom: 0; right: 0px; } .nav ul li a:hover{ opacity:0.5; background-color: rgb(164,0,0);position: absolute; } #li1{ width: 210px; height: 40px; } </style> </head> <body> <div class="add"> <img alt="广告" src="add.gif"> </div> <div class="nav"> <ul> <li id="li1">全部商品分类</li> <li><a href="javascript:;"></a>首页</li> <li><a href="javascript:;"></a>服装城</li> <li><a href="javascript:;"></a>京东超市</li> <li><a href="javascript:;"></a>团购</li> <li><a href="javascript:;"></a>夺宝岛</li> <li><a href="javascript:;"></a>闪购</li> </ul> <img alt="支付有礼" src="zfyl.jpg" align="right"> </div> </body> </html> ```
- li标签无法正常显示,display值为none
- 1 代码 ``` <style> .ck-slide{ width:720px; } .ck-slide-wrapper{ height: 100%; } </style> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <script src="../github/myck_slide-master/js/myslide.js"> </script> <script> /* $(".ck-slide").ckSlide({ autoPlay:true })*/ </script> </div> //引入的外部样式 * { margin: 0px; padding: 0px; } .ck-slide { margin: 100px 0 0 0; left: 50%; margin-left: -400px; width:800px; position: relative; } .ck-slide .ck-slide-wrapper { top: 0; left: 0; z-index: 1; width:100%; position: absolute; } .ck-slide-wrapper li{ list-style: none; display: block; } ``` 2 显示效果   3 问题 想实现的效果是轮播。 上述代码在浏览器中打开的时候可以正常显示第一章图片。 按照我个人的理解，ul下面放置了li标签，并且ck-slide样式被设置了指定的宽度居中显示，那么ul下面的li标签会在垂直方向上分布显示，但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none，这是为什么呀？？我没有设置display为none呀 ------------------------------------------------------------- # **有朋友提到js文件的问题，这里并没有执行js代码，我提供全部代码：** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/slide.css"> <script src="./js/jquery.min.js"></script> <style> .ck-slide{ width:720px; height:320px; } .ck-slide-wrapper{ height: 100%; } </style> </head> <body> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a> <div class="ck-slideBox"> <div class="slideWrap"> <ul> <li class="current"><em>1</em></li> <li><em>2</em></li> <li><em>3</em></li> <li><em>4</em></li> </ul> </div> </div> </div> </body> </html> ``` 使用到的图片  感谢给位朋友的指点！
- 关于Ul在DIV不设宽度的情况下如何居中
- 当做一个导航的时候，用到DIV，可是当DIV的宽度不设置的时候，UL和LI如何居页面中内显示 CSS部分 #nav { height:35px; margin-top:5px; background-color:#336699; } #nav ul{ list-style:none; } #nav li{ float:left; width:100px; line-height:35px; } #nav a{ display:block; text-align:center; color:#FFF; font-size:14px; text-decoration:none; } #nav a:hover{ color:#FFF; background-color:#003366; font-weight:bold; } HTML部分 <!--导航--> <div id="nav"> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">简介概况</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不设宽度的时候，如何让UL居页面的中间位置，这样再添加导航的时候，可以往两边撑
- 为什么还是不能让网页元素居中显示啊
- 想让body里面的网页居中显示，但是在body里面加了margin：auto还是不行，希望大家帮我看一下 HTML： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!doctype html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <link rel="stylesheet" type="text/css" href="CSS/login.css"/> </head> <body> <div id="container"> <iframe id="head" src="head.html" width="100%" height="136" frameborder="0" scrolling="no"></iframe> <form action="login_success" method="post"> <div class="login"> <ul class="form1"> <li><img src="image/3.png"></li> <li class="user">会员名：<input type="text"/></li> <li class="user">密 码：<input type="text"/></li> <li class="usersubmit"><input type="button" value="登陆" style="background:#C30"/></li> <li><br/></li> <li class="liop"><a href="#">什么是安全登陆</a></li> <li class="liop">香港会员（繁体中文用户）由此<a href="#">登入</a></li> <li class="liop"><a href="#">密码安全贴士</a></li> <li class="liop">防止病毒或木马窃取您的账户信息，<a href="#">在线检查</a>您的电脑是否安全</li> </ul> <ul class="form2"> <li class="loimage2"><img src="image/4.gif"></li> <li><span class="text">便宜有好货！</span><span class="textaf">超过7000万商品任您选</span></li> <li><span class="text">买卖更安全！</span><span class="textaf">交易超安全</span></li> <li><span class="text">免费开网店！</span><span class="textaf">轻松赚钱交友选</span></li> <li><span class="text">超人气社区！</span><span class="textaf">精彩活动每一天</span></li> </ul> </div> </form> <iframe id="foot" src="foot.html" width="100%" height="136" frameborder="0" scrolling="no"></iframe> </div> </body> </html> css： @charset "utf-8"; /* CSS Document */ body{ margin:0px; padding:0px; } li{ list-style:none; } .container{ width:980px; margin:0 auto; } .login{ width:100%; height:450px; background:url(../image/5.gif) no-repeat; margin-left:30px; } .login ul{ float:left; } .login ul.form1{ width:45%; height:390px; border-right:2px #C30 solid; } .user{ padding-left:150px; line-height:35px; } .usersubmit{ padding-left:250px; padding-top:10px; } .liop{ padding-left:100px; line-height:35px; font-size:12px; } .login ul.form2{ width:30%; padding-left:40px; } .text{ color:#30F; font-size:10px; line-height:35px; font-weight:bold; padding-bottom:5px; font-family:"宋体"; } .loimage2{ padding-top:10px; padding-bottom:10px; }
- css 中strong样式问题
- css 在类选择器里和派生选择器里包含的strong里同时添加color属性，为什么显示的是strong里的颜色 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> ul li strong{ font-style:italic; color:#00FF00; } center{ text-align:center; color:#FF0000; } .top{ color:#00FF00; } #mine{ font:"华文行楷"; font-size:12px; background-color:#DDDDDD; } </style> </head> <body> <ul> <li class="top"><strong>闫红霞</strong></li> <li id="mine" class="top"><strong>宋贝贝 </strong></li> <li class="top"><strong>孙尧</strong></li> <li class="top"><strong>陈林</strong></li> <li class="center"><strong >孟祥雯</strong></li> <li class="center1">杨艳</li> <li>陈林</li> <li>孙尧</li> <li>宋贝贝</li> <li>闫红霞</li> </ul> </body> 结果样式为：孟祥雯 斜体红色居中 杨艳 红色居中 strong标签里的为绿色斜体 实际结果：孟祥雯 斜体**绿色**居中 杨艳 红色居中 strong标签里的为绿色斜体
- 新人求教 导航栏中垂直居中 跟间距问题
-  如何把这块画圈的 居中显示呢 还有三个li间距 怎么设置啊？保证导航栏大小不变，用的bootstrap <ul class="nav navbar-nav navbar-right " > <li > <h4>用户角色：</h4> </li> <li> <div class="form-group"> <select class="form-control"> <option></option> <option>职 员</option> <option>项目经理</option> <option>人事经理</option> </select> </div> </li> <li class="divider-vertical"></li> <li> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle " data-toggle="dropdown"> 用 户 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">修改密码</a></li> <li class="divider"></li> <li><a href="#">退 出</a></li> </ul> </div> </li> </ul>
- HTML求助！代码和示例图如下，请问如何使得图片标注的五张图片垂直居中？
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> header{background:#09F; height:50px; width:100%; line-height:20px;} aside{background:#C6F; height:850px; width:18%; float:left;} ul{list-style-type:none;} article{height:800px; width:65%; float:left;} footer{background:#99F; width:100%; height:50px; clear:left;} </style> </head> <body> <header> <img src="搜索.png" width="2%"/>移动端页面练习 </header> <aside> <ul> <li> <a href=""> <img src="支.png" width="25%" /> </a> </li><br /> <li> <a href=""> <img src="促.png" width="15%" /> </a> </li><br /> <li> <a href=""> <img src="订.png" width="15%" /> </a> </li><br /> <li> <a href=""> <img src="卡.png" width="15%" /> </a> </li><br /> <li> <a href=""> <img src="团.png" width="15%" /> </a> </li><br /> </ul> </aside> <article> <figure> <img src="食品.png" /> <img src="家庭电器.png" /> </figure> <figcaption>食品/家用电器 </figcaption> <figure> <img src="全新整车车品.png" /> <img src="居家生活.png" /> </figure> <figcaption>汽车/居家 </figcaption> <figure> <img src="手机数码.png" /> <img src="珠宝手表眼镜.png" /> </figure> <figcaption>手机/珠宝 </figcaption> </article> <footer> <nav> <ul> <a href=""> <img src="菜单.png" width="2%"/> </a> <a href=""> <img src="星星.png" width="2%" /> </a> <a href=""> <img src="vip.png" width="2%" /> </a> <a href=""> <img src="钱.png" width="2%" /> </a> <a href=""> <img src="购物.png" width="2%" /> </a> </ul> </nav> </footer> </body> </html> ``` ```
- 设置<ul>中圆点和文本的相对位置
-  我在网上做html和css习题 要求文本在框子里面居中 圆点处在<li>元素的下端。 但是。。。。。。我制作的ul效果如下图。  代码是这么写的： <style> div.advertisement ul li a{ display: block; color: rgb(211,83,59); font-size: 20px; text-decoration: none; vertical-align: middle; } div.advertisement ul li { font-size:4px; text-align: center; border: 1px solid rgb(211,83,59); background-color: rgb(241,241,241); margin-top:3px; height: 34px; line-height:46px; } </style> <div class="advertisement"> <ul> <li><a href="#Diamond">广告位招租</a></li> <li><a href="#Emerald">广告位招租</a></li> </ul> </div> 我的想法是在ul中加入line-height属性调整圆点和文本的整体高度，然后再在li中设置line-height属性单纯调整文本的高度，可是我在li中进行了设置之后圆点也跟着跑了. 我也曾经尝试过在li中加入line-height属性调整圆点和文本的整体高度，在a中加入line-height属性调整文本的高度，可是在a进行了line-height属性设置之后圆点的位置还是发生了变化。 大家有没有什么好的方法去实现题目中的效果？
- display:box居中显示内容问题
- 通过display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center; 居中显示内容  在chrome中测试时图片可以居中显示。  但是在手机中测试时就出问题了，总是往右偏出很多。 代码如下，求解 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Touch Gallery</title> <style> * {margin:0; border:0; padding:0;} html, body {width:100%; height:100%;} #canvas {width:100%; height:100%; overflow:hidden;} ul {position:relative; width:100%; height:100%; list-style:none;} li { position:absolute; top:0; left:0; width:100%; height:100%; display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center; background-color:#000; } img {max-width:100%; max-height:100%;} </style> </head> <body> <div id="canvas"> <ul> <li><img src="img/horizontal.jpg"/></li> </ul> </div> </body> </html> ```
- css/padding属性如何禁用
- 问题描述: 为了使ul-li居中对齐,采用text-align:center + display:inline方法 然而网上简单好用的方法拿到实际工作中就各种失效。最后检查问题发现了原因 这是正确的情况:  这是错误的情况:  竟然只需要将padding:0这个属性禁用掉就好了！ 1.不理解为什么,padding:0应该是一个人畜无害的属性才对啊 2.怎么办,既不可能去修改公用的css样式,也不可能不引入这个css文件 css不存在"解除一个属性定义",只能"复写这个属性定义" 那么应该将padding属性设置成什么呢？ 》》》附部分有效代码: ``` <style type="text/css"> #wizard ul { list-style: outside none none; text-align:center; padding:0;/*万恶之源*/ } #wizard ul li { color:#FFF; display:inline; float:left; width:14%; border-radius:5px; background-color:#000; } #wizard ul li div.index { float:left; width:24%; font-weight:bold; } #wizard ul li div.name { float:left; width:75%; text-align: left; } </style> </head> <body> <div id="wizard" class="swMain"> <ul id="0" class="" style="margin: 0px;"> <li id="prog0" isdone="1" class="selected"><div class="index">1</div><div class="name"> 标签名称</div> </li> <li id="prog1"><div class="index">2</div><div class="name"> 标签名称</div> </li> <li id="prog2"><div class="index">3</div><div class="name"> 标签名称</div> </li> <li id="prog3"><div class="index">4</div><div class="name"> 标签名称</div> </li> <li id="prog4"><div class="index">5</div><div class="name"> 标签名称</div> </li> <li id="prog5"><div class="index">6</div><div class="name"> 标签名称</div> </li> <li id="prog6"><div class="index">7</div><div class="name"> 标签名称</div> </li> </ul> </div> ``` 求解决方案
- 新人求助！！做网页做了一个二级菜单，但是一级菜单放不进去盒子，二级菜单不对齐一级菜单
- ## 我的style里面的代码是外部镶入的，并不是直接写上去的 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:450px; height:30px; border:1px solid red; margin:100px auto; /*盒子居中*/ } div ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left; height:50px; text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件，二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show();//show本质上还是更新display属性为block }); // 给一级菜单li设置鼠标离开事件，二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide();//hide本质上还是更新display属性为none }); </script> </html> ``` ```
- 为什么我外部导入CSS代码样式会错乱，直接写在想要导入的代码却没事？
- ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <style> @import url("菜单美化.html"); </style> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件，二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show(); // 给一级菜单li设置鼠标离开事件，二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide(); }); </script> </html> _** 插入的CSS代码**_ <!doctype html> <html> <head> <meta charset="utf-8"> <title>美化菜单</title> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:221px; height:21px; border:1px solid red; margin:100px auto; /*盒子居中*/ } ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left;/*标签左浮动*/ text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ width: 72px; } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> </body> </html> ``` **这是写在代码内部的菜单栏**  **这是导入外部文件的菜单栏** 
- 为什么这里的imgList.style.left = 0 +"px"; 不生效？
- 在使用js实现html轮播图的时候想要在最后一张图的时候跳回第一张图，就是一直向右移动，但是设置imgList.style.left = 0 明明执行了却没生效，轮播到最后一张图片的时候会往回移动，像倒车一样。下面是页面代码 ``` <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #imgBox{ width: 516px; height: 333px; background-color: greenyellow; padding: 8px 0; margin: 50px auto; overflow: hidden; position: relative; } #imgList{ list-style: none; position: absolute; } #imgList li{ float: left; padding: 0 8px; } #imgNav{ position: absolute; bottom: 20px; } #imgNav a{ width: 15px; float: left; height: 15px; background-color: pink; opacity:0.6; margin: 0 5px; } #imgNav a:hover{ background-color:rgb(24, 136, 241); } </style> <script src="js/tool.js"></script> <script> window.onload = function(){ var imgBox = document.getElementById("imgBox") var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); //设置imgNav的宽度 imgList.style.width = imgBox.offsetWidth*imgArr.length + "px"; var imgNav = document.getElementById("imgNav"); //获取imgNav中所有的A var allA = document.getElementsByTagName("a"); //设置imgNav居中 //居中公式：（总体宽度 - 居中元素的宽度）/2 imgNav.style.left = (imgBox.offsetWidth - imgNav.offsetWidth)/2 + "px"; //设置默认索引为0 var index = 0; //设置默认选择元素颜色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; //遍历数组allA，为所有的A绑定单击响应函数 for(var i=0; i < allA.length; i++){ allA[i].num = i; allA[i].onclick = function(){ index = this.num; imgList.style.left= -516*index +"px"; move(imgList, "left", -516*index, 30, function(){ setA(); }) } } //调用自动切换函数 autoChange(); //设置选中a样式的函数 function setA(){ //判断是否是最后一张图片 **if(index >= imgArr.length - 1){ //是最后一张则跳为第一张 imgList.style.left = 0 +"px"; //索引初始化 index = 0; //判断在网页中查看if是否执行 alert("初始化完毕"); } ** //将所有a初始化 for(var i = 0; i < allA.length; i++){ allA[i].style.backgroundColor = ""; } //将选中的a变色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; } //设置自动切换函数 function autoChange(){ setInterval(function(){ index++; index %= imgArr.length; move(imgList, "left", -516*index, 30,function(){ setA(); }) },3000) } } </script> </head> <body> <div id="imgBox"> <ul id="imgList"> <li><img src="img/01.jpg" ></li> <li><img src="img/02.jpg" ></li> <li><img src="img/03.jpg" ></li> <li><img src="img/04.jpeg" ></li> <li><img src="img/05.jpg" ></li> <li><img src="img/01.jpg" ></li> </ul> <div id="imgNav"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html> ``` 下面是move函数的代码 ``` /* 创建一个移动函数 obj为调用的对象 attribute为修改的属性 target为最终目标 speed为动作的速度 callBack为回调函数 */ function move(obj, attribute, target, speed, callBack){ clearInterval(obj.timer); //获取当前obj属性 var current = parseInt(getStyle(obj , attribute)); //判断速度方向 if(current>target){ speed = -speed; } obj.timer = setInterval(function(){ var oldValue = parseInt(getStyle(obj , attribute)); var newValue = oldValue + speed; //判断函数是否达到目标位置 if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){ //使对象停在目标上 newValue = target; //关闭计时器 clearInterval(obj.timer); callBack && callBack(); } obj.style[attribute] = newValue + "px"; },30) } function getStyle(obj , name){ if(window.getComputedStyle){//判断兼容性 return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } } ``` 
- 为什么我的图片换行会出现一个和图片一样大小的空白
- ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>突出展示</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*清楚页面原有边距*/ margin:0; padding: 0; } .divclass{/*定义盒子*/ width: 1000px; height: 464px; margin: 150px auto;/*盒子居中*/ border: 1px solid red; } .divclass ul {/*去除列表小圆点*/ list-style:none; } .imgclass{/*图片处理*/ width:33%; height:33%; float:left; } </style> </head> <body> <div class="divclass" > <ul> <li><a href="#"><img src="../../../图片/黄昏少女/6.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/5.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/4.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/3.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/11.png" class="imgclass"></a></li> <li><a href="#"><img src="../../../图片/黄昏少女/10.png" class="imgclass"></a></li> </ul> </div> </body> </html> ``` 
- 《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱
- 将代码部署服务器，每日早上定时获取到天气数据，并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方，主要介绍的是思路。
- Linux(服务器编程):15---两种高效的事件处理模式（reactor模式、proactor模式）
- 前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式 一、Reactor模式 Reactor模式特点 它要求主线程（I/O处理单元）只负责监听文件描述符上是否有事件发生，有的话就立即将时间通知工作线程（逻辑单元）。除此之外，主线程不做任何其他实质性的工作 读写数据，接受新的连接，以及处...
- 为什么要学数据结构？
- 一、前言 在可视化化程序设计的今天，借助于集成开发环境可以很快地生成程序，程序设计不再是计算机专业人员的专利。很多人认为，只要掌握几种开发工具就可以成为编程高手，其实，这是一种误解。要想成为一个专业的开发人员，至少需要以下三个条件： 1) 能够熟练地选择和设计各种数据结构和算法 2) 至少要能够熟练地掌握一门程序设计语言 3) 熟知所涉及的相关应用领域的知识 其中，后两个条件比较容易实现，而第一个...
- C语言魔塔游戏
- 很早就很想写这个，今天终于写完了。 游戏截图： 编译环境: VS2017 游戏需要一些图片，如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论，如果暂时没有回应，可以在博客下方留言，到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义，使用结构体，这个名字是可以自己改变的 struct gamerole { char n
- 进程通信方式总结与盘点
- 进程通信是指进程之间的信息交换。这里需要和进程同步做一下区分，进程同步控制多个进程按一定顺序执行，进程通信是一种手段，而进程同步是目标。从某方面来讲，进程通信可以解决进程同步问题。 首先回顾下我们前面博文中讲到的信号量机制，为了实现进程的互斥与同步，需要在进程间交换一定的信息，因此信号量机制也可以被归为进程通信的一种方式，但是也被称为低级进程通信，主要原因为： 效率低：一次只可操作少量的...
- 究竟你适不适合买Mac？
- 我清晰的记得，刚买的macbook pro回到家，开机后第一件事情，就是上了淘宝网，花了500元钱，找了一个上门维修电脑的师傅，上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷，只是想要个固态硬盘的笔记本，用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后，最终决定，还是买个好（xiong）看（da）的。 已经有好几个朋友问我mba怎么样了，所以今天尽量客观
- 听说了吗？阿里双11作战室竟1根网线都没有
- 双11不光是购物狂欢节，更是对技术的一次“大考”，对于阿里巴巴企业内部运营的基础保障技术而言，亦是如此。 回溯双11历史，这背后也经历过“小米加步枪”的阶段：作战室从随处是网线，交换机放地上的“一地狼藉”；到如今媲美5G的wifi网速，到现场却看不到一根网线；从当年使用商用AP(无线路由器)，让光明顶双11当天断网一分钟，到全部使用阿里自研AP……阿里巴巴企业智能事业部工程师们提供的基础保障...
- 在阿里，40岁的奋斗姿势
- 在阿里，40岁的奋斗姿势 在阿里，什么样的年纪可以称为老呢？35岁？ 在云网络，有这样一群人，他们的平均年龄接近40，却刚刚开辟职业生涯的第二战场。 他们的奋斗姿势是什么样的呢？ 洛神赋 “翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。髣髴兮若轻云之蔽月，飘飖兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。” 爱洛神，爱阿里云 2018年，阿里云网络产品部门启动洛神2.0升...
- 关于研发效能提升的思考
- 研发效能提升是最近比较热门的一个话题，本人根据这几年的工作心得，做了一些思考总结，由于个人深度有限，暂且抛转引入。 三要素 任何生产力的提升都离不开这三个因素：人、流程和工具，少了其中任何一个因素都无法实现。 人，即思想，也就是古人说的“道”，道不同不相为谋，是制高点，也是高层建筑的基石。 流程，即方法，也是古人说的“法”。研发效能的提升，也就是要提高投入产出比，既要增加产出，也要减...
- Python爬虫爬取淘宝，京东商品信息
- 小编是一个理科生，不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具（Python+pycharm2019.3+selenium+xpath+chromedriver）其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/
- 阿里程序员写了一个新手都写不出的低级bug，被骂惨了。
- 这种新手都不会范的错，居然被一个工作好几年的小伙子写出来，差点被当场开除了。
- Java工作4年来应聘要16K最后没要,细节如下。。。
- 前奏： 今天2B哥和大家分享一位前几天面试的一位应聘者，工作4年26岁，统招本科。 以下就是他的简历和面试情况。 基本情况： 专业技能： 1、 熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、 熟悉常用项目管理工具：SVN、GIT、MAVEN、Jenkins 3、 熟悉Nginx、tomca
- 2020年，冯唐49岁：我给20、30岁IT职场年轻人的建议
- 点击“技术领导力”关注∆ 每天早上8:30推送 作者| Mr.K 编辑| Emma 来源| 技术领导力(ID：jishulingdaoli) 前天的推文《冯唐：职场人35岁以后，方法论比经验重要》，收到了不少读者的反馈，觉得挺受启发。其实，冯唐写了不少关于职场方面的文章，都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯
- 程序员该看的几部电影
- ##1、骇客帝国(1999) 概念：在线/离线，递归，循环，矩阵等 剧情简介： 不久的将来，网络黑客尼奥对这个看似正常的现实世界产生了怀疑。 他结识了黑客崔妮蒂，并见到了黑客组织的首领墨菲斯。 墨菲斯告诉他，现实世界其实是由一个名叫“母体”的计算机人工智能系统控制，人们就像他们饲养的动物，没有自由和思想，而尼奥就是能够拯救人类的救世主。 可是，救赎之路从来都不会一帆风顺，到底哪里才是真实的世界？
- 入职阿里5年，他如何破解“技术债”？
- 简介： 作者 | 都铎 作为一名技术人，你常常会听到这样的话： “先快速上线” “没时间改” “再缓一缓吧” “以后再解决” “先用临时方案处理” …… 当你埋下的坑越来越多，不知道哪天哪位同学就会踩上一颗雷。特别赞同“人最大的恐惧就是未知，当技术债可说不可见的时候，才是最让人不想解决的时候。” 作为一个程序员，我们反对复制粘贴，但是我们经常会见到相似的代码，相同的二方包，甚至整个代码...
- Python绘图，圣诞树，花，爱心 | Turtle篇
- 每周每日，分享Python实战代码，入门资料，进阶资料，基础语法，爬虫，数据分析，web网站，机器学习，深度学习等等。 公众号回复【进群】沟通交流吧，QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
- 作为一个程序员，CPU的这些硬核知识你必须会！
- CPU对每个程序员来说，是个既熟悉又陌生的东西？ 如果你只知道CPU是中央处理器的话，那可能对你并没有什么用，那么作为程序员的我们，必须要搞懂的就是CPU这家伙是如何运行的，尤其要搞懂它里面的寄存器是怎么一回事，因为这将让你从底层明白程序的运行机制。 随我一起，来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说，我们首先就要搞明白它是怎么回事，也就是它的内部构造，当然，CPU那么牛的一个东
- 破14亿，Python分析我国存在哪些人口危机！
- 2020年1月17日，国家统计局发布了2019年国民经济报告，报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏，但是很多人并没有看到我国复杂的人口问题：老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧！ 一、背景 1.人口突破14亿 2020年1月17日，国家统计局发布了 2019年国民经济报告 ，报告中指出：年末中国大陆总人口（包括31个
- 在家远程办公效率低？那你一定要收好这个「在家办公」神器！
- 相信大家都已经收到国务院延长春节假期的消息，接下来，在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了，相反，对于沟通效率，文件协作，以及信息安全都有着极高的要求。有着非常多的挑战，比如： 1在异地互相不见面的会议上，如何提高沟通效率？ 2文件之间的来往反馈如何做到及时性？如何保证信息安全？ 3如何规划安排每天工作，以及如何进行成果验收？ ......
- 作为一个程序员，内存和磁盘的这些事情，你不得不知道啊！！！
- 截止目前，我已经分享了如下几篇文章： 一个程序在计算机中是如何运行的？超级干货！！！ 作为一个程序员，CPU的这些硬核知识你必须会！ 作为一个程序员，内存的这些硬核知识你必须懂！ 这些知识可以说是我们之前都不太重视的基础知识，可能大家在上大学的时候都学习过了，但是嘞，当时由于老师讲解的没那么有趣，又加上这些知识本身就比较枯燥，所以嘞，大家当初几乎等于没学。 再说啦，学习这些，也看不出来有什么用啊！
- 2020年的1月，我辞掉了我的第一份工作
- 其实，这篇文章，我应该早点写的，毕竟现在已经2月份了。不过一些其它原因，或者是我的惰性、还有一些迷茫的念头，让自己迟迟没有试着写一点东西，记录下，或者说是总结下自己前3年的工作上的经历、学习的过程。 我自己知道的，在写自己的博客方面，我的文笔很一般，非技术类的文章不想去写；另外我又是一个还比较热衷于技术的人，而平常复杂一点的东西，如果想写文章写的清楚点，是需要足够...
- 别低估自己的直觉，也别高估自己的智商
- 所有群全部吵翻天，朋友圈全部沦陷，公众号疯狂转发。这两周没怎么发原创，只发新闻，可能有人注意到了。我不是懒，是文章写了却没发，因为大家的关注力始终在这次的疫情上面，发了也没人看。当然，我...
- Java坑人面试题系列: 包装类（中级难度）
- Java Magazine上面有一个专门坑人的面试题系列: https://blogs.oracle.com/javamagazine/quiz-2。 这些问题的设计宗旨，主要是测试面试者对Java语言的了解程度，而不是为了用弯弯绕绕的手段把面试者搞蒙。 如果你看过往期的问题，就会发现每一个都不简单。 这些试题模拟了认证考试中的一些难题。 而 “中级(intermediate)” 和 “高级(ad
- 深度学习入门笔记（十八）：卷积神经网络（一）
- 欢迎关注WX公众号：【程序员管小亮】 专栏——深度学习入门笔记 声明 1）该文章整理自网上的大牛和机器学习专家无私奉献的资料，具体引用的资料请看参考文献。 2）本文仅供学术交流，非商用。所以每一部分具体的参考资料并没有详细对应。如果某部分不小心侵犯了大家的利益，还望海涵，并联系博主删除。 3）博主才疏学浅，文中如有不当之处，请各位指出，共同进步，谢谢。 4）此属于第一版本，若有错误，还需继续修正与...
- 这个世界上人真的分三六九等，你信吗？
- 偶然间，在知乎上看到一个问题 一时间，勾起了我深深的回忆。 以前在厂里打过两次工，做过家教，干过辅导班，做过中介。零下几度的晚上，贴过广告，满脸、满手地长冻疮。 再回首那段岁月，虽然苦，但让我学会了坚持和忍耐。让我明白了，在这个世界上，无论环境多么的恶劣，只要心存希望，星星之火，亦可燎原。 下文是原回答，希望能对你能有所启发。 如果我说，这个世界上人真的分三六九等，...
- 节后首个工作日，企业们集体开晨会让钉钉挂了
- By 超神经场景描述：昨天 2 月 3 日，是大部分城市号召远程工作的第一天，全国有接近 2 亿人在家开始远程办公，钉钉上也有超过 1000 万家企业活跃起来。关键词：十一出行 人脸...
- Java基础知识点梳理
- Java基础知识点梳理 摘要： 虽然已经在实际工作中经常与java打交道，但是一直没系统地对java这门语言进行梳理和总结，掌握的知识也比较零散。恰好利用这段时间重新认识下java，并对一些常见的语法和知识点做个总结与回顾，一方面为了加深印象，方便后面查阅，一方面为了学好java打下基础。 Java简介 java语言于1995年正式推出，最开始被命名为Oak语言，由James Gosling（詹姆
- 2020年全新Java学习路线图，含配套视频，学完即为中级Java程序员！！
- 新的一年来临，突如其来的疫情打破了平静的生活！ 在家的你是否很无聊，如果无聊就来学习吧！ 世上只有一种投资只赚不赔，那就是学习！！！ 传智播客于2020年升级了Java学习线路图，硬核升级，免费放送！ 学完你就是中级程序员，能更快一步找到工作！ 一、Java基础 JavaSE基础是Java中级程序员的起点，是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学
- B 站上有哪些很好的学习资源?
- 哇说起B站，在小九眼里就是宝藏般的存在，放年假宅在家时一天刷6、7个小时不在话下，更别提今年的跨年晚会，我简直是跪着看完的！！ 最早大家聚在在B站是为了追番，再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频，最近两年我和周围的朋友们已经把B站当作学习教室了，而且学习成本还免费，真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ﾉ 下面我们就来盘点一下B站上优质的学习资源： 综合类 Oeasy： 综合
- 你也能看懂的：蒙特卡罗方法
- 蒙特卡罗方法，也称统计模拟方法，是1940年代中期由于科学技术的发展和电子计算机的发明，而提出的一种以概率统计理论为指导的数值计算方法。是指使用随机数（或更常见的伪随机数）来解决很多计算问题的方法 蒙特卡罗方法可以粗略地分成两类：一类是所求解的问题本身具有内在的随机性，借助计算机的运算能力可以直接模拟这种随机的过程。另一种类型是所求解问题可以转化为某种随机分布的特征数，比如随机事件出现的概率，或...
- 如何优雅地打印一个Java对象？
- 你好呀，我是沉默王二，一个和黄家驹一样身高，和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码，但仍然觉得自己是个菜鸟（请允许我惭愧一下）。 在一个月黑风高的夜晚，我思前想后，觉得再也不能这么蹉跎下去了。于是痛下决心，准备通过输出的方式倒逼输入，以此来修炼自己的内功，从而进阶成为一名真正意义上的大神。与此同时，希望这些文章能够帮助到更多的读者，让大家在学习的路上不再寂寞、空虚和冷。 ...
