Web前端大作业、基于HTML+CSS+JavaScript响应式个人相册博客网站

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

一、👨‍🎓网站题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板、等网站的设计与制作。

二、✍️网站描述

⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

在这里插入图片描述

五、🔧 网站代码

🧱HTML结构代码


doctype html>
<html>
<head>
<meta charset="utf-8">
<title>《初见》响应式个人博客模板title>
<meta name="keywords" content="个人博客，个人网站，个人博客模板，个人网站模板" />
<meta name="description" content="《初见》响应式个人博客模板是由前端设计师杨青青（www.qingqingblog.com）于2021年5月份设计完成的，模板主要展示个人博客、相册、视频、介绍等功能。" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/base.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js" >script>
<script src="js/comm.js">script>
head>
<body>
<header>
  <div class="box">
    <div class="logo"><a href="/"><img src="images/logo.png" alt="logo">a>div>
    <div class="ad_top"><a href="/"><img src="images/ad01.jpg" alt="广告">a>div>
    <div class="contact_icon">
      <ul>
        <li><a href="http://wpa.qq.com/msgrd?v=3&uin=476847113&site=qq&menu=yes"><i class="icon_qq">i>a>li>
        <li><a href="tel:186491309**"><i class="icon_tel">i>a>li>
        <li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=476847113@qq.com" target="_blank"><i class="icon_email">i>a>li>
        <li><i class="icon_weixin"><img src="images/wx.png" alt="微信号：476847113">i>li>
      ul>
    div>
    <div class="clear">div>
    <nav>
      <ul id="starlist">
        <li><a href="index.html">网站首页a>li>
        <li><a href="blog.html">博文日记a>li>
        <li class="menu"><a href="#">所有内容a>
          <ul class="sub">
            <li><a href="blog_info.html">文章内容a>li>
            <li><a href="photos_info.html">相册内容a>li>
            <li><a href="videos_info.html">视频内容a>li>
            <li><a href="page_info.html">单页内容a>li>
          ul>
          <span>span>li>
        <li><a href="photos.html">我的相册<i>i>a>li>
        <li><a href="videos.html">我的视频a>li>
        <li><a href="about.html">个人简历a>li>
      ul>
      <h2 id="mnavh"><span class="navicon">span>h2>
      <div class="is-search"> <i>i> div>
      <div class="search-page">
        <div class="search_box">
          <div class="go-left">div>
          <div class="search">
            <form action="http://zhuanti.ip3q.com/e/search/index.php" method="post" name="searchform" id="searchform">
              <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
              <input name="show" value="title" type="hidden">
              <input name="tempid" value="1" type="hidden">
              <input name="tbname" value="news" type="hidden">
              <input name="Submit" class="input_submit" value="搜索" type="submit">
            form>
          div>
        div>
      div>
       
    nav>
  div>
header>
<div class="ph_margin">div>

<div class="banner_box">
  <ul class="banner">
    <li><a href="/" target="_blank"><img src="images/01.jpg">
      <section><span>创造时尚1span>
        <p>轻薄素颜妆让你与众不同p>
      section>
      a>li>
    <li><a href="/" target="_blank"><img src="images/02.jpg">
      <section><span>创造时尚2span>
        <p>轻薄素颜妆让你与众不同p>
      section>
      a>li>
    <li><a href="/" target="_blank"><img src="images/03.jpg">
      <section><span>创造时尚3span>
        <p>轻薄素颜妆让你与众不同p>
      section>
      a>li>
  ul>
