div嵌套，常见左右分类栏目
最终效果图如下：
html代码如下：
<div class="smalItem">
<div class="leftnav">
<div class="navbox">
<div class="list-box leave-class">
<p class="title clear">
<strong>
<em>学历教育 · 选专业</em>
</strong>
</p>
</div>
<div class="list-box over-class" data-num="0">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=1">计算机类</a><span> / </span>
<a href="/major/?b=6">通讯类</a><span> / </span>
<a href="/major/?b=8">电气电力类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="1">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=3">管理类</a><span> / </span>
<a href="/major/?b=11">财经类</a><span> / </span>
<a href="/major/?b=12">法律类</a><span> / </span>
<a href="/major/?b=14">医学类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="2">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=4">机械制造类</a><span> / </span>
<a href="/major/?b=5">交通运输类</a><span> / </span>
<a href="/major/?b=9">石化地矿类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="3">
<p class="navlist">
<span>/ </span>
<a href="/major/?b=2">师范语言类</a><span> / </span>
<a href="/major/?b=13">艺术传媒类</a><span> / </span>
<a href="/major/?b=15">心理学类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
<div class="list-box over-class" data-num="4">
<p class="navlist" style="border-bottom: none;">
<span>/ </span>
<a href="/major/?b=7">土建类</a><span> / </span>
<a href="/major/?b=16">农业类</a><span> / </span>
<a href="/major/?b=19">其他类</a> <span class="icon iconfont icon-arrow-rit"></span>
</p>
</div>
</div>
<div class="list-box over-class" data-num="5">
<div class="choose">
<p class="box logo">
<img class="lazy-one" src="/Public/assets/img/cup.png" data-original="/Public/assets/img/cup.png" style="display: inline;">
</p>
<p class="box">
<a href="/school/index.html">
<strong>选院校 <span class="icon iconfont icon-arrow-rit"></span>
</strong>
<span>985/211重点院校</span>
</a>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="0">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=1" onclick="clickBtn(1,'menu_zydlz')">计算机类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=1">计算机科学与技术 </a>
</span><span>
<i></i>
<a href="/major/?t=5">网络工程 </a>
</span><span>
<i></i>
<a href="/major/?t=14">信息管理 </a>
</span><span>
<i></i>
<a href="/major/?t=29">软件工程 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=6" onclick="clickBtn(6,'menu_zydlz')">通讯类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=9">电子信息 </a>
</span><span>
<i></i>
<a href="/major/?t=13">通信工程 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=8" onclick="clickBtn(8,'menu_zydlz')">电气电力类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=15">电气自动化 </a>
</span><span>
<i></i>
<a href="/major/?t=81">农业电气化 </a>
</span><span>
<i></i>
<a href="/major/?t=97">轨道电气化 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="1">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=3" onclick="clickBtn(3,'menu_zydlz')">管理类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=3">行政管理 </a>
</span><span>
<i></i>
<a href="/major/?t=12">电子商务 </a>
</span><span>
<i></i>
<a href="/major/?t=23">工商管理 </a>
</span><span>
<i></i>
<a href="/major/?t=27">市场营销 </a>
</span><span>
<i></i>
<a href="/major/?t=30">旅游管理 </a>
</span><span>
<i></i>
<a href="/major/?t=31">公共事业 </a>
</span><span>
<i></i>
<a href="/major/?t=33">人力资源管理 </a>
</span><span>
<i></i>
<a href="/major/?t=87">物业管理 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=11" onclick="clickBtn(11,'menu_zydlz')">财经类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=24">会计 </a>
</span><span>
<i></i>
<a href="/major/?t=34">金融 </a>
</span><span>
<i></i>
<a href="/major/?t=35">国际贸易 </a>
</span><span>
<i></i>
<a href="/major/?t=48">保险 </a>
</span><span>
<i></i>
<a href="/major/?t=49">财务管理 </a>
</span><span>
<i></i>
<a href="/major/?t=50">经济学 </a>
</span><span>
<i></i>
<a href="/major/?t=88">财政学 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=12" onclick="clickBtn(12,'menu_zydlz')">法律类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=25">法学 </a>
</span><span>
<i></i>
<a href="/major/?t=37">法务 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=14" onclick="clickBtn(14,'menu_zydlz')">医学类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=53">公共卫生管理 </a>
</span><span>
<i></i>
<a href="/major/?t=54">护理学 </a>
</span><span>
<i></i>
<a href="/major/?t=63">药学 </a>
</span><span>
<i></i>
<a href="/major/?t=98">医学技术类 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="2">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=4" onclick="clickBtn(4,'menu_zydlz')">机械制造类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=4">船舶工程 </a>
</span><span>
<i></i>
<a href="/major/?t=7">机械工程 </a>
</span><span>
<i></i>
<a href="/major/?t=8">机电一体化 </a>
</span><span>
<i></i>
<a href="/major/?t=80">汽车工程 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=5" onclick="clickBtn(5,'menu_zydlz')">交通运输类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=22">物流管理 </a>
</span><span>
<i></i>
<a href="/major/?t=38">铁道工程 </a>
</span><span>
<i></i>
<a href="/major/?t=52">交通运输 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=9" onclick="clickBtn(9,'menu_zydlz')">石化地矿类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=17">安全工程 </a>
</span><span>
<i></i>
<a href="/major/?t=19">石油 </a>
</span><span>
<i></i>
<a href="/major/?t=20">环境工程 </a>
</span><span>
<i></i>
<a href="/major/?t=26">国土资源 </a>
</span><span>
<i></i>
<a href="/major/?t=56">采矿 </a>
</span><span>
<i></i>
<a href="/major/?t=58">新能源 </a>
</span><span>
<i></i>
<a href="/major/?t=59">燃气 </a>
</span><span>
<i></i>
<a href="/major/?t=79">冶金 </a>
</span><span>
<i></i>
<a href="/major/?t=90">宝石 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="3">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=2" onclick="clickBtn(2,'menu_zydlz')">师范语言类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=2">汉语言文学 </a>
</span><span>
<i></i>
<a href="/major/?t=10">物理 </a>
</span><span>
<i></i>
<a href="/major/?t=21">计算机教育 </a>
</span><span>
<i></i>
<a href="/major/?t=39">初等教育 </a>
</span><span>
<i></i>
<a href="/major/?t=40">学前教育 </a>
</span><span>
<i></i>
<a href="/major/?t=41">小语种 </a>
</span><span>
<i></i>
<a href="/major/?t=42">英语 </a>
</span><span>
<i></i>
<a href="/major/?t=43">体育 </a>
</span><span>
<i></i>
<a href="/major/?t=45">教育管理 </a>
</span><span>
<i></i>
<a href="/major/?t=65">数学 </a>
</span><span>
<i></i>
<a href="/major/?t=66">思想政治 </a>
</span><span>
<i></i>
<a href="/major/?t=69">地理 </a>
</span><span>
<i></i>
<a href="/major/?t=74">生物 </a>
</span><span>
<i></i>
<a href="/major/?t=75">历史 </a>
</span><span>
<i></i>
<a href="/major/?t=76">化学 </a>
</span><span>
<i></i>
<a href="/major/?t=77">美术 </a>
</span><span>
<i></i>
<a href="/major/?t=89">音乐 </a>
</span><span>
<i></i>
<a href="/major/?t=96">特殊教育 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=13" onclick="clickBtn(13,'menu_zydlz')">艺术传媒类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=46">艺术 </a>
</span><span>
<i></i>
<a href="/major/?t=55">新闻 </a>
</span><span>
<i></i>
<a href="/major/?t=71">广告 </a>
</span><span>
<i></i>
<a href="/major/?t=72">广播电视 </a>
</span><span>
<i></i>
<a href="/major/?t=73">摄影 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=15" onclick="clickBtn(15,'menu_zydlz')">心理学类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=60">心理学 </a>
</span>
</p>
</div>
</div>
<div class="school-select" style="display: none;" data-type="4">
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=7" onclick="clickBtn(7,'menu_zydlz')">土建类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=11">土木工程 </a>
</span><span>
<i></i>
<a href="/major/?t=32">工程管理 </a>
</span><span>
<i></i>
<a href="/major/?t=36">建筑工程 </a>
</span><span>
<i></i>
<a href="/major/?t=44">工程造价 </a>
</span><span>
<i></i>
<a href="/major/?t=47">房地产 </a>
</span><span>
<i></i>
<a href="/major/?t=51">道路桥梁 </a>
</span><span>
<i></i>
<a href="/major/?t=86">水利水电 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=16" onclick="clickBtn(16,'menu_zydlz')">农业类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=62">动物医学 </a>
</span><span>
<i></i>
<a href="/major/?t=64">农业技术 </a>
</span><span>
<i></i>
<a href="/major/?t=70">园林园艺 </a>
</span><span>
<i></i>
<a href="/major/?t=82">农村管理 </a>
</span><span>
<i></i>
<a href="/major/?t=83">林业 </a>
</span><span>
<i></i>
<a href="/major/?t=84">水产养殖 </a>
</span>
</p>
</div>
<div class="school-list">
<p class="sel-major">
<strong class="active">
<a href="/major/?b=19" onclick="clickBtn(19,'menu_zydlz')">其他类 </a>
</strong>
<span>
<i></i>
<a href="/major/?t=28">大气科学 </a>
</span><span>
<i></i>
<a href="/major/?t=78">食品 </a>
</span><span>
<i></i>
<a href="/major/?t=95">材料 </a>
</span><span>
<i></i>
<a href="/major/?t=100">产品设计 </a>
</span>
</p>
</div>
</div>
<div class="school-select" data-type="5" style="display: none;">
<div class="school-list">
<p style="display: block;">
<strong class="active"><a href="/school/index.html">选院校</a></strong>
<span>
<i></i>
<a href="School/10032.html" onclick="clickBtn(10032,'memu_syschool')">北京语言大学 </a>
</span><span>
<i></i>
<a href="School/10055.html" onclick="clickBtn(10055,'memu_syschool')">南开大学 </a>
</span><span>
<i></i>
<a href="School/10141.html" onclick="clickBtn(10141,'memu_syschool')">大连理工大学 </a>
</span><span>
<i></i>
<a href="School/10200.html" onclick="clickBtn(10200,'memu_syschool')">东北师范大学 </a>
</span><span>
<i></i>
<a href="School/10159.html" onclick="clickBtn(10159,'memu_syschool')">中国医科大学 </a>
</span><span>
<i></i>
<a href="School/10145.html" onclick="clickBtn(10145,'memu_syschool')">东北大学 </a>
</span><span>
<i></i>
<a href="School/10394.html" onclick="clickBtn(10394,'memu_syschool')">福建师范大学 </a>
</span><span>
<i></i>
<a href="School/10183.html" onclick="clickBtn(10183,'memu_syschool')">吉林大学 </a>
</span><span>
<i></i>
<a href="School/10635.html" onclick="clickBtn(10635,'memu_syschool')">西南大学 </a>
</span><span>
<i></i>
<a href="School/10698.html" onclick="clickBtn(10698,'memu_syschool')">西安交通大学 </a>
</span><span>
<i></i>
<a href="School/10626.html" onclick="clickBtn(10626,'memu_syschool')">四川农业大学 </a>
</span><span>
<i></i>
<a href="School/11901.html" onclick="clickBtn(11901,'memu_syschool')">四川大学 </a>
</span><span>
<i></i>
<a href="School/10173.html" onclick="clickBtn(10173,'memu_syschool')">东北财经大学 </a>
</span><span>
<i></i>
<a href="School/10007.html" onclick="clickBtn(10007,'memu_syschool')">北京理工大学 </a>
</span><span>
<i></i>
<a href="School/10613.html" onclick="clickBtn(10613,'memu_syschool')">西南交通大学 </a>
</span><span>
<i></i>
<a href="School/10030.html" onclick="clickBtn(10030,'memu_syschool')">北京外国语大学 </a>
</span><span>
<i></i>
<a href="School/10511.html" onclick="clickBtn(10511,'memu_syschool')">华中师范大学 </a>
</span><span>
<i></i>
<a href="School/10224.html" onclick="clickBtn(10224,'memu_syschool')">东北农业大学 </a>
</span><span>
<i></i>
<a href="School/10730.html" onclick="clickBtn(10730,'memu_syschool')">兰州大学 </a>
</span><span>
<i></i>
<a href="School/10027.html" onclick="clickBtn(10027,'memu_syschool')">北京师范大学 </a>
</span><span>
<i></i>
<a href="School/10036.html" onclick="clickBtn(10036,'memu_syschool')">对外经济贸易大学 </a>
</span><span>
<i></i>
<a href="School/10004.html" onclick="clickBtn(10004,'memu_syschool')">北京交通大学 </a>
</span><span>
<i></i>
<a href="School/10614.html" onclick="clickBtn(10614,'memu_syschool')">电子科技大学 </a>
</span><span>
<i></i>
<a href="School/10295.html" onclick="clickBtn(10295,'memu_syschool')">江南大学 </a>
</span><span>
<i></i>
<a href="School/10013.html" onclick="clickBtn(10013,'memu_syschool')">北京邮电大学 </a>
</span><span>
<i></i>
<a href="School/10033.html" onclick="clickBtn(10033,'memu_syschool')">中国传媒大学 </a>
</span><span>
<i></i>
<a href="School/10046.html" onclick="clickBtn(10046,'memu_syschool')">中央音乐学院 </a>
</span><span>
<i></i>
<a href="School/b0001.html" onclick="clickBtn(b0001,'memu_syschool')">北京大学（医学） </a>
</span><span>
<i></i>
<a href="School/10002.html" onclick="clickBtn(10002,'memu_syschool')">中国人民大学 </a>
</span><span>
<i></i>
<a href="School/10056.html" onclick="clickBtn(10056,'memu_syschool')">天津大学 </a>
</span><span>
<i></i>
<a href="School/10699.html" onclick="clickBtn(10699,'memu_syschool')">西北工业大学 </a>
</span><span>
<i></i>
<a href="School/11414.html" onclick="clickBtn(11414,'memu_syschool')">中国石油大学(华东) </a>
</span><span>
<i></i>
<a href="School/11415.html" onclick="clickBtn(11415,'memu_syschool')">中国地质大学(北京) </a>
</span><span>
<i></i>
<a href="School/21414.html" onclick="clickBtn(21414,'memu_syschool')">中国石油大学(北京) </a>
</span><span>
<i></i>
<a href="School/51315.html" onclick="clickBtn(51315,'memu_syschool')">广东开放大学 </a>
</span>
</p>
</div>
</div>
</div>
</div>
样式表如下：
.qlunbo {
height: 457px;
width: 100%;
}
.qlunbo .smalItem {
width: 1180px;
margin: 0 auto;
}
.qlunbo .leftnav {
position: relative;
top: 15px;
width: 290px;
height: 410px;
background-color: #252a31;
opacity: .95;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
font-size: 13px;
z-index: 5;
}
.qlunbo .leftnav .navbox {
padding-top: 20px;
}
.qlunbo .leftnav .navbox .list-box {
padding: 0 20px;
}
.qlunbo .leftnav .navbox .title {
background-color: rgba(255, 255, 255, .1)!important;
filter: Alpha(opacity=30);
font-size: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 42px;
line-height: 42px;
color: #fff;
padding: 0 10px;
cursor: pointer;
}
.qlunbo .leftnav .navbox .title p {
margin: 0;
padding: 0;
}
.qlunbo .leftnav .navbox .title p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.leftnav .navbox .title strong {
line-height: 42px;
font-weight: 400;
float: left;
}
.leftnav .navbox .list-box {
padding: 0 20px;
}
.leftnav .navbox .navlist {
width: 100%;
height: 48px;
line-height: 48px;
border-bottom: 1px dashed #fff;
cursor: pointer;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
.leftnav .navbox span {
margin-left: -5px;
}
.leftnav .navbox a {
margin-right: 5px;
color: #fff;
}
.leftnav .navbox .iconfont {
position: absolute;
right: 3px;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.qlunbo .leftnav .choose {
position: relative;
background-color: rgba(255, 255, 255, .1)!important;
filter: Alpha(opacity=30);
margin: 0 20px 20px 20px;
padding: 16px 0 16px 12px;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
z-index: 1;
}
.qlunbo .leftnav .choose p.box {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
.qlunbo .leftnav .choose p.logo {
margin-right: 20px;
width: 50px;
height: 50px;
}
.qlunbo .leftnav .choose p.box {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
.qlunbo .leftnav .choose p.box strong {
font-weight: 400;
font-size: 26px;
color: #fff;
display: block;
}
.qlunbo .leftnav .choose p.box span {
color: #c6c6c6;
}
.qlunbo .leftnav .school-select {
position: absolute;
z-index: 2;
top: 0;
left: 290px;
width: 588px;
min-height: 383px;
padding: 27px 20px 0 20px;
background-color: #fff;
border: 1px solid #e8e8e8;
-webkit-box-shadow: 0 0 5px 0 #f2f2f2;
-moz-box-shadow: 0 0 5px 0 #f2f2f2;
box-shadow: 0 0 5px 0 #f2f2f2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.qlunbo .leftnav .school-select .school-list {
word-break: break-word;
width: 100%;
overflow-x: hidden;
font-size: 0;
}
.qlunbo .leftnav .school-select .school-list .sel-major {
margin-bottom: 25px;
}
.qlunbo .leftnav .school-select .school-list strong {
display: block;
padding-left: 13px;
margin-bottom: 10px;
font-size: 18px;
font-weight: 400;
color: #212121;
}
.qlunbo .leftnav .school-select .school-list strong.active a {
color: #fe9b00;
}
.qlunbo .leftnav .school-select .school-list span {
display: inline-block;
margin: 0 14px 22px -1px;
white-space: nowrap;
}
.qlunbo .leftnav .school-select .school-list span i {
display: inline-block;
height: 18px;
width: 1px;
margin-right: 14px;
vertical-align: middle;
background-color: #727272;
}
.qlunbo .leftnav .school-select .school-list span a {
vertical-align: middle;
font-size: 15px;
color: #212121;
}
.qlunbo .leftnav .navbox a:hover {
color: #fe9b00;
}
.qlunbo .leftnav .navbox em {
margin-right: 5px;
color: #fff;
}
.qlunbo .leftnav .navbox em:hover {
color: #fe9b00;
}
.qlunbo .leftnav .choose:hover {
background-color: rgba(23, 23, 23, .2)!important;
filter: Alpha(opacity=30);
}
.qlunbo .leftnav .school-select .school-list span a:hover {
color: #fe9b00;
}
.qlunbo .show-sel-list {
-webkit-border-radius: 5px 0 0 5px!important;
-moz-border-radius: 5px 0 0 5px!important;
border-radius: 5px 0 0 5px!important;
}
.qlunbo .show-sel-list .school-select {
-webkit-border-radius: 0 5px 5px 0!important;
-moz-border-radius: 0 5px 5px 0!important;
border-radius: 0 5px 5px 0!important;
}
js如下：
<script type="text/javascript">
seajs.use(['jquery.select']);
var $schoolListEle = $(".school-select");
var $leftNavEle = $(".leftnav");
/*二级菜单--鼠标悬停--开始*/
$('body').on('mousemove', '.over-class', function (event) {
$schoolListEle.hide();
var num = $(this).attr("data-num");
$leftNavEle.addClass('show-sel-list');
$($schoolListEle[num]).show();
})
/*二级菜单--鼠标悬停--结束*/
/*二级菜单--鼠标离开 --开始*/
$('body').on('mouseleave', '.leftnav', function (e) {
$leftNavEle.removeClass('show-sel-list');
$schoolListEle.hide();
})
/*二级菜单--鼠标离开--结束*/
$('body').on('mouseenter', '.leave-class', function (e) {
$leftNavEle.removeClass('show-sel-list');
$schoolListEle.hide();
})
</script>
div嵌套，常见左右分类栏目的更多相关文章
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- div嵌套引起的margin-top不起作用
通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...
- 实战案例：DIV嵌套
缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构.如果想对段落内部分内联元素或文本应 ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- 解决div嵌套时IE8和FF无法自适应高度
解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...
- html标签被div嵌套页面字体变大的解决办法
html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...
- HTML中div嵌套div的margin不起作用
下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...
- Div+CSS常见错误总结
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用cs ...
- [Machine Learning] 机器学习常见算法分类汇总
声明:本篇博文根据http://www.ctocio.com/hotnews/15919.html整理,原作者张萌,尊重原创. 机器学习无疑是当前数据分析领域的一个热点内容.很多人在平时的工作中都或多 ...
随机推荐
- python webdriver api-对启动的火狐浏览器添加配置
Webdriver启用的火狐不带插件,可以自已进行配置 先找到火狐的安装路径 C:\Program Files\Mozilla Firefox 步骤说明 在CMD中使用cd命令进入firefox.ex ...
- php上传文件，接口是java,go。
$uri = ‘https://www.xxx.com/api/xxxxx’; $ch = curl_init(); //加@符号curl就会把它当成是文件上传处理 $tmpName = $_FILE ...
- kafka 常用参数
通常的讲:kafka 的参数分为 Broker Configs 和 Topic-Level Configs,以 min.insync.replicas 为例,可以在 broker 和 topic 级别 ...
- ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别
最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...
- Ubuntu系统建立交叉编译环境
飞凌 FET6818核心板 解压编译器: tar zxvf arm-cortex_a9_eabi-4.7-eglibc-2.18.tar.gz -C/opt 设置默认编译环境: vi /etc/pr ...
- Freeswitch 各版本一键安装脚本 Freeswitch 快速安装 G729编解码库
最近有时间整理,写了freeswitch的一键安装包分享一下,里面带有 mysql=0 是否选择安装mysql. 其他提示:脚本里面集成了安装g729脚本,支持录音.转码的bcg729脚本. 1.下载 ...
- Python-接口自动化（九）
python操作Excel处理测试数据(九) (十)python操作Excel读/写测试数据 1.夹心饼干 setUp:在每一条测试用例执行之前执行 tearDown:在每一条测试用例执行之后执行 上 ...
- 使用docker安装sentry
一.安装docker yum -y install docker 更换docker镜像源为中科大的 在配置文件/etc/docker/daemon.json中加入 { "registry-m ...
- 安装CaffeOnSpark过程中遇到的问题及解决方案
安装教程来自 http://blog.csdn.net/sadonmyown/article/details/72781393 首先,我使用的节点环境是ubuntu 16.04.1,事先 成功安装了s ...
- 结队开发之NABCD
我们的产品小工具集合是为了解决办公室办公人员缺少一些快捷操作的痛苦,他们需要在不用登陆QQ或者QQ浏览器的情况下实现截图功能,但是现有的方案并没有很好地解决这些需求,我们有独特的办法,小工具集合中提供 ...