其他
【每日一练】61—用HTML&CSS写一个个人单页博客站
前面我们已经通过使用HTML&CSS实现了一些单页网站的效果，今天我们还是继续来练习一个单页的案例，在练习中，有小伙伴问，这个单页的菜单跳转是怎么实现的？这个我主要是利用了锚点定位来实现的，关于它的详细介绍与使用实例可以自行查阅了解一下，我在这里，就不做详细介绍了。
现在，我们一起来看一下，今天练习的单页效果，具体请看下面视频：
源码素材下载地址：
https://url81.ctfile.com/f/21793581-670448340-cc52d8?p=2698
密码: 2698
<!DOCTYPE html><html><head> <title>【每日一练】61—用HTML&CSS写一个个人单页博客站</title> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body> <div class="hero" id="home"> <nav> <h2 class="logo">web前端开发</h2> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我</a></li> <li><a href="#techny">职业技能</a></li> <li><a href="#service">服务项目</a></li> <li><a href="#connect">联系我</a></li> </ul> <a href="http://www.webqdkf.com" class="btn">关注我</a> </nav>
<div class="content" > <h4>Hello,我是杨小爱</h4> <h1>web前端开发</h1> <h3>【web前端开发】公号创建者</h3> <p>博客网站：<a href="http://www.webqdkf.com">www.webqdkf.com</a></p> <div class="newslatter"> <form> <input type="email" name="email" id="mail" placeholder="输入你的邮箱地址"> <input type="submit" name="submit" value="立即订阅我"> </form> </div> </div> </div>
<!----about ----> <section class="about" id="about"> <div class="main"> <img src="images/main-img.png"> <div class="about-text"> <h2>关于我</h2> <h5>前端开发 & UI设计 & 平面设计 & 视频剪辑</h5> <p>我是一名设计开发人员，可以提供网站开发制作，UI设计，平面设计，视频制作服务项目；微信号：web-qdkf</p> <button type="button">了解更多</button> </div> </div> </section> <!-----techny ----> <div class="service" id="techny"> <div class="title"> <h2>职业技能</h2> </div> <div class="box"> <div class="card"> <i class="fa fa-code"></i> <h5>HTML & CSS & JS</h5> <div class="pra"> <p>一个专注web前端开发技术学习与研究的平台，网址:www.webqdkf.com</p> <p style="text-align: center;"> <a class="button" href="http://www.webqdkf.com">了解更多</a> </p> </div> </div> <div class="card"> <i class="fa fa-file-image-o"></i> <h5>PS & AI & Figma</h5> <div class="pra"> <p>一个专注web前端开发技术学习与研究的平台，网址:www.webqdkf.com</p> <p style="text-align: center;"> <a class="button" href="http://www.webqdkf.com">了解更多</a> </p> </div> </div> <div class="card"> <i class="fa fa-file-movie-o"></i> <h5>PR & AE</h5> <div class="pra"> <p>一个专注web前端开发技术学习与研究的平台，网址:www.webqdkf.com</p> <p style="text-align: center;"> <a class="button" href="http://www.webqdkf.com">了解更多</a> </p> </div> </div> </div> </div>
<!-----service ----> <div class="service" id="service"> <div class="title"> <h2>服务项目</h2> </div>
<div class="box"> <div class="card"> <i class="fa fa-cubes"></i> <h5>web前端开发</h5> <div class="pra"> <p>一个专注web前端开发技术学习与研究的平台，网址:www.webqdkf.com</p>
<p style="text-align: center;"> <a class="button" href="http://www.webqdkf.com">了解更多</a> </p> </div> </div>
<div class="card"> <i class="fa fa-cubes"></i> <h5>UI/平面设计</h5> <div class="pra"> <p>一个专注web前端开发技术学习与研究的平台，网址:www.webqdkf.com</p>
<p style="text-align: center;"> <a class="button" href="http://www.webqdkf.com">了解更多</a> </p> </div> </div>
<div class="card"> <i class="fa fa-cubes"></i> <h5>视频剪辑</h5> <div class="pra"> <p>一个专注web前端开发技术学习与研究的平台，网址:www.webqdkf.com</p>
<p style="text-align: center;"> <a class="button" href="http://www.webqdkf.com">了解更多</a> </p> </div> </div> </div> </div>
<!---contact ---> <div class="contact-me" id="connect"> <p>如果你想做一个漂亮的网站或者学习网站制作，平面设计，网页设计，UI设计</p> <a class="button-two" href="#">请联系我</a> </div>
<!---footer ----> <footer> <p>【web前端开发】公号平台</p> <p>一个专注web前端开发技术学习与研究的平台</p> <p>博客网址: <a href="http://www.webqdkf.com" >www.webqdkf.com</a></p> <div class="social"> <a href="http://www.webqdkf.com"><i class='fa fa-qq' ></i></a> <a href="http://www.webqdkf.com"><i class='fa fa-wechat' ></i></a> <a href="http://www.webqdkf.com"><i class='fa fa-weibo' ></i></a> </div> <p class="end">【web前端开发】公号平台</p> </footer></body></html>*{ padding: 0; margin: 0; font-family: 'Microsoft YaHei','Josefin Sans', sans-serif; box-sizing: border-box;}a { text-decoration: none;}.hero{ height: 100vh; width: 100%; background-image: url(../images/background.jpg); background-size: cover; background-position: center;}nav{ display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-left: 8%; padding-right: 8%; padding-bottom:10px; position:fixed; z-index:99; background:#222; width:100%;}.logo{ color: #00a6bc; font-size: 35px; letter-spacing: 1px; cursor: pointer;}nav ul li{ list-style-type: none; display: inline-block; padding: 10px 25px;}nav ul li a{ color: #fff; text-decoration: none; font-weight: bold; text-transform: capitalize;}nav ul li a:hover{ color: #00a6bc; transition: .4s;}.btn{ background-color:#00a6bc; color: #fff; text-decoration: none; border: 2px solid transparent; font-weight: bold; padding: 10px 25px; border-radius: 30px; transition: transform .4s; }.btn:hover{ transform: scale(1.2);}.content{ position: absolute; top: 50%; left:8%; transform: translateY(-50%);}.content p{ font-size:18px; color:#999; margin-bottom: 25px;
}.content p a{ color:#999; font-size:18px; margin-bottom: 25px; }.content p a:hover{ color:#fff; font-size:18px; margin-bottom: 25px;}h1{ color: #fff; margin: 20px 0px 20px; font-size: 75px;}h3{ color: #00a6bc; font-size: 25px; margin-bottom: 25px;}h4{ color: #fca311; letter-spacing: 2px; font-size: 20px;}.newslatter form{ width: 380px; max-width: 100%; position: relative;}.newslatter form input:first-child{ display: inline-block; width: 100%; padding: 14px 130px 14px 15px; border: 2px solid #00a6bc; outline: none; border-radius: 30px;}.newslatter form input:last-child{ position: absolute; display: inline-block; outline: none; border: none; padding: 10px 30px; border-radius: 30px; background-color:#00a6bc; color: #fff; box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585; top: 6px; right: 6px; }
.about{ width: 100%; padding: 100px 0px; background-color: #14213d;}.about img{ height: auto; width: 430px;}.about-text{ width: 550px;}.main{ width: 1130px; max-width: 95%; margin: 0 auto; display: flex; align-items: center; justify-content: space-around;}.about-text h2{ color: #fff; font-size: 75px; text-transform: capitalize; margin-bottom: 20px;}.about-text h5{ color: #fca311; letter-spacing: 2px; font-size: 22px; margin-bottom: 25px; text-transform: capitalize;}.about-text p{ color: #888; letter-spacing: 1px; line-height: 28px; font-size: 18px; margin-bottom: 45px;}button{ background-color:#fca311; color: #fff; text-decoration: none; border: 2px solid transparent; font-weight: bold; padding: 13px 30px; border-radius: 30px; transition: .4s; }button:hover{ background-color: transparent; border: 2px solid #fca311; cursor: pointer;}
.service{ background: #e5e5e5; width: 100%; padding: 100px 0px;}.title h2{ color: #14213d; font-size: 75px; width: 1130px; margin: 30px auto; text-align: center;}.box{ display: flex; justify-content: center; align-items: center; min-height: 400px;}.card{ height: 365px; width: 335px; padding: 20px 35px; background: #14213d; border-radius: 20px; margin: 15px; position: relative; overflow: hidden; text-align: center;}.card i{ font-size: 50px; display: block; text-align: center; margin: 25px 0px; color: #fca311;
}h5{ color: #fff; font-size: 23px; margin-bottom: 15px;}.pra p{ color: #888; font-size: 16px; line-height: 27px; margin-bottom: 25px;}.card .button{ background-color:#fca311; color: #fff; text-decoration: none; border: 2px solid transparent; font-weight: bold; padding: 9px 22px; border-radius: 30px; transition: .4s; }.card .button:hover{ background-color: transparent; border: 2px solid #fca311; cursor: pointer;}.contact-me{ width: 100%; height: 290px; background: #e5e5e5; display: flex; align-items: center; flex-direction: column; justify-content: center;}.contact-me p{ color: #14213d; font-size: 30px; font-weight: bold; margin-bottom: 25px;}.contact-me .button-two{ background-color:#fca311; color: #fff; text-decoration: none; border: 2px solid transparent; font-weight: bold; padding: 13px 30px; border-radius: 30px; transition: .4s; }.contact-me .button-two:hover{ background-color: transparent; border: 2px solid #fca311; cursor: pointer;}footer{ position: relative; width: 100%; height: 400px; background: #222; display: flex; flex-direction: column; align-items: center; justify-content: center;}footer p{ color:#fff; margin-top:5px;
}footer p a { color:#fff; margin-top:5px;
}footer p a:hover{ color:#00a6bc; margin-top:5px;
}
footer p:nth-child(1){ font-size: 30px; color: #fff; margin-bottom: 20px; font-weight: bold;}footer p:nth-child(2){ color: #fff; font-size: 17px; width: 500px; text-align: center; line-height: 26px;}.social{ display: flex;}.social a{ width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: #00a6bc; border-radius: 50%; margin: 22px 10px; color: #fff; text-decoration: none; font-size: 20px;}.social a:hover{ transform: scale(1.3); transition: .3s;}.end{ position: absolute; color:#888; bottom: 35px; font-size: 14px; }写在最后
今天的练习，就分享到这里了，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号