【每日一练】53—写一个完整的摄影网站页面
web前端开发
发表于
写在前面
如果你是一个热爱摄影的人，肯定也想把自己的作品呈现给更多人看，我们除了通过第三方的平台，分享你的摄影作品外，我们还可以通过自己的个人博客或者摄影网站来分享这些美丽又故事的摄影作品，因此，今天我们就一起练习写一个摄影网站，希望通过今天这个练习，能够给你带来一些新的启发。
现在，我们就一起来看一下今天练习的最终效果。
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>【每日一练】53—写一个完整的摄影单页网站</title><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body><!--header---><header><a href="#" class="logo"><img src="img/logo.png"></a><div class="bx bx-menu" id="menu-icon"></div><ul class="navbar"><li><a href="#home">首页</a></li><li><a href="#baby">儿童摄影</a></li><li><a href="#business">商务形象</a></li><li><a href="#product">产品静物</a></li><li><a href="#landscape">风景拍摄</a></li><li><a href="#contact">联系我们</a></li></ul></header><!--Home 开始---><section class="home" id="home"><div class="home-text"><h1>爱尔维斯工作室<br>平面设计&摄影&网站开发<br> 一站式企业宣传服务供应商</h1><p>一张照片<br> 一段回忆</p><a href="#" class="home-btn">马上咨询</a></div></section><!--container 开始---><section class="container"><div class="text"><h2>用镜头记录一个故事 <br> 一段回忆，一个精彩瞬间</h2></div><div class="row-items"><div class="container-box"><div class="container-img"><img src="img/trip1.png"></div><h4>儿童摄影</h4></div><div class="container-box"><div class="container-img"><img src="img/trip1.png"></div><h4>商务形象照</h4></div><div class="container-box"><div class="container-img"><img src="img/trip1.png"></div><h4>风景摄影</h4></div><div class="container-box"><div class="container-img"><img src="img/trip1.png"></div><h4>静物摄影</h4></div></div></section><!--儿童摄影 baby 开始---><section class="package" id="baby"><div class="title"><h2> 儿童摄影</h2></div><div class="package-content"><div class="box"><div class="thum"><img src="img/img1.jpg"><h3>￥699</h3></div><div class="dest-content"><div class="location"><h4>婴儿周岁照</h4><p>3周-7周出相册</p></div><div class="stars"><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a></div></div></div><div class="box"><div class="thum"><img src="img/img2.jpg"><h3>￥699</h3></div><div class="dest-content"><div class="location"><h4>儿童生活照</h4><p>4周-8周出相册</p></div><div class="stars"><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a></div></div></div><div class="box"><div class="thum"><img src="img/img3.jpg"><h3>￥699</h3></div><div class="dest-content"><div class="location"><h4>证件照</h4><p>可以拍摄，也可以直接那照片修</p></div><div class="stars"><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a><a href="#"><i class='bx bxs-star'></i></a></div></div></div></div></section><!--儿童摄影 baby 结束---><!--风景摄影 landscape 开始 ---><section class="destination" id="landscape"><div class="title"><h2> 风景摄影</h2></div><div class="destination-content"><div class="col-content"><img src="img/img01.jpg"><h5>2019年拍摄</h5><p>交大校园荷花</p></div><div class="col-content"><img src="img/img02.jpg"><h5>2019年拍摄</h5><p>交大校园荷花</p></div><div class="col-content"><img src="img/img03.jpg"><h5>2019年拍摄</h5><p>交大校园荷花</p></div><div class="col-content"><img src="img/img04.jpg"><h5>2019年拍摄</h5><p>交大校园荷花</p></div><div class="col-content"><img src="img/img05.jpg"><h5>2019年拍摄</h5><p>交大校园荷花</p></div><div class="col-content"><img src="img/img06.jpg"><h5>2019年拍摄</h5><p>交大校园荷花</p></div></div></section><!--风景摄影 landscape 结束---><!--Newsletter---><section class="newsletter"><div class="news-text"><h2>联系方式</h2><p>获取更多爱尔维斯工作室的提供的各项学习资源素材</p></div><div class="send"><form><input type="email" placeholder="你的邮箱地址" required><input type="submit" value="提交"></form></div></section><!--footer---><section id="contact"><div class="footer"><div class="main"><div class="list"><h4>联系我们</h4><ul><li><a href="#">关于我们</a></li><li><a href="#">关于付款</a></li><li><a href="#">关于退款</a></li><li><a href="#">问&答</a></li><li><a href="#">联系我们</a></li></ul></div><div class="list"><h4>联系我们</h4><ul><li><a href="#">关于我们</a></li><li><a href="#">关于付款</a></li><li><a href="#">关于退款</a></li><li><a href="#">问&答</a></li><li><a href="#">联系我们</a></li></ul></div><div class="list"><h4>联系方式</h4><ul><li><a href="#">微信：web-qdkf</a></li><li><a href="#">QQ：3542525867</a></li><li><a href="#">电话：021-5429-1753</a></li><li><a href="#">shelvis88@163.com</a></li><li><a href="#">公众号：web前端开发（ID：web_qdkf)</a></li></ul></div><div class="list"><h4>联系我们</h4><div class="social"><a href="#"><i class='fa fa-weibo' ></i></a><a href="#"><i class='fa fa-weixin' ></i></a><a href="#"><i class='fa fa-pinterest' ></i></a><a href="#"><i class='fa fa-qq' ></i></a></div></div></div></div><div class="end-text"><p>Copyright 2022 © <a href="http://www.webqdkf.com">web前端开发</a> All Rights Reserved. 备案号：沪ICP备19008412号-2</p></div></section></body></html>
*{padding: 0;margin: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;text-decoration: none;list-style: none;scroll-behavior: smooth;}:root{--bg-color: #fff;--text-color: #221314;--second-color: #5a7184;--main-color: #6e54fa;--big-font: 6rem;--h2-font: 3rem;--p-font: 1.1rem;}body{background: var(--bg-color);color: var(--text-color);}header{position: fixed;top: 0;right: 0;width: 100%;z-index: 1000;display: flex;align-items: center;justify-content: space-between;background: transparent;padding: 30px 18%;transition: ease .40s;}.logo{font-size: 35px;font-weight: 600;letter-spacing: 1px;color: var(--bg-color);}.logo img {width: 100px;}.navbar{display: flex;}.navbar a{color: var(--bg-color);font-size: var(--p-font);font-weight: 500;padding: 10px 22px;border-radius: 4px;transition: ease .40s;}.navbar a:hover{background: var(--bg-color);color: var(--text-color);box-shadow: 5px 10px 30px rgb(85 85 85 / 20%);border-radius: 4px;}#menu-icon{color: var(--bg-color);font-size: 35px;z-index: 10001;cursor: pointer;display: none;}section{padding: 80px 18%;}.home{position: relative;width: 100%;height: 100vh;background: url(../img/bg.jpg);background-size: cover;background-position: center;display: grid;grid-template-columns: repeat(1, 1fr);align-items: center;}.home-text h1{line-height: 1.2;color: #fff;color: var(--bg-color);font-family: sans-serif;letter-spacing: 4px;margin-bottom: 20px;font-size:40px;line-height:1.6;}.home-text p{color: #fff;font-size: 20px;font-weight: 400;line-height: 38px;margin-bottom: 50px;}.home-btn{display: inline-block;font-size: 16px;padding: 15px 30px;background: #fff;color: var(--main-color);border-radius: 4px;transition: ease .40s;}.home-btn:hover{background: var(--bg-color);transform: scale(1.1);}header.sticky{background: var(--bg-color);padding: 10px 18%;box-shadow: rgba(33,35,38, 0.1) 0px 10px 10px -10px;}.sticky .logo{color: var(--text-color);}.sticky .navbar a{color: var(--text-color);}.text h2{font-size: var(--h2-font);line-height: 1.6;}.row-items{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, auto));grid-gap: 2rem;align-items: center;text-align: center;margin-top: 5rem;}.container-box{background: var(--bg-color);border: 1px solid #f0eded;padding: 50px 10px;border-radius: 4px;transition: all 1s ease 0s;cursor: pointer;}.container-img img{height: 85px;width: 85px;padding: 15px;background: var(--bg-color);box-shadow: 5px 10px 30px rgb(85 85 85 / 20%);border-radius: 4px;margin-bottom: 15px;cursor: pointer;}.container-box h4{font-size: 24px;font-weight: 600;margin-bottom: 8px;}.container-box p{font-size: 15px;color: var(--second-color);}.container-box:hover{box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%);border: 1px solid transparent;transform: translateY(-3px);}.title{text-align: center;}.title h2{font-size: var(--h2-font);line-height: 1.2;}.package-content{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, auto));grid-gap: 2rem;align-items: center;margin-top: 5rem;}.thum{position: relative;transition: all .3s cubic-bezier(.445,.05,.55,.95);will-change: filter;cursor: pointer;}.thum img{width: 100%;height: auto;}.thum h3{position: absolute;font-size: 30px;font-weight: 600;text-align: right;color: var(--bg-color);top: 36px;right: 40px;}.dest-content{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;padding-top: 24px;}.stars i{color: var(--main-color);font-size: 20px;}.location h4{font-size: 24px;font-weight: 600;margin-bottom: 8px;}.location p{font-size: 15px;color: var(--second-color);}.thum:hover{filter: brightness(100%) hue-rotate(45deg);transform: scale(1.04);}.destination-content{display: grid;grid-template-columns: repeat(auto-fit, minmax(340px, auto));grid-gap: 2rem;align-items: center;margin-top: 5rem;}.col-content{position: relative;}.col-content img{width: 100%;height: 500px;object-fit: cover;border-radius: 15px;filter: brightness(80%);transition: all .3s cubic-bezier(.495,.05,.55,.95);will-change: filter;}.col-content h5{position: absolute;font-size: 22px;font-weight: 500;color: var(--bg-color);left: 15px;bottom: 60px;}.col-content p{position: absolute;font-size: 15px;color: var(--bg-color);left: 15px;bottom: 30px;letter-spacing: 2px;}.col-content img:hover{filter: brightness(100%) hue-rotate(45deg);transform: scale(1.04);cursor: pointer;}.newsletter{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;grid-gap: 3rem;}.news-text h2{font-size: var(--h2-font);margin-bottom: 5px;}.news-text p{font-size: var(--p-font);color: var(--second-color);line-height: 30px;}.newsletter form{max-width: 100%;width: 450px;position: relative;}.newsletter form input:first-child{display: inline-block;width: 100%;padding: 20px 150px 20px 30px;box-shadow: 5px 10px 30px rgb(85 85 85 / 20%);outline: none;border: none;border-radius: 15px;}.newsletter form input:last-child{display: inline-block;position: absolute;outline: none;border: none;padding: 14px 30px;border-radius: 15px;background: #4385f5;color: var(--bg-color);top: 6px;right: 6px;cursor: pointer;}#contact{background: #4385f5;}.main{display: flex;flex-wrap: wrap;}.footer{padding: 20px 0;}.list{width: 25%;}.list h4{font-size: 21px;color: var(--bg-color);margin-bottom: 30px;position: relative;}.list h4::before{content: "";position: absolute;height: 2px;width: 60px;left: 0;bottom: -10px;background: var(--bg-color);}.list ul li:not(last-child) {margin-bottom: 16px;}.list ul li a{color: #fff;font-size: var(--p-font);display: block;transition: .3s;}.list ul li a:hover{color: var(--bg-color);transform: translateX(14px);}.list .social a{height: 40px;width: 40px;background: var(--bg-color);color: #4385f5;display: inline-flex;align-items: center;justify-content: center;font-size: 21px;border-radius: 15px;transition: .3s;margin-right: 10px;}.list .social a:hover{transform: scale(1.1);}.end-text{text-align: center;padding-top: 90px;}.end-text p{color: var(--bg-color);font-size: 14px;letter-spacing: 2px;}.end-text p a{color:#fff;}@media (max-width: 1400px){header{padding: 17px 3%;transition: .2s;}header.sticky{padding: 10px 3%;transition: .2s;}section{padding: 80px 3%;transition: .2s;}:root{--big-font: 4.5rem;--h2-font: 2.3rem;--p-font: 1rem;transition: .2s;}}@media (max-width: 1040px){#menu-icon{display: block;}.stick #menu-icon{color: var(--text-color);}.home{height: 88vh;}.navbar{position: absolute;top: 0;right: -100%;width: 270px;height: 120vh;background: #1067cc;display: flex;flex-direction: column;align-items: center;padding: 150px 30px;transition: 0.5s all;}.navbar a{display: block;margin: 1.2rem 0;}.sticky .navbar a{color: var(--bg-color);}.navbar a:hover{color: var(--text-color);}.open{right: 0;}.list{width: 50%;margin-bottom: 12px;}}@media (max-width: 575px){.list{width: 100%;}.newsletter form{width: 350px;}:root{--big-font: 3.8rem;--h2-font: 1.8rem;transition: .2s;}.text{text-align: center;}.home{height: 85vh;transition: .2s;}}
const header = document.querySelector("header");window.addEventListener ("scroll", function() {header.classList.toggle ("sticky", window.scrollY > 0);});let menu = document.querySelector('#menu-icon');let navbar = document.querySelector('.navbar');menu.onclick = () => {menu.classList.toggle('bx-x');navbar.classList.toggle('open');};window.onscroll = () => {menu.classList.remove('bx-x');navbar.classList.remove('open');};
写在最后
以上就是今天练习的摄影网站页面内容，如果你也想创建一个摄影网站，请赶紧练起来。
今天【每日一练】的全部内容均已分享完毕，希望今天的练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号