div>
<div class="clear">div>
<div class="box">
  <div class="featured_news">
    <div class="featured_nav">
      <h2 class="h_title">精选文章h2>
      <ul id="tab">
        <li class="tab-current"><a href="/" target="_blank">栏目名称a>li>
        <li><a href="/" target="_blank">栏目名称a>li>
        <li><a href="/" target="_blank">栏目名称a>li>
      ul>
    div>
    <div class="clear">div>
    <div id="tab-content">
      <section class="tab-box">
        <div class="f_news_pic"><i><img src="images/04.jpg" alt="">i>
          <div class="f_news_pic_box"><a href="/" target="_blank" class="f_news_tag">博文日记a>
            <p class="f_news_title"><a href="/">个人博客，属于我的小世界！a>p>
            <p class="f_news_info"><span>2021-05-01span><span>3090span>p>
          div>
        div>
        <ul class="f_news_list">
          <li><a href="/"><i><img src="images/news01.jpg" alt="">i>
            <p>十条设计原则教你学会如何设计网页布局!p>
            <span>2018-11-08span>a>li>
          <li><a href="/"><i><img src="images/news02.jpg" alt="">i>
            <p>为什么说10月24日是程序员的节日？p>
            <span>2018-11-08span>a>li>
          <li><a href="/"><i><img src="images/news03.jpg" alt="">i>
            <p>个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。p>
            <span>2018-11-08span>a>li>
        ul>
      section>
      <section class="tab-box">
        <div class="f_news_pic"><i><img src="images/05.jpg" alt="">i>
          <div class="f_news_pic_box"><a href="/" target="_blank" class="f_news_tag">博文日记a>
            <p class="f_news_title"><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。a>p>
            <p class="f_news_info"><span>2021-05-01span><span>3090span>p>
          div>
        div>
        <ul class="f_news_list">
          <li><a href="/"><i><img src="images/news04.jpg" alt="">i>
            <p>10年前的个人博客模板设计风格，你都还有印象吗？p>
            <span>2018-11-08span>a>li>
          <li><a href="/"><i><img src="images/news05.jpg" alt="">i>
            <p>2020年个人博客还有哪些个人网站站长在坚持？p>
            <span>2018-11-08span>a>li>
          <li><a href="/"><i><img src="images/news06.jpg" alt="">i>
            <p>记录下我第一次在阿里云618活动做直播的感受和心得p>
            <span>2018-11-08span>a>li>
        ul>
      section>
      <section class="tab-box">
        <div class="f_news_pic"><i><img src="images/06.jpg" alt="">i>
          <div class="f_news_pic_box"><a href="/" target="_blank" class="f_news_tag">博文日记a>
            <p class="f_news_title"><a href="/">为什么说10月24日是程序员的节日？a>p>
            <p class="f_news_info"><span>2021-05-01span><span>3090span>p>
          div>
        div>
        <ul class="f_news_list">
          <li><a href="/"><i><img src="images/news07.jpg" alt="">i>
            <p>世界上根本没有感同身受这回事p>
            <span>2018-11-08span>a>li>
          <li><a href="/"><i><img src="images/news02.jpg" alt="">i>
            <p>兴趣支撑梦想，兴趣是支撑我自己前行的动力p>
            <span>2018-11-08span>a>li>
          <li><a href="/"><i><img src="images/news03.jpg" alt="">i>
            <p>忙碌是自由活着的一种底气p>
            <span>2018-11-08span>a>li>
        ul>
      section>
    div>
  div>
  
  <div class="mycard">
    <section>
      <p class="mycard_title">个人名片p>
      <p class="mycard_title_en">myp>
      <p class="mycard_title_en">profilep>
      <div class="ewm"><img src="images/wx.png" alt="二维码">div>
      <i><img src="images/avatar.png" alt="头像">i>
      <ul>
        <li><span>namespan>杨青青li>
        <li><span>jobspan>前端设计师、程序员li>
        <li><span>webspan><a href="https://www.qingqingblog.com/" target="_blank">www.qingqingblog.coma>li>
        <li><span>addspan>天津市滨海新区li>
      ul>
    section>
  div>
  <div class="clear">div>
  <div class="featured_pics">
    <ul>
      <li><a href="/"><i><img src="images/01.jpg" alt="">i>
        <section>
          <p>毕业相册p>
          <span>6span>section>
        a>li>
      <li><a href="/"><i><img src="images/02.jpg" alt="">i>
        <section>
          <p>宝宝成长记录p>
          <span>23span>section>
        a>li>
      <li><a href="/"><i><img src="images/03.jpg" alt="">i>
        <section>
          <p>婚礼相册p>
          <span>8span>section>
        a>li>
      <li><a href="/"><i><img src="images/04.jpg" alt="">i>
        <section>
          <p>旅行纪念p>
          <span>6span>section>
        a>li>
      <li><a href="/"><i><img src="images/05.jpg" alt="">i>
        <section>
          <p>写真相册p>
          <span>4span>section>
        a>li>
    ul>
  div>
  <div class="clear">div>
  <div class="blogs">
    <h2 class="h_title"><span class="icon_more"><a href="/" target="_blank">查看更多a>span>最新文章h2>
    <ul>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news02.jpg" alt="机械制造行业未来的前景">i>
        <h2>一个32岁程序员的倔强——十年程序人生h2>
        a>
        <p>创业+自由职业的时间差不多已经一年了，还好没饿死，而且应该还能坚持一两年或者更久吧。最近不少朋友推荐去工作：搞区块链的黄总想拉去开发公链、钢哥要推荐去“得到”、晋哥推荐到支付公司当技术总监。p>
        <div class="blogs_base"><span class="blogs_time">2021-05-06span><span class="blogs_onclick">956span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news03.jpg" alt="机械制造行业未来的前景">i>
        <h2>我是个女程序员，反正我就是来活跃气氛的h2>
        a>
        <p>某网站上有人问：有什么借口让自己写出低质量的代码？一位匿名用户的回答获得高票：我是个女程序员，反正我就是来活跃气氛的。「优秀的女生写出来的程序比男生的更漂亮，世界上第一个程序员好像就是女的」p>
        <div class="blogs_base"><span class="blogs_time">2021-04-06span><span class="blogs_onclick">731span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news04.jpg" alt="机械制造行业未来的前景">i>
        <h2>安静地做一个爱设计的女子h2>
        a>
        <p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。p>
        <div class="blogs_base"><span class="blogs_time">2021-03-26span><span class="blogs_onclick">96span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news05.jpg" alt="机械制造行业未来的前景">i>
        <h2>个人博客，属于我的小世界！h2>
        a>
        <p>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。p>
        <div class="blogs_base"><span class="blogs_time">2021-02-13span><span class="blogs_onclick">921span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news02.jpg" alt="机械制造行业未来的前景">i>
        <h2>一个32岁程序员的倔强——十年程序人生h2>
        a>
        <p>创业+自由职业的时间差不多已经一年了，还好没饿死，而且应该还能坚持一两年或者更久吧。最近不少朋友推荐去工作：搞区块链的黄总想拉去开发公链、钢哥要推荐去“得到”、晋哥推荐到支付公司当技术总监。p>
        <div class="blogs_base"><span class="blogs_time">2021-05-06span><span class="blogs_onclick">956span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news03.jpg" alt="机械制造行业未来的前景">i>
        <h2>我是个女程序员，反正我就是来活跃气氛的h2>
        a>
        <p>某网站上有人问：有什么借口让自己写出低质量的代码？一位匿名用户的回答获得高票：我是个女程序员，反正我就是来活跃气氛的。「优秀的女生写出来的程序比男生的更漂亮，世界上第一个程序员好像就是女的」p>
        <div class="blogs_base"><span class="blogs_time">2021-04-06span><span class="blogs_onclick">731span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news04.jpg" alt="机械制造行业未来的前景">i>
        <h2>安静地做一个爱设计的女子h2>
        a>
        <p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。p>
        <div class="blogs_base"><span class="blogs_time">2021-03-26span><span class="blogs_onclick">96span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news05.jpg" alt="机械制造行业未来的前景">i>
        <h2>个人博客，属于我的小世界！h2>
        a>
        <p>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。p>
        <div class="blogs_base"><span class="blogs_time">2021-02-13span><span class="blogs_onclick">921span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news02.jpg" alt="机械制造行业未来的前景">i>
        <h2>一个32岁程序员的倔强——十年程序人生h2>
        a>
        <p>创业+自由职业的时间差不多已经一年了，还好没饿死，而且应该还能坚持一两年或者更久吧。最近不少朋友推荐去工作：搞区块链的黄总想拉去开发公链、钢哥要推荐去“得到”、晋哥推荐到支付公司当技术总监。p>
        <div class="blogs_base"><span class="blogs_time">2021-05-06span><span class="blogs_onclick">956span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news03.jpg" alt="机械制造行业未来的前景">i>
        <h2>我是个女程序员，反正我就是来活跃气氛的h2>
        a>
        <p>某网站上有人问：有什么借口让自己写出低质量的代码？一位匿名用户的回答获得高票：我是个女程序员，反正我就是来活跃气氛的。「优秀的女生写出来的程序比男生的更漂亮，世界上第一个程序员好像就是女的」p>
        <div class="blogs_base"><span class="blogs_time">2021-04-06span><span class="blogs_onclick">731span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news04.jpg" alt="机械制造行业未来的前景">i>
        <h2>安静地做一个爱设计的女子h2>
        a>
        <p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。p>
        <div class="blogs_base"><span class="blogs_time">2021-03-26span><span class="blogs_onclick">96span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
      <li class="blogs_list"> <a href="/" target="_blank"><i><img src="images/news05.jpg" alt="机械制造行业未来的前景">i>
        <h2>个人博客，属于我的小世界！h2>
        a>
        <p>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。p>
        <div class="blogs_base"><span class="blogs_time">2021-02-13span><span class="blogs_onclick">921span>div>
        <a href="/" target="_blank" class="read_more">阅读更多a> li>
    ul>
  div>
  <aside class="rbox">
    <div class="isgood_news">
      <h2 class="h_title">站长推荐h2>
      <ul>
        <li><a href="/" title="" target="_blank"> <i><img src="images/news02.jpg" alt="">i><em>1em>
          <p>一个32岁程序员的倔强——十年程序人生p>
          <span class="star5">span> a>li>
        <li><a href="/" title="" target="_blank"> <i><img src="images/news03.jpg" alt="">i><em>2em>
          <p>我是个女程序员，反正我就是来活跃气氛的p>
          <span class="star4">span> a>li>
        <li><a href="/" title="" target="_blank"> <i><img src="images/news04.jpg" alt="">i><em>3em>
          <p>安静地做一个爱设计的女子p>
          <span class="star4">span> a>li>
        <li><a href="/" title="" target="_blank"> <i><img src="images/news05.jpg" alt="">i><em>4em>
          <p>个人博客，属于我的小世界！p>
          <span class="star3">span> a>li>
        <li><a href="/" title="" target="_blank"> <i><img src="images/news02.jpg" alt="">i><em>5em>
          <p>一个32岁程序员的倔强——十年程序人生p>
          <span class="star2">span> a>li>
        <li><a href="/" title="" target="_blank"> <i><img src="images/news05.jpg" alt="">i><em>6em>
          <p>个人博客，属于我的小世界！p>
          <span class="star2">span> a>li>
      ul>
    div>
    <div class="ad_r"><a href="/"><img src="images/ads.png" alt="广告图">a>div>
    <div class="hot_news">
      <h2 class="h_title">人气点击h2>
      <ol start="1">
        <li><a href="/" title="" target="_blank">
          <p>个人博客，属于我的小世界！p>
          a><span>900span>li>
        <li><a href="/" title="" target="_blank">
          <p>我仅仅是一个“草根站长”p>
          a><span>798span>li>
        <li><a href="/" title="" target="_blank">
          <p>世界上根本没有感同身受这回事p>
          a><span>765span>li>
        <li><a href="/" title="" target="_blank">
          <p>兴趣支撑梦想，兴趣是支撑我自己前行的动力p>
          a><span>659span>li>
        <li><a href="/" title="" target="_blank">
          <p>忙碌是自由活着的一种底气p>
          a><span>640span>li>
        <li><a href="/" title="" target="_blank">
          <p>从互联网消失的那3年，都去哪儿了？p>
          a><span>503span>li>
        <li><a href="/" title="" target="_blank">
          <p>7年，一个80后女站长与阿里云携手创业的真实故事p>
          a><span>500span>li>
        <li><a href="/" title="" target="_blank">
          <p>【告别2018】耕耘才有所得，付出才有收获p>
          a><span>469span>li>
        <li><a href="/" title="" target="_blank">
          <p>网易博客关闭，何不从此开始潇洒行走江湖！p>
          a><span>398span>li>
        <li><a href="/" title="" target="_blank">
          <p>从互联网消失的那3年，都去哪儿了？p>
          a><span>503span>li>
      ol>
    div>
    <div class="ad_r"><a href="/"><img src="images/ads2.png" alt="广告图">a>div>
    <div class="tagsclous">
      <h2 class="h_title">标签云h2>
      <ul>
        <a href="/" target="_blank">女程序员a> <a href="/" target="_blank">互联网a> <a href="/" target="_blank">自由a> <a href="/" target="_blank">底气a> <a href="/" target="_blank">忙碌生活a> <a href="/" target="_blank">建站流程a> <a href="/" target="_blank">个人网站a> <a href="/" target="_blank">建站初衷a> <a href="/" target="_blank">个人博客a> <a href="/" target="_blank">草根站长a> <a href="/" target="_blank">618活动a> <a href="/" target="_blank">心得a> <a href="/" target="_blank">感受a> <a href="/" target="_blank">直播a> <a href="/" target="_blank">阿里云a>
      ul>
    div>
    <div class="emial_box">
      <p>您可以通过以下方式联系我们p>
      <p>（<b>提议b>、<b>投诉b>、<b>合作b>推荐此方式）p>
      <p>发送邮件Email到p>
      <p><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=476847113@qq.com" target="_blank">dancesmiling@qq.coma>p>
    div>
  aside>
  <div class="clear">div>
  <div class="links">
    <h2 class="h_title">友情链接h2>
    <ul>
      <li><a href="https://www.qingqingblog.com/" target="_blank">杨青青个人博客a>li>
      <li><a href="http://www.ip3q.com/" target="_blank">IP3Q模板网a>li>
      <li><a href="https://www.3dst.cn/" target="_blank">阅读文章网a>li>
      <li><a href="http://www.cax8.com/" target="_blank">杨青青个人博客a>li>
      <li><a href="http://soutupian.ip3q.com/" target="_blank">搜图片网a>li>
      <li><a href="http://menhu.ip3q.com/" target="_blank">青于蓝门户网站a>li>
    ul>
  div>
