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整理,原作者张萌,尊重原创. 机器学习无疑是当前数据分析领域的一个热点内容.很多人在平时的工作中都或多 ...
随机推荐
- jquery表单提交获取数据(带toast dialog)
最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...
- shift and算法
1. CF 914F Substrings in a String 大意: 给定一个串s, q个询问, (1)单点修改, (2)询问[l,r]范围内串y的出现次数. shift and算法板子题 #p ...
- 微信小程序分包跳转主包页面
由于公司项目比较多,我们事业部的微信小程序就在一个分包里.那分包页面要回到主包的首页,该怎么跳转呢,有以下两种方法 wx.switchTab(Object object) 跳转到 tabBar 页面, ...
- C++（实验二）
实验结论 1.函数重载编程练习: 编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main( )函数中定义不同类型 数据,调用测试. #include <i ...
- git-commit Angular规范
commit message的格式 每次提交,Commit message 都包括三个部分:Header,Body 和 Footer. <type>(<scope>): < ...
- Django_创建项目
安装django pip install Django 将下面路径添加到系统环境变量的path中 C:\Users\12978\AppData\Local\Programs\Python\Python ...
- 【调试基础】Part 4 保护模式
保护模式.虚拟内存.权限
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- MSRHook与SSDTHook
//方式1:MSR Hook #include <ntifs.h> UINT32 oldaddr = ; UINT32 pidtoprotect = ; PCLIENT_ID pid = ...
- 【转载】Excel 三维地图入门
三维地图入门(office 2016) https://support.office.com/zh-cn/article/%E4%B8%89%E7%BB%B4%E5%9C%B0%E5%9B%BE%E5 ...