写在前面
如果你是一个热爱摄影的人，肯定也想把自己的作品呈现给更多人看，我们除了通过第三方的平台，分享你的摄影作品外，我们还可以通过自己的个人博客 者摄影网站来分享这些美丽又故事的摄影作品，因此，今天我们就一起练习写一个摄影网站，希望通过今天这个练习，能够给你带来一些新的启发。
现在，我们就一起来看一下今天练习的最终效果。
<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="#"> 3542525867</a></li><li><a href="#">电话 021-5429-1753</a></li><li><a href="#">shelvis88@163.com</a></li><li><a href="#"> （ID )</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> 2022 ? <a href="http://www.webqdkf.com"></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');};
写在最后
以上就是今天练习的摄影网站页面内容，如果你也想创建一个摄影网站，请赶紧练起来。
今天【每日一练】的全部内容均已分享完毕，希望今天的练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方
Powered by 小羊羔外链网 8.3.11
©2015 - 2024 小羊羔外链网
您的IP:3.135.190.101,2024-04-20 16:49:24,Processed in 0.05534 second(s).
