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整理,原作者张萌,尊重原创. 机器学习无疑是当前数据分析领域的一个热点内容.很多人在平时的工作中都或多 ...
随机推荐
- Codeforces Round #422 (Div. 2)E. Liar sa+st表+dp
题意:给你两个串s,p,问你把s分开顺序不变,能不能用最多k段合成p. 题解:dp[i][j]表示s到了前i项,用了j段的最多能合成p的前缀是哪里,那么转移就是两种,\(dp[i+1][j]=dp[i ...
- 怎样使用md命令一次建立多级子目录
https://jingyan.baidu.com/article/37bce2be30cae21002f3a224.html 点击开始,运行,在运行窗口中输入“cmd”. 打开cmd窗口之后,用 ...
- docker 容器的mysql主从复制
一. 1.首先拉取docker镜像,我们这里使用5.7版本的mysql: docker pull mysql:5.7 2.分别启动主从两个容器: docker run -p 3339:3306 - ...
- 360开启wifi无网络访问处理办法
一.背景说明 台式机默认没有无线网卡的,想开个wifi,在电脑上插上了个usb无线网卡然后开启“360免费WiFi”.但显示“无网络访问”,连上之后确实也不能访问外部网站. 二.处理办法 依次打开“控 ...
- learning makefile foreach
- Tensorflow搭建卷积神经网络识别手写英语字母
更新记录: 2018年2月5日 初始文章版本 近几天需要进行英语手写体识别,查阅了很多资料,但是大多数资料都是针对MNIST数据集的,并且主要识别手写数字.为了满足实际的英文手写识别需求,需要从训练集 ...
- tomcat启动正常，但是访问项目时，404. Eclipse没有正确部署工程项目
解决方案URL:http://blog.csdn.net/lynn_wgr/article/details/7751228
- 一、linux概述
1． 学习Linux之前先了解Unix Unix是一个强大的多用户.多任务操作系统.于1969年在AT&T的贝尔实验室开发.UNIX的商标权由国际开放标准组织(The Open Group) ...
- Java线程面试题Top50
不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java 语言一个重要的特点就是内置了对并发的支持,让 Java 大受企业和程序员的欢迎.大多数待遇丰厚的 Java 开发职位都要求开发者 ...
- 浅谈Vector、ArrayList、LinkedList
下图是Collection的类继承图 从图中可以看出:Vector.ArrayList.LinkedList这三者都实现了List 接口.所有使用方式也很相似,主要区别在于实现方式的不同,所以对不同的 ...