看似簡(jiǎn)單的布局，卻非?？简?yàn)基本功，無(wú)縫滾動(dòng)圖片輪播CSS部分～
- <!DOCTYPE?html>??
- <html?lang="en">??
- ??
- <head>??
- ????<meta?charset="UTF-8">??
- ????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">??
- ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">??
- ????<title>Document</title>??
- ????<style>??
- ????????*?{??
- ????????????margin:?0;??
- ????????????padding:?0;??
- ????????}??
- ??
- ????????:root?{??
- ????????????--iwidth:?960px;??
- ????????????--iheight:?540px;??
- ????????}??
- ??
- ????????body?{??
- ????????????background-color:?#7f8c8d;??
- ????????????width:?100vw;??
- ????????????height:?100vh;??
- ????????????display:?flex;??
- ????????????justify-content:?center;??
- ????????????align-items:?center;??
- ????????}??
- ??
- ????????#img?{??
- ????????????width:?var(--iwidth);??
- ????????????height:?var(--iheight);??
- ????????????box-shadow:?0?0?15px?rgba(0,?0,?0,?.7);??
- ????????????border-radius:?10px;??
- ????????????overflow:?hidden;??
- ????????}??
- ??
- ????????#main?div?{??
- ????????????width:?var(--iwidth);??
- ????????????height:?var(--iheight);??
- ????????????border-radius:?10px;??
- ????????????flex-shrink:?0;??
- ????????????background-size:?cover;??
- ????????}??
- ??
- ????????#main?{??
- ????????????display:?flex;??
- ????????}??
- ??
- ????????#img1?{??
- ????????????background-image:?url(./img/lunbo1.png);??
- ????????}??
- ??
- ????????#img2?{??
- ????????????background-image:?url(./img/lunbo2.png);??
- ????????}??
- ??
- ????????#img3?{??
- ????????????background-image:?url(./img/lunbo3.png);??
- ????????}??
- ??
- ????????#img4?{??
- ????????????background-image:?url(./img/lunbo4.png);??
- ????????}??
- ??
- ????????#mask?{??
- ????????????width:?var(--iwidth);??
- ????????????height:?var(--iheight);??
- ????????????position:?absolute;??
- ????????????display:?flex;??
- ????????????justify-content:?space-between;??
- ????????}??
- ??
- ????????#mask?div?{??
- ????????????width:?25%;??
- ????????????height:?100%;??
- ????????????z-index:?999;??
- ????????????user-select:?none;??
- ????????????position:?relative;??
- ????????}??
- ??
- ????????.btn?{??
- ????????????display:?block;??
- ????????????width:?60px;??
- ????????????height:?60px;??
- ????????????border-radius:?10px;??
- ????????????background-color:?black;??
- ????????????opacity:?.5;??
- ????????????box-shadow:?0?0?10px?rgba(255,?255,?255.8);??
- ????????????color:?rgba(255,?255,?255,?.8);??
- ????????????font-size:?40px;??
- ????????????text-align:?center;??
- ????????????position:?absolute;??
- ????????????top:?50%;??
- ????????????/*水平方向移動(dòng)：（遮罩寬度-按鈕寬度）/2??*/??
- ????????????transform:?translate(90px,?-50%);??
- ????????????display:?none;??
- ????????}??
- ??
- ????????#l_mask:hover?.btn,??
- ????????#r_mask:hover?.btn?{??
- ????????????display:?block;??
- ????????}??
- ??
- ????????.btn:hover?{??
- ????????????cursor:?pointer;??
- ????????????background:?rgb(56,?17,?17,?.7);??
- ????????}??
- ????</style>??
- </head>??
- ??
- <body>??
- ????<div?id="img">??
- ????????<div?id="main">??
- ????????????<div?id="img1"></div>??
- ????????????<div?id="img2"></div>??
- ????????????<div?id="img3"></div>??
- ????????????<div?id="img4"></div>??
- ????????</div>??
- ????</div>??
- ????<div?id="mask">??
- ????????<div?id="l_mask">??
- ????????????<span?class="btn"><</span>??
- ????????</div>??
- ????????<div?id="r_mask">??
- ????????????<span?class="btn">></span>??
- ????????</div>??
- ????</div>??
- </body>??
- <script>??
- ??
- </script>??
- ??
- </html>??
標(biāo)簽：
