我們需要滾動頁面到達某個高度時,菜單就會點亮所屬該處的菜單項;當我們需要快速定位時,就點擊所屬的菜單項,讓頁面滑到要定位的高度。
<header class="js_header">
<div class="header w1200">
<a href="#">
<div class="logo fl">
<img src="img/red.png" />
</div>
</a>
<ul class="menu fr js_menu">
<li><a href="index.html#body" class="active">首頁</a></li>
<li><a href="index.html#about">關于</a></li>
<li><a href="index.html#service">服務</a></li>
<li><a href="index.html#team">團隊</a></li>
<li><a href="index.html#show">作品</a></li>
<li><a href="index.html#reason">優勢</a></li>
<li><a href="index.html#price">價錢</a></li>
<li><a href="index.html#footer">聯系</a></li>
</ul>
</div>
</header>
<section class="banner" id="banner">banner</section>
<section class="about" id="about"></section>
<section class="service" id="service">about</section>
<section class="team"id="team" >team</section>
<section class="show"id="show" >show</section>
<section class="reason"id="reason" >reason</section>
<section class="price" id="price">price</section>
<section class="footer"id="footer" >footer</section>
</html>
.banner,.about,.service,.team,.show,.reason,.price,.footer{
height:500px;
color:black;
font-size:28px;
}
.header .menu {
padding-top: 20px;
}
.header .menu ul{
list-style: none;
}
.header .menu li {
float: left;
padding: 5px 10px;
margin-left: 3px;
}
.header .active {
color: #e6400c;
}
<script>.
$(function() {
$(window).scroll(function() {
var _height = $(document).scrollTop();
//導航
if(_height > 100) {
$('.js_header').css({
'position': 'fixed',
'top': '0',
'right': '0',
'left': '0'
})
} else {
$('.js_header').css({
'position': 'relative',
'top': '0',
'right': '0',
'left': '0'
})
}
ADDCALSS(_height, '.banner', 0);
ADDCALSS(_height, '.about', 1);
ADDCALSS(_height, '.service', 2);
ADDCALSS(_height, '.team', 3);
ADDCALSS(_height, '.show', 4);
ADDCALSS(_height, '.reason', 5);
ADDCALSS(_height, '.price', 6);
ADDCALSS(_height, '.footer', 7);
});
function ADDCALSS(_height, _classsName, _index) {
var _serviceH = $(_classsName).offset().top;
if(_height > _serviceH-60) {
$('.js_menu a').removeClass("active");
$('.js_menu a').eq(_index).addClass("active");
}
}
$('.js_menu a').on('click', function(event) {
event.preventDefault();//阻止默認行為
$('html,body').animate({
scrollTop: $("#" + this.href.split("#")[1]).offset().top
}, 600);
$('.js_menu a').removeClass('active');
$(this).addClass('active');
});
})
</script>.
很棒的一個效果不是嗎?
ay01
day02
day03
day04
day05
day06
day07
day08
day09
day10
day11
day12
幾天我在面試前端開發同學的時候,有問到關于margin基礎布局相關內容的過程中,發現很多同學基本解釋不清楚,今天剛好有點時間就整理了一篇筆記出來。就以下5點在CSS布局經常會用到的經典布局解決方案。
可以嘗試動手試一試,有什么疑問 !可隨時交流,有問必答 。
margin 縱向重疊(合并)問題
元素垂直排列時,第一個元素的下外邊距與第二個元素的上外邊距會發生合并,合并后的間距就是兩者中最大的那個值。
<style>
.box{
margin-top:10px;/*上外邊距*/
margin-bottom:20px;/*下外邊距*/
height: 20px;
background-color:skyblue;
}
</style>
<body>
<div class="box">item1</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">item4</div>
</body>
答案:
解析:item1 與 item4 之間的間距為 3個下外邊距大小+2個盒子高度=20*3+20*2=100px
<style>
.box{
margin-top:10px;
margin-bottom:20px;
background-color:skyblue;
}
</style>
<body>
<div class="box">item1</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">item4</div>
</body>
答案: item1與item4之間間距為 20px
解析:因為中間兩個box中沒有內容也沒有邊框線,所以外邊距會一直重疊合并,所以最后item1和item4之間距離只有一個下外邊距的大小
margin 穿透問題
當一個元素包含在另一個元素中時,如果父元素沒有設置內邊距或邊框把外邊距分隔開,它們的上或下外邊距也會發生合并。
<style>
body{
margin:0;
padding:0;
}
.container{
width:300px;
height: 300px;
background-color: salmon;
margin-top:100px;/*與瀏覽器頂部的距離*/
border:5px solid blue;
}
.container .item{
width:200px;
height: 200px;
background-color: skyblue;
margin-top:50px;/*因為container中加了border邊框,所以這里的外邊距不會穿透合并*/
}
.container .item .box{
width:100px;
height: 100px;
background-color: bisque;
margin-top:10px;/*item沒有加邊框線,內邊距和其它內容,所以外邊距會發生穿透合并*/
border:5px solid red;
}
</style>
<body>
<div class="container">
<div class="item">
<div class="box"></div>
</div>
</div>
</body>
答案: 100px 、155px、155px
解析:
.container與瀏覽器頂部距離是100px,
.item與瀏覽器頂部距離100px + 5px+50px=155px
.box與瀏覽器頂部距離:100px+5px+50px=155px
margin-left 設置負值,元素向左移動
margin-right 設置負值,自身不受影響,右邊元素向左移動
margin-top設置負值,元素向上移動
margin-bottom 設置負值,自身不受影響,下方元素向上移動
<style>
body{
margin:0;
}
.container{
width:500px;
height:200px;
padding:20px 0px;
border:5px solid #ddd;
margin:0px auto;
}
.container .common{
width:200px;
height: 200px;
float: left;
}
.container .box1{
background-color: skyblue;
/* margin-left:-100px; 元素自身向左移動,右邊的元素也會受影響*/
margin-right:-100px;/*元素自身不受影響,右邊元素向左移動*/
}
.container .box2{
background-color: tomato;
}
</style>
<body>
<div class="container">
<div class="box1 common"></div>
<div class="box2 common"></div>
</div>
</body>
當.container .box1中margin-left:-100px;時,如:圖1
當.container .box1中 margin-right:-100px;時,如:圖2
當.container .box1設置margin-left:-100px;和margin-right:-100px時,如:圖3
<style>
body{
margin:0;
}
.container{
height: 500px;
width: 200px;
padding:0px 20px;
border:5px solid #ddd;
margin-top:100px;
}
.container .common{
width:200px;
height: 200px;
}
.container .box1{
background-color: skyblue;
/*margin-top:-100px;元素向上移動,下方元素也會受影響*/
margin-bottom:-100px;/*自身不受影響,下方元素向上移動*/
}
.container .box2{
background-color: rgba(0,0,255,0.5);
}
</style>
<body>
<div class="container">
<div class="box1 common"></div>
<div class="box2 common"></div>
</div>
</body>
當.container .box1中margin-top:-100px時,如:圖 1
當.container .box1中margin-bottom:-100px時,如:圖 2
當.container .box1中同時設置margin-top:-100px; 和margin-bottom:-100px;時,如:圖 3
這種布局的優點:
中間一欄內容最重要,最先加載和渲染,同時對搜索引擎優化最利。
兩邊內容固定,中間內容自適應
<style>
body{
margin:0;
/*核心代碼*/
min-width: 650px;/*當頁面寬度不夠時,出現滾動條而不會造成布局錯亂*/
}
.clearfix::after{
display: block;
content: "";
clear: both;
}
.fl{/*核心代碼*/
float:left;/*三個盒子一定要添加浮動*/
}
.header{
height: 100px;
background-color: tomato;
}
.container{
padding-left:200px;/*左邊預留200px位置 用來放left*/
padding-right:250px;/*右邊預留200px位置 用來放right*/
}
.container .center{
width:100%;/*自適應container的寬度,實現自適應縮放*/
height: 500px;
background-color: skyblue;
}
.container .left{
width:200px;
height: 500px;
background-color:cadetblue;
/*核心代碼*/
margin-left:-100%;/*盒子向左移,因為加了浮動,所以會移動到上一行的最左邊*/
position: relative;/*利用相對定位,再把盒子往左移200px就占據了最左邊預留的200px空間*/
left:-200px;
}
.container .right{
width:250px;
height: 500px;
background-color:aquamarine;
/*核心代碼*/
margin-right:-250px;/*加上這個代碼,相當于right沒有一點寬度,就會移動到上的最右邊位置*/
}
.footer{
height: 100px;
background-color: #000;
}
</style>
<body>
<div class="header">頭部</div>
<div class="container clearfix">
<div class="center fl">中間</div>
<div class="left fl">左邊</div>
<div class="right fl">右邊</div>
</div>
<div class="footer">底部</div>
</body>
這種布局的優點:
中間一欄內容最重要,最先加載和渲染,同時對搜索引擎優化最利。
兩邊內容固定,中間內容自適應
<style>
body{
margin:0;
}
.fl{/*核心代碼*/
float: left;/*一定要添加浮動*/
}
.main{
background-color: #ddd;
width:100%;
}
.main .main-content{
background-color: skyblue;
height: 300px;
/*核心代碼*/
margin:0 200px 0 200px;/*盒子左右兩邊余留200px,分別給left和right來占用*/
}
.left{
width: 200px;
height: 300px;
background-color: coral;
/*核心代碼*/
margin-left:-100%;/*往左移動瀏覽器的寬度,最后移動到上一行的最左邊*/
}
.right{
width: 200px;
height: 300px;
background-color: tomato;
/*核心代碼*/
margin-left:-200px;/*相當于自身寬度為0了,因為加了浮動,然后就顯示在了上一行的最右邊*/
}
</style>
<body>
<div class="main fl">
<div class="main-content">中間</div>
</div>
<div class="left fl">左邊</div>
<div class="right fl">右邊</div>
</body>
為幫助到一部分同學不走彎路,真正達到一線互聯網大廠前端項目研發要求,首次實力寵粉,打造了《30天挑戰學習計劃》,內容如下:
HTML/HTML5,CSS/CSS3,JavaScript,真實企業項目開發,云服務器部署上線,從入門到精通
共4大完整的項目開發 !一行一行代碼帶領實踐開發,實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態,省得浪費時間。
從學習一開始就同步使用 Git 進行項目代碼的版本的管理,Markdown 記錄學習筆記,包括真實大廠項目的開發標準和設計規范,命名規范,項目代碼規范,SEO優化規范
從藍湖UI設計稿 到 PC端,移動端,多端響應式開發項目開發
這些內容在《30天挑戰學習計劃》中每一個細節都有講到,包含視頻+圖文教程+項目資料素材等。只為實力寵粉,真正一次掌握企業項目開發必備技能,不走彎路 !
過程中【不涉及】任何費用和利益,非誠勿擾 。
如果你沒有添加助理老師微信,可以添加下方微信,說明要參加30天挑戰學習計劃,來自頭條號!老師會邀請你進入學習,并給你發放相關資料
30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程
*請認真填寫需求信息,我們會在24小時內與您取得聯系。