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整理,原作者张萌,尊重原创. 机器学习无疑是当前数据分析领域的一个热点内容.很多人在平时的工作中都或多 ...
随机推荐
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
- grunt,提示node不是内部命令也不是外部命令
昨天配vue环境,把环境变量改错了.今天grunt报错了,百度一下,就好啦. https://blog.csdn.net/qq_37248318/article/details/80839564 这个 ...
- 初识ldap
什么是LDAP? LDAP的英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的, 但是简单多了并且可以根据需要定制.与 ...
- IIS环境配置和项目部署
本人实际工作项目中IIS部署,亲测可用~~ 具体步骤: 1.打开控制面板 2.打开程序和功能 3.打开或关闭Windous功能 然后勾选相关内容: 4.添加应用程序 先打开iis管理器页面(控制面板— ...
- 在Debian9服务器上安装最新版Python
通过Xshell 6 远程连接linux服务器 安装前的准备工作 更新服务器: 命令:apt update && apt upgrade -y 安装python3的依赖库: 命令:ap ...
- 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- Gulp 之图片压缩合并
同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作. 其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/ ...
- python 对象存储OSS 阿里云
SDK参考 ->python->上传文件->简单上传 # -*- coding: utf-8 -*- import oss2 auth=oss2.Auth('<yourAcc ...
- 增加 jQueryValidate的手机号验证功能
1.通过addMethod增加手机号的验证方法 (位置:和$('form').validate({}) 同级别) //增加手机号验证规则 $.validator.addMethod("isM ...
- JavaScript热身练习1
把某个元素移出你的视线: 1.display:none:(显示为无,不占地) 2.visibility:hidden:(隐藏,占地) 3.宽或者高设置为零 4.透明度设置 5.left/top (定位 ...