【每日一练】92—实现一个耳机音箱专卖店网站的静态页面
生活随笔
收集整理的這篇文章主要介紹了
【每日一练】92—实现一个耳机音箱专卖店网站的静态页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
寫在前面
前面兩天一直沒有更新，今天來一個靜態頁面的練習，也許有人覺得簡單，也有人覺得有點難度，這個都沒有關系，覺得簡單的直接跳過，覺得有點難度的，可以看著代碼自己敲一遍，因為每個人的情況不太一樣，一個內容不可能適合所有人，所以大家根據自己情況來就好了。
現在，我們就來看一下，今天這個練習的最終效果：
這個只是寫了首頁的第一屏內容，后面很多內容，需要我們繼續補充完整，如果有興趣的話，可以接著后面把它寫完整，如果沒有興趣，就先練習到這里也可以了。
現在，我們再來看一下具體的代碼實現過程：
HTML代碼：
CSS代碼：
*{padding: 0;margin: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;text-decoration: none;list-style: none; } :root{--bg-color: #101113;--text-color: #fff;--main-color: #34e7f8;--other-color: #fcfcfc;--h1-font: 6rem;--p-font: 1rem; } body{background: radial-gradient(50.53% 50.53% at 50.23% 49.47%, #414d59 0%, #1d2631 100%);color: var(--text-color); } header{position: fixed;width: 100%;top: 0;right: 0;z-index: 1000;display: flex;align-items: center;justify-content: space-between;padding: 30px 8%;transition: all .55s ease;background: transparent; } .logo{display: flex;align-items: center;color: var(--text-color);font-size: 28px;font-weight: bold; } .logo i{color: var(--main-color);font-size: 32px;margin-right: 5px; } .navbar{display: flex; } .navbar a{color: var(--other-color);font-size: var(--p-font);font-weight: 500;margin: 0 30px;transition: all .55s ease; } .navbar a:hover{color: var(--main-color); } .navbar a.active{color: var(--main-color); } .header-icons{display: flex;align-items: center; } #menu-icon{font-size: 35px;color: var(--text-color);z-index: 10001;cursor: pointer; } .header-icons i{margin-right: 25px;font-size: 28px;cursor: pointer;transition: all .55s ease; } .header-icons i:hover{transform: translateY(-5px);color: var(--main-color); }section{padding: 0 15%; } .home{position: relative;height: 100vh;width: 100%;display: grid;grid-template-columns: repeat(2, 1fr);align-items: center;gap: 2rem; } .home-text h1{font-size: var(--h1-font);line-height: 1.2;margin-bottom: 2px; } .home-text h5{color: #ffffff99;font-size: 14px;font-weight: 400;margin-bottom: 60px; } .home-text h3{font-size: 40px;font-weight: 700;letter-spacing: 2px;margin-bottom: 35px; } .btn{display: inline-block;padding: 15px 70px;font-size: 16px;font-weight: 500;background: transparent;border: 2px solid var(--text-color);color: var(--text-color);transition: all .55s ease; } .btn:hover{background: var(--text-color);border: 2px solid var(--text-color);color: #000; } .home-img img{max-width: 100%; }.main{position: absolute;top: 50%;left: 8%;transform: translateY(-50%);display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 2.5rem; } .main li img{width: 60px;height: auto;max-width: 100%; } .row{height: 80px;width: 80px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;background: var(--main-color);transition: all .55s ease;cursor: pointer; } .row:hover{transform: translateY(-8px); } .row2{background: #ff758d; } .row3{background: #ffd06d; }.bottom{position: absolute;bottom: 35px;right: 8%;display: flex;align-items: center;color: var(--text-color);font-size: 15px;font-weight: 500; } .bottom i{color: var(--main-color);font-size: 25px;margin-left: 15px;transition: all .55s ease; } .bottom i:hover{transform: translateY(-8px); }@media (max-width: 1740px){header{padding: 14px 2%;}.main{left: 2%;transition: .2s;}.bottom{right: 2%;transition: .2s;} }@media (max-width: 1625px){:root{--h1-font: 5rem;} } @media (max-width: 1400px){:root{--h1-font: 4rem;}.row{height: 60px;width: 60px;}.main li img{width: 40px;} }@media (max-width: 1150px){section{padding: 0 6%;} } @media (max-width: 1000px){section{padding: 40px 18%;}.home{height: auto;grid-template-columns: 1fr;}.home-img{text-align: center;}.home-img img{width: 400px;height: auto;max-width: 100%;}:root{--h1-font: 3.5rem;}.home-text{text-align: center;}.home-text h5{margin-bottom: 15px;}.home-text h3{font-size: 28px;margin-bottom: 45px;}.btn{padding: 10px 30px;font-size: 14px;}.bottom{display: none;} }@media (max-width: 890px){.navbar{position: absolute;top: 100%;right: -200%;width: 200px;height: 20vh;background: var(--main-color);display: flex;align-items: center;flex-direction: column;justify-content: flex-start;padding: 20px;border-radius: 4px;transition: all .55s ease;}.navbar a{display: block;margin: 4px 0;transition: all .45s ease;}.navbar a:hover{transform: translateY(5px);color: var(--text-color);}.navbar a.active{color: var(--text-color);}.navbar.open{right: 2%;} }@media (max-width: 600px){section{padding: 100px 18%;}.home{height: auto;}.home-img img{width: 300px;height: auto;max-width: 100%;}:root{--h1-font: 2.1rem;} }寫在最后
以上就是我今天跟大家分享的【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并將它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
總結
以上是生活随笔為你收集整理的【每日一练】92—实现一个耳机音箱专卖店网站的静态页面的全部內容，希望文章能夠幫你解決所遇到的問題。
