其他
【每日一练】92—实现一个耳机音箱专卖店网站的静态页面
写在前面
前面两天一直没有更新,今天来一个静态页面的练习,也许有人觉得简单,也有人觉得有点难度,这个都没有关系,觉得简单的直接跳过,觉得有点难度的,可以看着代码自己敲一遍,因为每个人的情况不太一样,一个内容不可能适合所有人,所以大家根据自己情况来就好了。
现在,我们就来看一下,今天这个练习的最终效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>【每日一练】92—实现一个耳机音箱专卖店网站的静态页面</title>
<!---- 字体图标 文件---->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<header>
<a href="http://www.webqdkf.com" class="logo"><i class='fa fa-apple'></i> 耳机音箱</a>
<ul class="navbar">
<li><a href="http://www.webqdkf.com" class="active">全部产品</a></li>
<li><a href="http://www.webqdkf.com">网络教学专用</a></li>
<li><a href="http://www.webqdkf.com">耳机</a></li>
<li><a href="http://www.webqdkf.com">音箱</a></li>
<li><a href="http://www.webqdkf.com">联系我们</a></li>
</ul>
<div class="header-icons">
<i class='fa fa-reorder' ></i>
<i class='fa fa-cart-plus' ></i>
<div class="bx bx-menu" id="menu-icon"></div>
</div>
</header>
<section class="home">
<div class="home-img">
<img src="img/product1.png" class="one">
</div>
<div class="home-text">
<h1>无线蓝牙耳机</h1>
<h3>视频网络教学专用</h3>
<h3>199.00</h3>
<a href="http://www.webqdkf.com" class="btn">马上购买</a>
</div>
</section>
<div class="main">
<div class="row">
<li><img src="img/main1.png" onclick="slider('img/product1.png')"></li>
</div>
<div class="row row2">
<li><img src="img/main2.png" onclick="slider('img/product2.png')"></li>
</div>
<div class="row row3">
<li><img src="img/main3.png" onclick="slider('img/product3.png')"></li>
</div>
</div>
<a href="http://www.webqdkf.com" class="bottom">查看更多产品<i class='fa fa-arrow-circle-o-down' ></i></a>
<script type="text/javascript">
function slider(anything){
document.querySelector('.one').src = anything;
};
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menu.onclick = () => {
menu.classList.toggle('bx-x');
navbar.classList.toggle('open');
}
</script>
</body>
</html>
*{
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;
}
}
写在最后
以上就是我今天跟大家分享的【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号