• 简单博客网页

    目录

    注意事项

    详细解释

    源码部分

    HTML文件：

    CSS文件：

    JS文件：

    跟着自学网的教程，敲的一个自学网的网页。

    先上gif图：

    因为原图太大不能上传，压缩了一下清晰度......

    有导航栏，内容区，侧边栏，按钮动画，还有回到顶部的小事件。

    注意事项

    jQuery可以下载好一起放入文件夹里直接引用的，免得网络问题不能用。

    看起来挺简单的一个页面还是有很多可以注意到的事项，记录一下：

    1.导航栏使用ul同时向右浮动时，可以将标签倒着写，这样不会出错；

    2.设置float后，父元素的高度就消失了，如果页面下面还有内容，就会错位，需要将样式清除；

    3.span不能设置高宽，需要将其display设置成inline-block后才能设置，最好还是采用其他可以设置的元素，比如div；

    4.margin和padding：前者是外边距，后者是内边距，若带有背景色，使用padding可以将背景色一同撑大，margin则会留白；

    5.每次写项目前，可以先网上找一份清除浏览器样式的CSS文件复制进去，保证浏览器的样式不会影响自己设置的样式，这里CSS的前30几行就是清除浏览器样式用的；

    6.CSS中>,+,~，空格，逗号等符号连着选择器一起使用还挺多，需要大量练习才行；

    7.按钮的动画CSS就能完成，CSS3提供了好多动画啊，还有好多参数……

    详细解释

    实现步骤如下：

    1.整个页面分成了三部分：头部、内容区、尾部
    2.整个的包裹id定义为wrap，内容区的class定义为content，尾部的class定义为footer
    3.紧跟着的mask为整个页面设置遮罩：当右侧菜单栏弹出时，整个页面加上遮罩
    4.slider为侧边栏菜单
    5.top为右下角"回到顶部"的按钮

    最后面有源码，前面截图的为了讲解用的，复制部分代码太烦了，要不停改格式，我懒得改。

    先来讲头部header。 

    头部包括导航栏和第0个透明介绍部分：

    按钮是有动画的，我做了个GIF图，不能浪费，这里生硬的放进来。

     如图显示，整个的背景为wrap，

    1. /*整个页面最外层的包裹*/
    2. #wrap {
    3.     /*背景使用banner的图片，不重复的显示，居中，固定在页面上，就可以不随滚动条而变化*/
    4.     /*同时设置整个页面的文字*/
    5.     background: url("./img/banner.jpeg") no-repeat;
    6.     background-position: center center;
    7.     background-attachment: fixed;
    8.     background-size: cover;
    9.     font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";
    10. }

    整个header如下，包括导航栏和第0个透明介绍部分： 

     导航栏样式如下：

    1. /*logo单独设置靠左的li元素，可以单独添加样式*/
    2. .logo {
    3.     float: left;
    4.     margin-left: 40px;
    5. }
    6. /*class为logo的li元素下的a标签样式----即"博客"二字*/
    7. .logo a {
    8.     font-size: 20px;
    9.     color: white;
    10.     font-weight: 700;
    11.     /*文字中间的空隙*/
    12.     letter-spacing: 2px;
    13. }

    第0部分样式如下：

    1. .banner {
    2.     height: 600px;
    3. }
    4. /*设置第0部分的内容样式*/
    5. .banner .inner {
    6.     /*全部使用白色，居中对齐，并设置一个最大的宽度*/
    7.     color: white;
    8.     text-align: center;
    9.     margin: 0 auto;
    10.     max-width: 400px;
    11.     /*设置relative就会随着鼠标上下滚动，fixed就会固定在页面上，跟背景图一样*/
    12.     position: relative;
    13.     top:160px;
    14. }
    15.  
    16. /*设置文本上下的线条的样式*/
    17. .line {
    18.     /*这个宽度为父元素inner的宽度400px*/
    19.     width: 100%;
    20.     /*设置了一个高度为2px的白色背景作为线条*/
    21.     height: 5px;
    22.     background: white;
    23.     margin: 10px 10px;
    24. }
    25.  
    26. /*inner里面的p元素设置样式*/
    27. .banner .inner p {
    28.     line-height: 30px;
    29.     font-size: 18px;
    30.     letter-spacing: 1px;
    31. }
    32.  
    33. /*给按钮设置样式*/
    34. .banner .inner button {
    35.     margin-top: 20px;
    36.     /*使用margin会留白，padding会带着背景色一起撑开*/
    37.     padding: 10px 20px;
    38.     background: #e85e17;
    39.     /*设置圆角*/
    40.     border-radius: 5px;
    41.    /*去除按钮的边框*/
    42.     border: none;
    43.     color: white;
    44.    /*去掉按钮点击时的边框*/
    45.     outline: none;
    46. }
    47.  
    48. /*鼠标悬浮到按钮上时，按钮的动作*/
    49. .banner .inner button:hover {
    50.     /*鼠标经过时，开始旋转720°动画，并放大2倍，持续时间2s*/
    51.     transform: rotate(720deg) scale(2);
    52.     transition: 2s;
    53. }
    54.  
    55. .banner .inner .more {
    56.     margin-top: 140px;
    57. }

    再给导航栏设置个active的样式，选中当前标签时，下方出现白色加粗的横线，right-menu除外。样式如下：

    选中main：

    选中blog： 

    网页一打开默认选中的是main。

    样式如下：

    1. .active {
    2.     position: relative;
    3. }
    4. /*同样设置了4px高度的白色背景框作为短横线*/
    5. /*因为4个标签中main、web、blog都添加了span标签*/
    6. /*right-menu没有添加*/
    7. .active span {
    8.     position: absolute;
    9.     height: 4px;
    10.     background: white;
    11.     bottom: 5px;
    12.     left: 0;
    13.     width: 100%;
    14. }

    添加点击动作：

    1.  // 1.鼠标移到标签上时，当前标签有一个白色的下划线，其他的兄弟标签样式取消
    2.     $('.nav-ul li').click(function () {
    3.         $(this).addClass('active')
    4.         $(this).siblings().removeClass('active')
    5.     })

     当然你也修改为其他动作，随你开心。 

     最后还有个side-bar的class放到后面解释。

     第二部分为内容content区，分了三块：

     先看part-one：

    几行文字和一条线，还有几个图片+旋转的边框，背景色记得设置透明度：

     

     CSS样式如下：

    1. /*中间的内容整个设置为透明度0.9，保证滚动条滑动时，主背景可以透出来，*/
    2. /*同时主背景用的是fixed，不随滚动条而移动*/
    3. .content{
    4.     opacity: .9;
    5. }
    6.  
    7. /*设置第一部分整体的样式*/
    8. .part-one {
    9.     text-align: center;
    10.     color: white;
    11.     background: rgba(67,178,165,1);
    12.     padding-top: 65px;
    13.     opacity: 0.95;
    14. }
    15.  
    16. .wraper {
    17. /*margin这样设置可以居中*/
    18.     margin: 0 auto;
    19.     max-width: 1080px;
    20. }
    21.  
    22. .wraper h2 {
    23.     padding: 15px 0;
    24. }
    25.  
    26. .wraper .line {
    27.     /*居中可以这样设置margin*/
    28.     margin: 15px auto;
    29.     width: 40%;
    30.     height: 5px;
    31.     background-color: #666666;
    32. }
    33.  
    34. .wraper p {
    35.     margin: 25px 0;
    36.     font-size: 18px;
    37. }
    38.  
    39. .icon {
    40.     margin: 30px auto;
    41.     margin-bottom: 0;
    42.     padding-bottom: 30px;
    43. }
    44. /*给3个图标设置边框*/
    45. /*宽度2px实线、绿色，80*80px，旋转45°*/
    46. .icon .item{
    47.     border: 2px solid green;
    48.     /*因为span不可以调整宽高，所以先将display设置成如下*/
    49.     display: inline-block;
    50.     height: 80px;
    51.     width: 80px;
    52.     margin-right: 50px;
    53.     transform: rotate(45deg);
    54. }
    55.  
    56. /*设置宽和高为100%，适应父元素item的宽和高，就不会超出item的border，
    57. 同时img继承了item的旋转，需要纠正回来*/
    58. .icon .item img{
    59.     width: 100%;
    60.     height: 100%;
    61.     transform: rotate(-45deg);
    62. }

    第二部分为分栏的显示，有重复的3个分栏，可以先做一个，然后复制3份：

     

    样式如下：

    1. /*给整个第二部分添加背景色*/
    2. .part-two {
    3.     background-color: rgb(33,41,50);
    4. }
    5.  
    6. .first .text-right {
    7.     float: right;
    8. }
    9.  
    10. .first-left {
    11.     width: 41%;
    12. }
    13.  
    14. .first-left img {
    15.     width: 100%;
    16. }
    17. /*表示first标签的第一代子标签div*/
    18. .first>div {
    19.     float: left;
    20. }
    21. /*设置浮动之后，父元素first就没有了高度，需要清除浮动，用伪元素做以下处理*/
    22. .clear-fix:after {
    23.     content: '';
    24.     display: block;
    25.     clear: both;
    26. }
    27. .first-text {
    28.     position: relative;
    29.     top: 68px;
    30.     left: 50px;
    31.     width: 55%;
    32.     color: white;
    33. }
    34. .first-text h2 {
    35.     font-size: 24px;
    36.     margin-bottom: 10px;
    37.  
    38. }
    39. .first-text .first-title {
    40.     margin-bottom: 20px;
    41.     font-size: 18px;
    42. }
    43. .first-text p {
    44.     font-size: 15px;
    45.     width: 90%;
    46. }

     需要注意的就是浮动样式的清除。你会发现所有设置了float的class后面都有多加一个clear-fix样式，包括：导航栏、左右分栏部分、6个小card部分。一个元素是可以同时添加多个class样式的。

    1. .clear-fix:after {
    2.     content: '';
    3.     display: block;
    4.     clear: both;
    5. }

    后面复制的部分就不详细介绍了，

    HTML部分就是将图片（白色）和文字（蓝色）的顺序调换一下：

     看源码，样式有个地方需要注意下：

    1. /*第二部分结构是一样的，故直接复制了3分，将中间一个的左右顺序交换（图片和文字的div交换即可），*/
    2. /*为了更好地区别是三块，采用如下方式将偶数even那一块透明度修改为0.3，同理可修改奇数部分*/
    3. .first:nth-child(even) {
    4.     background-color: rgba(255,255,255,0.3);
    5. }

    第三部分有一个大的标题+横线+内容，接着是6个相同的小方块，可以写一个方块后复制。

    HTML结构：

    样式如下：

    1. /*设置第三部分整体的样式：背景、透明度、文字颜色*/
    2. .part-three {
    3.     background: #3f3965;
    4.     opacity: 0.9;
    5.     color: white;
    6. }
    7. /*设置大包裹的框架大小及样式：居中，占宽度的60%*/
    8. .three-wrap {
    9.     margin: 0 auto;
    10.     width: 60%;
    11. }
    12. .three-wrap .three-title {
    13.     /*使用margin会留白，padding是由内向外撑开*/
    14.     padding-top: 60px;
    15. }
    16. /*标题行居中，距离下方20px*/
    17. .three-title h2 {
    18.     margin-bottom: 20px;
    19.     text-align: center;
    20. }
    21. /*设置横线的样式：背景、宽度、居中*/
    22. .three-title .line {
    23.     /*即使不设置高度，也有一个默认的高度显示*/
    24.     height: 5px;
    25.     background: #1a0973;
    26.     width: 50%;
    27.     margin: 0 auto;
    28. }
    29. /*设置three-title下的div的样式*/
    30. .three-title div {
    31.     font-size: 15px;
    32.     margin: 20px auto;
    33. }
    34. /*这里先设置一个card的样式，然后复制*/
    35. /*每个card里面有标题h3和文本p*/
    36. .card {
    37.     min-height: 300px;
    38.     margin-top: 20px;
    39.     width: 50%;
    40.     max-width: 461px;
    41.     padding: 50px;
    42.     float: left;
    43.     /*以下两句解决盒子被挤下去的问题，让每个box都是独立的盒子，不被其他影响，兼容各种浏览器*/
    44.     -webkit-box-sizing: border-box;
    45.     -moz-box-sizing: border-box;
    46. }
    47. .card h3 {
    48.     text-align: center;
    49. }
    50. .card p{
    51.     font-size: 13px;
    52. }
    53. /*因为每个盒子的透明度不同，整体呈现由浅到深的渐变效果*/
    54. .card:nth-child(1) {
    55.     background: rgba(0,0,0,0.05);
    56. }
    57. .card:nth-child(2) {
    58.     background: rgba(0,0,0,0.1);
    59. }
    60. .card:nth-child(3) {
    61.     background: rgba(0,0,0,0.15);
    62. }
    63. .card:nth-child(4) {
    64.     background: rgba(0,0,0,0.2);
    65. }
    66. .card:nth-child(5) {
    67.     background: rgba(0,0,0,0.25);
    68. }
    69. .card:nth-child(6) {
    70.     background: rgba(0,0,0,0.3);
    71. }

    footer就不多说了，跟导航栏类似：

    HTML布局：

     样式也没啥说的：

    1. /*页尾常规样式*/
    2. .footer {
    3.     background-color: #333;
    4.     min-height: 200px;
    5.     text-align: center;
    6.     color: white;
    7.     opacity: 0.9;
    8. }
    9. .share-group {
    10.     display: block;
    11.     margin: 0 auto;
    12.     width: 1080px;
    13.     padding: 45px;
    14. }
    15. .share-group li {
    16.     display: inline-block;
    17.     padding: 10px;
    18. }
    19. .footer ul {
    20.     font-size: 18px;
    21. }
    22. .footer>div {
    23.     font-size: 15px;
    24. }

    接下来解释右侧菜单栏，点击right-menu会弹出一条菜单选项，鼠标悬浮会高亮显示，同样使用ul：

     

    同时菜单出来的时候将主页面颜色淡出（加个遮盖），使菜单栏更明显。

    对比下左右图，右侧为菜单弹出，加上遮盖的效果，还是明显的哈，棒棒哒💯。

     遮罩：

    1. /*遮罩样式*/
    2. .mask {
    3.     display: none;
    4.     position: fixed;
    5.     top: 0;
    6.     bottom: 0;
    7.     left: 0;
    8.     right: 0;
    9.     background: rgba(0,0,0,0.3);
    10. }

    菜单栏：

    1. /*右侧菜单栏*/
    2. .slider {
    3.     background: #333;
    4.     position: fixed;
    5.     top: 0;
    6.     /*这里之所以将位置设置为-300，是一开始将菜单栏放到页面外面隐藏起来*/
    7.     /*当点击标签时再将其挪出来*/
    8.     right: -300px;
    9.     bottom: 0;
    10.     width: 300px;
    11.     /*挪出来的时间设置为0.3s，加个动画*/
    12.     transition: 0.3s;
    13. }
    14. .slider ul li {
    15.     margin-top: 30px;
    16.     padding: 15px;
    17. }
    18. .slider ul li a {
    19.     padding: 20px;
    20.     color: white;
    21.     width: 100%;
    22.     display: inline-block;
    23. }
    24. /*鼠标悬浮时添加背景*/
    25. .slider ul li :hover {
    26.     background: grey;
    27. }

    逻辑是这样的：

    1.点击菜单栏，遮罩打开，菜单栏移出；

    2.点击遮罩：菜单栏挪出页面外，关闭遮罩。

    1. // 2.点击侧边栏按钮，显示菜单栏
    2.     $('.side-bar').click(function () {
    3.         show_slider()
    4.     })
    5.     // 由于给整个页面添加了遮盖，且在点击侧边栏时，触发遮盖，故可以点击遮盖隐藏侧边栏
    6.     $('.mask').click(function () {
    7.         hide_slider()
    8.     })
    9.  
    10.     // 菜单出现函数
    11.     function show_slider() {
    12.         $('.mask').fadeIn()
    13.         // 因为原菜单栏的right设置的为-300，既可以隐藏到页面外部
    14.         // 将right项设置为0，即可将侧边栏显示出来
    15.         $('.slider').css('right',0)
    16.     }
    17.     // 菜单隐藏函数
    18.     function hide_slider() {
    19.         $('.mask').fadeOut()
    20.         $('.slider').css('right',-300)
    21.     }

    终于到最后的一个小动作了。

    由一个图片和一个文本组成： 

     先将样式设置好：

    1. /*返回顶部快捷键头*/
    2. .top {
    3.     /*一开始设置none的原因是，网页加载出来时，不需要显示它，*/
    4.     /*当滚动到一定位置时再取消隐藏*/
    5.     display: none;
    6.     width: 50px;
    7.     height: 30px;
    8.     position: fixed;
    9.     right: 30px;
    10.     bottom: 120px;
    11. }
    12.  
    13. .top p,img {
    14.     width: 100%;
    15.     text-align: center;
    16. }

    调试的时候可以先将none取消，等调试好样式，写动作时再加上。

    1. // 3.回到顶部的动作
    2.     $('.top').click(function () {
    3.         // 点击TOP，返回至网页顶部
    4.         $('body,html').animate({
    5.             scrollTop: 0
    6.         },300)
    7.     })
    8.     // 监听窗口，当距离顶部超过100时，才显示TOP按钮，否则不显示
    9.     $(window).scroll(function () {
    10.         if ($(window).scrollTop()>100) {
    11.             // top的CSS中display设置的为none，即为隐藏状态
    12.             // 当距离>100时，将其显示出来即可
    13.             $('.top').css('display','block')
    14.         } else {
    15.             // 当距离过近时，再次将其隐藏
    16.             $('.top').css('display','none')
    17.         }
    18.     })

    终于弄完了，快烦死了，图片自己找类似的，我懒得上传，路径自己改。

    源码部分

    HTML文件：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Blog</title>
    6.     <link rel="stylesheet" href="blog.css">
    7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    8.     <script src="blog.js"></script>
    9. </head>
    10. <body>
    11. <!--整个页面分成了三部分：头部、内容区、尾部-->
    12. <!--整个的包裹id定义为wrap，内容区的class定义为content，尾部的class定义为footer-->
    13. <!--紧跟着的mask为整个页面设置遮罩：当右侧菜单栏弹出时，整个页面加上遮罩，-->
    14. <!--slider为侧边栏菜单-->
    15. <!--top为右下角"回到顶部"的按钮-->
    16.     <div id="wrap">
    17. <!--        定义头部栏，例子中包括导航栏和第0个透明介绍部分-->
    18.         <header class="header">
    19. <!--            导航栏-->
    20.             <nav>
    21.                 <ul class="nav-ul clear-fix">
    22.                     <li class="logo"><a href="#">博客</a></li>
    23. <!-- tips：这里使用右浮动，则最右边的标签卡写在最前面，可以保证浮动后最靠右-->
    24.                     <li class="side-bar"><a href="#">right-menu</a></li>
    25.                     <li><a href="#">blog</a><span></span></li>
    26.                     <li><a href="#">web</a><span></span></li>
    27.                     <li class="active"><a href="#">main</a><span></span></li>
    28.                 </ul>
    29.             </nav>
    30. <!--            定义第0个介绍部分，需要双层div包裹，外部div定义大小，方便内部div调整样式-->
    31.             <div class="banner">
    32.                 <div class="inner">
    33. <!--                    从上到下依次为：横线、标题文字、横线、3行文本、按钮、"more"文字-->
    34.                     <div class="line"></div>
    35.                     <h1>Lily's Autumn</h1>
    36.                     <div class="line"></div>
    37.                     <p>E-mail:188888888@qq.com</p>
    38.                     <p>Tel:188 8888 8888</p>
    39.                     <p>Addr:Longhua,Shenzhen,China</p>
    40.                     <button>click me</button>
    41.                     <div class="more">more</div>
    42.                 </div>
    43.             </div>
    44.         </header>
    45.         <div class="content">
    46.             <section class="part-one">
    47. <!--                设置一个外部的包裹wraper-->
    48. <!--                内容如下：-->
    49. <!--                一行标题文字、一行文本、一条线、再一段文字和图标-->
    50.                 <div class="wraper">
    51.                     <h2>Spring Flowers and Autumn Moon</h2>
    52.                     <div class="first-title">Right I die. My life before my eyes.</div>
    53.                     <div class="line"></div>
    54.                     <p>
    55.                         As I was hang there, I see wonderland, I don't really see much of anything.
    56.                         But I see you. That's crazy.
    57.                     </p>
    58. <!--                    图标部分-->
    59.                     <div class="icon">
    60.                         <span class="item"><img src="./img/钻石.svg" alt=""></span>
    61.                         <span class="item"><img src="./img/程序.svg" alt=""></span>
    62.                         <span class="item"><img src="./img/爱心.svg" alt=""></span>
    63.                     </div>
    64.                 </div>
    65.             </section>
    66.             <section class="part-two">
    67. <!--                复制了3份-->
    68. <!--                每一份都有一侧图片加一侧文字-->
    69.                 <div class="first clear-fix">
    70.                     <div class="first-left">
    71.                         <img src="./img/sunset.jpeg" alt="">
    72.                     </div>
    73.                     <div class="first-text">
    74.                         <h2>Missing is A Kind Of Sick</h2>
    75.                         <div class="first-title">
    76.                             Love once begun,will never end.
    77.                         </div>
    78.                         <p>The moon is still so bright;
    79.                             Beyond the hills the lamp sheds the same light,
    80.                             The sky besprinkled with star upon star, But I do not know where you are.</p>
    81.                     </div>
    82.                 </div>
    83.                 <div class="first clear-fix">
    84.                     <div class="first-text">
    85.                         <h2>Missing is A Kind Of Sick</h2>
    86.                         <div class="first-title">
    87.                             Love once begun,will never end.
    88.                         </div>
    89.                         <p>The moon is still so bright;
    90.                             Beyond the hills the lamp sheds the same light,
    91.                             The sky besprinkled with star upon star, But I do not know where you are.</p>
    92.                     </div>
    93.                     <div class="first-left text-right">
    94.                         <img src="./img/mountain.jpeg" alt="">
    95.                     </div>
    96.                 </div>
    97.                 <div class="first clear-fix">
    98.                     <div class="first-left">
    99.                         <img src="./img/pic03.jpg" alt="">
    100.                     </div>
    101.                     <div class="first-text">
    102.                         <h2>Missing is A Kind Of Sick</h2>
    103.                         <div class="first-title">
    104.                             Love once begun,will never end.
    105.                         </div>
    106.                         <p>The moon is still so bright;
    107.                             Beyond the hills the lamp sheds the same light,
    108.                             The sky besprinkled with star upon star, But I do not know where you are.</p>
    109.                     </div>
    110.                 </div>
    111.             </section>
    112. <!--            第三部分有一个大的标题+横线+内容，接着是6个相同的小方块，可以写一个方块后复制-->
    113.             <section class="part-three">
    114. <!--                还是一样，外面添加一个包裹-->
    115.                 <div class="three-wrap">
    116. <!--                    大的标题+横线+内容-->
    117.                     <div class="three-title">
    118.                         <h2>Lang Tao Sha</h2>
    119.                         <div class="line"></div>
    120.                         <div>Easy to leave it but hard to see it again,With flowers fallen on the waves spring's gone away;So has the paradise of yesterday.
    121.                             Easy to leave it but hard to see it again,With flowers fallen on the waves spring's gone away;So has the paradise of yesterday.</div>
    122.                     </div>
    123. <!--                    6个相同的小方块-->
    124.                     <div class="card-group clear-fix">
    125.                         <div class="card">
    126.                             <h3>believe</h3>
    127.                             <p>The moon is still so bright; Beyond the hills the lamp sheds the same light,
    128.                                 The sky besprinkled with star upon star, But I do not know where you are.</p>
    129.                         </div>
    130.                         <div class="card">
    131.                             <h3>believe</h3>
    132.                             <p>The moon is still so bright; Beyond the hills the lamp sheds the same light,
    133.                                 The sky besprinkled with star upon star, But I do not know where you are.</p>
    134.                         </div>
    135.                         <div class="card">
    136.                             <h3>believe</h3>
    137.                             <p>The moon is still so bright; Beyond the hills the lamp sheds the same light, The sky besprinkled with star upon star, But I do not know where you are.</p>
    138.                         </div>
    139.                         <div class="card">
    140.                             <h3>believe</h3>
    141.                             <p>The moon is still so bright; Beyond the hills the lamp sheds the same light, The sky besprinkled with star upon star, But I do not know where you are.</p>
    142.                         </div>
    143.                         <div class="card">
    144.                             <h3>believe</h3>
    145.                             <p>The moon is still so bright; Beyond the hills the lamp sheds the same light, The sky besprinkled with star upon star, But I do not know where you are.</p>
    146.                         </div>
    147.                         <div class="card">
    148.                             <h3>believe</h3>
    149.                             <p>The moon is still so bright; Beyond the hills the lamp sheds the same light, The sky besprinkled with star upon star, But I do not know where you are.</p>
    150.                         </div>
    151.                     </div>
    152.                 </div>
    153.             </section>
    154.         </div>
    155.         <div class="footer">
    156.             <ul class="share-group">
    157.                 <li>mon</li>
    158.                 <li>tuey</li>
    159.                 <li>wed</li>
    160.                 <li>thur</li>
    161.                 <li>fri</li>
    162.             </ul>
    163.             <div>@lily's autumn-2022</div>
    164.         </div>
    165.         <div class="mask"></div>
    166.         <div class="slider">
    167.             <ul>
    168.                 <li><a href="#">111</a></li>
    169.                 <li><a href="#">222</a></li>
    170.                 <li><a href="#">333</a></li>
    171.                 <li><a href="#">444</a></li>
    172.                 <li><a href="#">555</a></li>
    173.             </ul>
    174.         </div>
    175.         <div class="top">
    176.             <a href="#">
    177.                 <img src="./img/向上箭头.svg" alt="">
    178.                 <p>TOP</p>
    179.             </a>
    180.         </div>
    181.     </div>
    182. </body>
    183. </html>

    CSS文件：

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }
    5.  
    6. em,i {
    7.     font-style: normal;
    8. }
    9.  
    10. /*去除列表前的小黑点*/
    11. li {
    12.     list-style: none;
    13. }
    14.  
    15. img {
    16.     border: 0;
    17.     vertical-align: middle;
    18. }
    19.  
    20. button {
    21.     cursor: pointer;
    22. }
    23.  
    24. a {
    25.     color: black;
    26.     /*去除下划线*/
    27.     text-decoration: none;
    28. }
    29.  
    30. a:hover {
    31.     color: #c81623;
    32. }
    33. /*以上为清除浏览器设置，并给定一下常见的样式*/
    34.  
    35.  
    36. .header {
    37.     /*居中*/
    38.     /*给整个头部设置背景和透明度*/
    39.     line-height: 50px;
    40.     background: rgba(0,0,0,0.4);
    41. }
    42.  
    43. /*给header的导航栏设置背景色*/
    44. .header nav {
    45.     background-color: gray;
    46.     height: 50px;
    47. }
    48.  
    49. /*导航栏向右浮动*/
    50. nav ul li {
    51.     float: right;
    52.     margin-right: 30px;
    53. }
    54.  
    55. /*整个页面最外层的包裹*/
    56. #wrap {
    57.     /*背景使用banner的图片，不重复的显示，居中，固定在页面上，就可以不随滚动条而变化*/
    58.     /*同时设置整个页面的文字*/
    59.     background: url("./img/banner.jpeg") no-repeat;
    60.     background-position: center center;
    61.     background-attachment: fixed;
    62.     background-size: cover;
    63.     font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";
    64. }
    65.  
    66. /*logo单独设置靠左的li元素，可以单独添加样式*/
    67. .logo {
    68.     float: left;
    69.     margin-left: 40px;
    70. }
    71. /*class为logo的li元素下的a标签样式----即"博客"二字*/
    72. .logo a {
    73.     font-size: 20px;
    74.     color: white;
    75.     font-weight: 700;
    76.     /*文字中间的空隙*/
    77.     letter-spacing: 2px;
    78. }
    79.  
    80. .banner {
    81.     height: 600px;
    82. }
    83. /*设置第0部分的内容样式*/
    84. .banner .inner {
    85.     /*全部使用白色，居中对齐，并设置一个最大的宽度*/
    86.     color: white;
    87.     text-align: center;
    88.     margin: 0 auto;
    89.     max-width: 400px;
    90.     /*设置relative就会随着鼠标上下滚动，fixed就会固定在页面上，跟背景图一样*/
    91.     position: relative;
    92.     top:160px;
    93. }
    94.  
    95. /*设置文本上下的线条的样式*/
    96. .line {
    97.     /*这个宽度为父元素inner的宽度400px*/
    98.     width: 100%;
    99.     /*设置了一个高度为2px的白色背景作为线条*/
    100.     height: 5px;
    101.     background: white;
    102.     margin: 10px 10px;
    103. }
    104.  
    105. /*inner里面的p元素设置样式*/
    106. .banner .inner p {
    107.     line-height: 30px;
    108.     font-size: 18px;
    109.     letter-spacing: 1px;
    110. }
    111.  
    112. /*给按钮设置样式*/
    113. .banner .inner button {
    114.     margin-top: 20px;
    115.     /*使用margin会留白，padding会带着背景色一起撑开*/
    116.     padding: 10px 20px;
    117.     background: #e85e17;
    118.     /*设置圆角*/
    119.     border-radius: 5px;
    120.    /*去除按钮的边框*/
    121.     border: none;
    122.     color: white;
    123.    /*去掉按钮点击时的边框*/
    124.     outline: none;
    125. }
    126.  
    127. /*鼠标悬浮到按钮上时，按钮的动作*/
    128. .banner .inner button:hover {
    129.     /*鼠标经过时，开始旋转720°动画，并放大2倍，持续时间2s*/
    130.     transform: rotate(720deg) scale(2);
    131.     transition: 2s;
    132. }
    133.  
    134. .banner .inner .more {
    135.     margin-top: 140px;
    136. }
    137.  
    138. /*中间的内容整个设置为透明度0.9，保证滚动条滑动时，主背景可以透出来，*/
    139. /*同时主背景用的是fixed，不随滚动条而移动*/
    140. .content{
    141.     opacity: .9;
    142. }
    143.  
    144. /*设置第一部分整体的样式*/
    145. .part-one {
    146.     text-align: center;
    147.     color: white;
    148.     background: rgba(67,178,165,1);
    149.     padding-top: 65px;
    150.     opacity: 0.95;
    151. }
    152.  
    153. .wraper {
    154. /*margin这样设置可以居中*/
    155.     margin: 0 auto;
    156.     max-width: 1080px;
    157. }
    158.  
    159. .wraper h2 {
    160.     padding: 15px 0;
    161. }
    162.  
    163. .wraper .line {
    164.     /*居中可以这样设置margin*/
    165.     margin: 15px auto;
    166.     width: 40%;
    167.     height: 5px;
    168.     background-color: #666666;
    169. }
    170.  
    171. .wraper p {
    172.     margin: 25px 0;
    173.     font-size: 18px;
    174. }
    175.  
    176. .icon {
    177.     margin: 30px auto;
    178.     margin-bottom: 0;
    179.     padding-bottom: 30px;
    180. }
    181. /*给3个图标设置边框*/
    182. /*宽度2px实线、绿色，80*80px，旋转45°*/
    183. .icon .item{
    184.     border: 2px solid green;
    185.     /*因为span不可以调整宽高，所以先将display设置成如下*/
    186.     display: inline-block;
    187.     height: 80px;
    188.     width: 80px;
    189.     margin-right: 50px;
    190.     transform: rotate(45deg);
    191. }
    192.  
    193. /*设置宽和高为100%，适应父元素item的宽和高，就不会超出item的border，
    194. 同时img继承了item的旋转，需要纠正回来*/
    195. .icon .item img{
    196.     width: 100%;
    197.     height: 100%;
    198.     transform: rotate(-45deg);
    199. }
    200.  
    201. /*给整个第二部分添加背景色*/
    202. .part-two {
    203.     background-color: rgb(33,41,50);
    204. }
    205.  
    206. .first .text-right {
    207.     float: right;
    208. }
    209.  
    210. .first-left {
    211.     width: 41%;
    212. }
    213.  
    214. .first-left img {
    215.     width: 100%;
    216. }
    217. /*表示first标签的第一代子标签div*/
    218. .first>div {
    219.     float: left;
    220. }
    221. /*设置浮动之后，父元素first就没有了高度，需要清除浮动，用伪元素做以下处理*/
    222. .clear-fix:after {
    223.     content: '';
    224.     display: block;
    225.     clear: both;
    226. }
    227. .first-text {
    228.     position: relative;
    229.     top: 68px;
    230.     left: 50px;
    231.     width: 55%;
    232.     color: white;
    233. }
    234. .first-text h2 {
    235.     font-size: 24px;
    236.     margin-bottom: 10px;
    237.  
    238. }
    239. .first-text .first-title {
    240.     margin-bottom: 20px;
    241.     font-size: 18px;
    242. }
    243. .first-text p {
    244.     font-size: 15px;
    245.     width: 90%;
    246. }
    247.  
    248. /*第二部分结构是一样的，故直接复制了3分，将中间一个的左右顺序交换（图片和文字的div交换即可），*/
    249. /*为了更好地区别是三块，采用如下方式将偶数even那一块透明度修改为0.3，同理可修改奇数部分*/
    250. .first:nth-child(even) {
    251.     background-color: rgba(255,255,255,0.3);
    252. }
    253.  
    254.  
    255. /*设置第三部分整体的样式：背景、透明度、文字颜色*/
    256. .part-three {
    257.     background: #3f3965;
    258.     opacity: 0.9;
    259.     color: white;
    260. }
    261. /*设置大包裹的框架大小及样式：居中，占宽度的60%*/
    262. .three-wrap {
    263.     margin: 0 auto;
    264.     width: 60%;
    265. }
    266. .three-wrap .three-title {
    267.     /*使用margin会留白，padding是由内向外撑开*/
    268.     padding-top: 60px;
    269. }
    270. /*标题行居中，距离下方20px*/
    271. .three-title h2 {
    272.     margin-bottom: 20px;
    273.     text-align: center;
    274. }
    275. /*设置横线的样式：背景、宽度、居中*/
    276. .three-title .line {
    277.     /*即使不设置高度，也有一个默认的高度显示*/
    278.     height: 5px;
    279.     background: #1a0973;
    280.     width: 50%;
    281.     margin: 0 auto;
    282. }
    283. /*设置three-title下的div的样式*/
    284. .three-title div {
    285.     font-size: 15px;
    286.     margin: 20px auto;
    287. }
    288. /*这里先设置一个card的样式，然后复制*/
    289. /*每个card里面有标题h3和文本p*/
    290. .card {
    291.     min-height: 300px;
    292.     width: 50%;
    293.     /*最大值可以打开浏览器调试，自己看一下那个值合适，就改一下*/
    294.     max-width: 461px;
    295.     padding: 50px;
    296.     float: left;
    297.     /*以下两句解决盒子被挤下去的问题，让每个box都是独立的盒子，不被其他影响，兼容各种浏览器*/
    298.     -webkit-box-sizing: border-box;
    299.     -moz-box-sizing: border-box;
    300. }
    301. /*单独设置标题居中，文本不需要*/
    302. .card h3 {
    303.     text-align: center;
    304. }
    305. .card p{
    306.     font-size: 13px;
    307. }
    308. /*因为每个盒子的透明度不同，整体呈现由浅到深的渐变效果*/
    309. .card:nth-child(1) {
    310.     background: rgba(0,0,0,0.05);
    311. }
    312. .card:nth-child(2) {
    313.     background: rgba(0,0,0,0.1);
    314. }
    315. .card:nth-child(3) {
    316.     background: rgba(0,0,0,0.15);
    317. }
    318. .card:nth-child(4) {
    319.     background: rgba(0,0,0,0.2);
    320. }
    321. .card:nth-child(5) {
    322.     background: rgba(0,0,0,0.25);
    323. }
    324. .card:nth-child(6) {
    325.     background: rgba(0,0,0,0.3);
    326. }
    327.  
    328.  
    329.  
    330.  
    331. /*页尾常规样式*/
    332. .footer {
    333.     background-color: #333;
    334.     min-height: 200px;
    335.     text-align: center;
    336.     color: white;
    337.     opacity: 0.9;
    338. }
    339. .share-group {
    340.     display: block;
    341.     margin: 0 auto;
    342.     width: 1080px;
    343.     padding: 45px;
    344. }
    345. .share-group li {
    346.     display: inline-block;
    347.     padding: 10px;
    348. }
    349. .footer ul {
    350.     font-size: 18px;
    351. }
    352. .footer>div {
    353.     font-size: 15px;
    354. }
    355.  
    356.  
    357.  
    358. .active {
    359.     position: relative;
    360. }
    361. /*同样设置了4px高度的白色背景框作为短横线*/
    362. /*因为4个标签中main、web、blog都添加了span标签*/
    363. /*right-menu没有添加*/
    364. .active span {
    365.     position: absolute;
    366.     height: 4px;
    367.     background: white;
    368.     bottom: 5px;
    369.     left: 0;
    370.     width: 100%;
    371. }
    372.  
    373.  
    374.  
    375. /*遮罩样式*/
    376. .mask {
    377.     display: none;
    378.     position: fixed;
    379.     top: 0;
    380.     bottom: 0;
    381.     left: 0;
    382.     right: 0;
    383.     background: rgba(0,0,0,0.3);
    384. }
    385.  
    386. /*右侧菜单栏*/
    387. .slider {
    388.     background: #333;
    389.     position: fixed;
    390.     top: 0;
    391.     /*这里之所以将位置设置为-300，是一开始将菜单栏放到页面外面隐藏起来*/
    392.     /*当点击标签时再将其挪出来*/
    393.     right: -300px;
    394.     bottom: 0;
    395.     width: 300px;
    396.     /*挪出来的时间设置为0.3s，加个动画*/
    397.     transition: 0.3s;
    398. }
    399. .slider ul li {
    400.     margin-top: 30px;
    401.     padding: 15px;
    402. }
    403. .slider ul li a {
    404.     padding: 20px;
    405.     color: white;
    406.     width: 100%;
    407.     display: inline-block;
    408. }
    409. /*鼠标悬浮时添加背景*/
    410. .slider ul li :hover {
    411.     background: grey;
    412. }
    413.  
    414.  
    415.  
    416. /*返回顶部快捷键头*/
    417. .top {
    418.     /*一开始设置none的原因是，网页加载出来时，不需要显示它，*/
    419.     /*当滚动到一定位置时再取消隐藏*/
    420.     display: none;
    421.     width: 50px;
    422.     height: 30px;
    423.     position: fixed;
    424.     right: 30px;
    425.     bottom: 120px;
    426. }
    427.  
    428. .top p,img {
    429.     width: 100%;
    430.     text-align: center;
    431. }

    JS文件：

    1. $(function () {
    2.     // 本例中只有3个动作，
    3.     // 一是鼠标悬浮在标签栏时，显示白色加粗的下划线；
    4.     // 二是点击右侧菜单栏有弹出菜单；
    5.     // 三是点击回到顶部的按钮；
    6.  
    7.     // 1.鼠标移到标签上时，当前标签有一个白色的下划线，其他的兄弟标签样式取消
    8.     $('.nav-ul li').click(function () {
    9.         $(this).addClass('active')
    10.         $(this).siblings().removeClass('active')
    11.     })
    12.  
    13.  
    14.  
    15.     // 2.点击侧边栏按钮，显示菜单栏
    16.     $('.side-bar').click(function () {
    17.         show_slider()
    18.     })
    19.     // 由于给整个页面添加了遮盖，且在点击侧边栏时，触发遮盖，故可以点击遮盖隐藏侧边栏
    20.     $('.mask').click(function () {
    21.         hide_slider()
    22.     })
    23.  
    24.     // 菜单出现函数
    25.     function show_slider() {
    26.         $('.mask').fadeIn()
    27.         // 因为原菜单栏的right设置的为-300，既可以隐藏到页面外部
    28.         // 将right项设置为0，即可将侧边栏显示出来
    29.         $('.slider').css('right',0)
    30.     }
    31.     // 菜单隐藏函数
    32.     function hide_slider() {
    33.         $('.mask').fadeOut()
    34.         $('.slider').css('right',-300)
    35.     }
    36.  
    37.  
    38.  
    39.     // 3.回到顶部的动作
    40.     $('.top').click(function () {
    41.         // 点击TOP，返回至网页顶部
    42.         $('body,html').animate({
    43.             scrollTop: 0
    44.         },300)
    45.     })
    46.     // 监听窗口，当距离顶部超过100时，才显示TOP按钮，否则不显示
    47.     $(window).scroll(function () {
    48.         if ($(window).scrollTop()>100) {
    49.             // top的CSS中display设置的为none，即为隐藏状态
    50.             // 当距离>100时，将其显示出来即可
    51.             $('.top').css('display','block')
    52.         } else {
    53.             // 当距离过近时，再次将其隐藏
    54.             $('.top').css('display','none')
    55.         }
    56.     })
    57. })
    58.

  • 相关阅读:
    OpenAI视频生成Sora技术简析
    java-php-net-python-房产交易资金管理系统计算机毕业设计程序
    SQL Injection
    Hadoop面试重点
    怎样用Python识别条形码？
    【KCC@南京】KCC南京"数字经济-开源行"
    Maven 使用教程（三）
    浅谈微服务架构中实现单点登录
    matlab⾼级绘图时间距离图像
    找准边界，吃定安全 | 串联边界设备协同，便捷运营思维让安全更有效
  • 原文地址：https://blog.csdn.net/qq_34285232/article/details/125413937