div>
<footer>
  <div class="box">
    <ul class="footer_nav">
      <li><a href="/" target="_blank">网站地图a>li>
      <li><a href="all_list.html" target="_blank">所有文章a>li>
      <li><a href="tags.html" target="_blank">标签合集a>li>
      <li><a href="/" target="_blank">访问统计a>li>
    ul>
    <div class="guanzhu_img"><i><img src="images/wx.png" alt="微信:4768447113">微信号i> <i><img src="images/wxgzh.jpg" alt="微信:4768447113">微信公众号i>div>
    <div class="copyright">
      <p>杨青青个人博客网站 版权所有 p>
      <p>Copyright © <a href="https://www.qingqingblog.com/" target="_blank">www.qingqingblog.coma> All Rights Reserved.p>
      <p>备案号：<a href="http://www.beian.miit.gov.cn/" target="_blank">津ICP备20005778号-1a><i class="ga"><img src="images/ga.png" alt="公安备案号">i>津公网安备 12011602000448 号p>
    div>
  div>
footer>
<a href="#" title="返回顶部" class="icon-top">a>
body>
html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390

💒CSS样式代码

@charset "utf-8";
/* CSS Document 
design by www.qingqingblog.com
*/
@media only screen and (max-width: 1200px) {
.box { width: 1000px; }
.ad_top { margin-left: 5px; }
.links a { padding: 3px 10px; }
}
@media screen and (min-width: 960px) and (max-width: 1024px) {
.box { width: 940px; }
.ad_top { width: 510px; }
.contact_icon ul li i img { right: 0; }
#starlist li a { padding: 0 10px }
.menu:after { right: 0 }
.f_news_title { font-size: 18px; }
.featured_pics ul li i { height: 120px }
.featured_pics ul li section { left: 10%; width: 80%; }
.blogs, .all_news_list, .blogs_search, .blogs_info_page { width: 68%; }
.rbox { width: 30% }
.emial_box { padding: 16px 16px 20px 16px; }
.links li { width: 18% }
.photos li i, .pics_content ul li i { height: 146px; }
.all_videos li i { height: 117px; }
.featured_video_fl h3 { font-size: 22px; }
.resume_tec li span { width: 63% }
.designer section { width: 76% }
}
@media only screen and (max-width: 959px) {
.box { width: 96% }
.ad_top, .contact_icon { display: none }
.is-search { position: fixed; right: 50px; background: none; }
.search-page { position: fixed; top: 40px; border-radius: 0; }
.is-search i { background: url(../images/search_m.png) no-repeat center; background-size: 24px; width: 40px; height: 40px; }
header { height: auto }
header { width: 100%; height: 40px; background: #fff; position: fixed; top: 0; z-index: 999; padding-top: 0; box-shadow: #e0e7ec 1px 1px 3px; }
header .box { width: 100%; }
.ph_margin { height: 40px; margin-bottom: 20px }
#mnavh { display: block; top: 0; position: fixed; right: 0; }
#mnavh.open:after { position: fixed; width: 40%; height: 100%; content: ""; right: 0; top: 40px; }
nav { background: none; height: auto; padding-left: 0; margin-top: 0; }
.logo img { height: 40px; margin-left: 10px }
nav #starlist { width: 100%; background: rgba(0,0,0,0.7); overflow: hidden; }
#starlist { display: none }
#starlist li { width: 60%; margin: 0; background: #fff; border-bottom: #eee 10px solid; line-height: 50px; float: left; font-size: 16px; font-weight: normal; }
#starlist li a { text-align: left; text-indent: 2em; color: #000; width: 100%; padding: 0; font-size: 15px; }
#starlist li:nth-child(1) { border-top: #eee 1px solid; }
#starlist ul.sub { background: none; width: 100%; display: block; position: initial; padding: 0; opacity: 1; transition: none; }
#starlist ul.sub:before { display: none }
#starlist ul.sub li { border-bottom: none; width: 100%; overflow: hidden; line-height: 40px !important; border-top: none; height: 40px !important; background: none; font-size: 14px; }
#starlist ul.sub li:first-child { border-top: #eee 1px solid; }
#starlist ul.sub li a { display: block; padding-left: 10px; text-indent: 3em; width: auto; color: #000; }
#starlist li a:hover, #starlist ul.sub li a:hover { color: #012684 }
.menu:after { width: 26px; height: 22px; content: ""; background: url("../images/jiantou.png") no-repeat; background-size: 16px; display: block; }
.menu:after { top: 20px; right: 6px; border-color: transparent; }
.menu:hover:after { transform: none; }
.menu span { display: block; ; position: absolute; width: 50px; height: 50px; background: #fff; top: 0; right: 0; border-left: #eee 1px solid; }
#starlist li:last-child { padding-bottom: 100%; }
#starlist ul.sub li:last-child { padding-bottom: 0 }
#starlist li:hover ul.sub:before { display: none }
.swiper-slide section p { font-size: 14px; }
.swiper-slide section span { font-size: 12px; }
.f_news_pic { display: none }
.featured_news { width: 63% }
.f_news_list { width: 100% }
.mycard { width: 34% }
.featured_pics { margin: 10px 0 30px 0; }
.featured_nav #tab li a { margin: 0 10px }
.rbox { display: none }
.blogs, .blogs_info_page, .all_news_list, .blogs_search { width: 100% }
.links li { width: auto }
.featured_pics { overflow-x: auto; }
.featured_pics ul { width: 1200px !important; overflow-x: scroll; }
.featured_nav #tab { padding: 0 20px }
.pics_content ul li i, .photos li i { height: 140px }
.all_videos li i { height: 113px; }
.featured_video_fl h3 { font-size: 22px; }
.photos li p { font-size: 14px; }
.play_video iframe {  height: auto;}
}
 @media only screen and (max-width: 768px) {
.featured_nav #tab li a { padding: 0 6px; }
.pics_content ul li i, .photos li i { height: 150px }
.all_videos li p { font-size: 14px; }
.all_videos ul li, .photos ul li { width: 33.333% }
.all_videos li i { height: 118px; }
.featured_video_fl, .featured_video_fr, .play_video, .play_info { width: 100% }
.featured_news { width: 56%; }
.featured_nav #tab li a { margin: 0 5px; }
.mycard { width: 41%; }
.resume_left, .resume:after { width: 40% }
.resume_tec { margin: 0 20px 100px; }
.resume_right { margin-left: 40% }
.ad img { width: 100% }
}
 @media only screen and (max-width: 640px) {
.featured_news, .mycard { width: 100% }
.featured_nav #tab li a { margin: 0 10px }
.mycard i { float: left; margin: 0 20px 0 0; height: 120px; width: 160px; }
.mycard ul li { line-height: 30px }
.mycard { height: auto; margin: 20px 0 }
p.mycard_title_en { display: none; }
.blogs_list i { width: 160px; height: 120px }
.blogs_list h2 { font-size: 18px; margin: 5px 0; }
.blogs_base span { margin-right: 10px }
.blogs_base { margin: 10px 0 0 0; font-size: 12px; }
a.read_more { font-size: 12px; padding: 5px 10px; width: 60px; }
h2.h_title { font-size: 18px; }
.links { margin: 0 auto }
.links a { font-size: 12px; padding: 0 10px; }
.featured_pics { margin: 10px 0 20px 0; }
.featured_news { margin-top: 20px }
.wz_love ul li { width: 100% }
.designer i { width: 60px; height: 60px }
.designer i img { width: 100% }
.designer h3 { margin: 0 }
.designer p { font-size: 14px; }
.designer section { width: 74%; margin-top: 5px; }
.designer span img { width: 70px }
.all_videos ul li, .photos ul li { width: 50% }
.banner { width: 1000px; overflow-x: scroll; }
.banner_box { overflow-x: auto; }
.play_video video { height: auto !important }
.play_box { padding: 10px 0 }
.play_info section { padding: 10px; }
.resume_right { margin-left: 0; padding: 15px; }
.resume_left { width: 100%; background: #f0f0f0; margin-bottom: 30px }
.resume:after { display: none }
.resume_tec { margin: 0 20px 20px; }
.featured_video_fl { height: 300px }
.pics_content ul li { width: 50% }
.album_info i { width: 90px; height: 68px; margin-right: 10px; }
.album_box { padding: 10px; }
.album_info h1 { font-size: 18px; margin: 10px; }
.album_info { float: none; width: 100%; }
.album_info p.a_i_ms { display: none; }
p.a_i_time { font-size: 12px; }
.album_info span { display: none; }
.album_info em { margin-right: 10px; }
.visitor_area { width: 100%; }
.album_next ul li:nth-child(1) a { padding-left: 30px; background: url(../images/icon_left.png) no-repeat left top 60%; background-size: 32px; }
.album_next ul li:nth-child(2) a { background: url(../images/icon_right.png) no-repeat right top 60%; background-size: 32px; padding-right: 30px; }
.album_next span { display: block; margin-bottom: 10px; font-size: 14px; }
.album_next p, .album_next h3 { display: none; }
.play_info h1, .page_title { font-size: 18px; }
.pages { padding: 15px; }
.icon-top { right: 20px; bottom: 20px }
.mycard .ewm { display: none }
.all_news_list ul { padding: 15px 10px; }
.all_news_list ul li span { font-size: 12px; }
.links li {width: 33.3333%;}
}
 @media only screen and (max-width: 480px) {
.search-page .search { width: 90% }
.search-page .go-left { right: 5px; top: 5px; background-size: 16px; width: 16px; height: 16px; }
.featured_nav #tab li a { margin: 0 8px; padding: 0; font-size: 14px; }
.featured_nav #tab { padding: 0 10px; line-height: 40px; margin: 5px 0; }
.featured_nav { margin-bottom: 20px }
.f_news_list li i { width: 120px; height: 90px; }
.banner li { font-size: 16px; }
.f_news_list li p { font-size: 14px; }
.mycard { display: none }
.blogs_list { padding: 15px; }
.blogs_list i { width: 90px; height: 68px; margin: 0 10px 10px 0 }
.blogs_list h2 { font-size: 15px; white-space: inherit; line-height: inherit; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; margin: 10px 0; }
.blogs_list p { clear: both; }
.featured_pics ul { padding: 10px }
.footer_nav li a { padding: 0 5px; margin: 0 5px; font-size: 14px; }
.footer_nav li a:after { right: -5px; }
.featured_pics ul { width: 800px !important; overflow-x: scroll; }
.featured_pics ul li i { height: 113px }
.featured_pics ul li a { margin: 5px; }
.icon_more { margin-top: 0 }
.wz_info span { margin: 0 5px 0 0 }
.info-pre-next p, .info-pre-next p:nth-child(2) { width: 100%; float: none; text-align: left }
.designer span { float: none; display: block; }
.designer span img { margin: auto; width: 140px; }
.designer section { width: 100%; margin: 20px 0; }
.wz_love ul li a { margin: 0 15px; }
.wz_love .h_title { margin: 10px 0 0 15px; }
article { padding: 15px; }
.wz_love ul li span { left: 148px; }
footer { margin-top: 20px }
.epages { margin: 20px auto }
.pics_content ul li i, .photos li i { height: 100px }
.photos ul li { margin-bottom: 0 }
.epages { font-size: 12px; }
.featured_video_fl { height: 200px; }
.featured_video_fl h3 { font-size: 15px; line-height: 24px; }
.featured_video_fl i:before { width: 50px; height: 50px; margin-top: -25px; margin-left: -25px;background-size: 24px; }
.featured_video_fl section { padding: 15px; }
.all_videos li i { height: 78px; }
.all_videos { padding: 5px }
.all_videos li i:before { background-size: 15px; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; }
.featured_video_fr li i { width: 120px; height: 80px; margin-right: 10px; border-radius: 10px; }
.featured_video_fr li h3 { font-size: 15px; font-weight: normal; margin-bottom: 10px }
.featured_video_fr ul li:last-child a { padding-bottom: 20px }
.featured_video_fr ul li a { margin: 10px }
.featured_pics ul li section { left: 7%; width: 84%; }
.featured_pics ul li p { font-size: 12px; }
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

相关阅读:
项目基于MVC的.Net技术类门户网站源码
 【Linux初阶】认识冯诺依曼结构
 git 删除某一次的提交（commit）
神奇的卡尔曼滤波，行人追踪的福音
 Buuctf [MRCTF2020]Ez_bypass 1 WP解析
 [ AT_agc009_c]Division into Two
XML|DTD声明
 听大佬讲：学习 AXI从哪里开始？
Servlet概述及接口
 【Pytorch with fastai】第 8 章：协同过滤深入探讨
原文地址：https://blog.csdn.net/qq_38512571/article/details/127816408