1. 编程号首页

HTML网页作业个人网站源码div+css布局

编程小号 • • 未分类

HTML网页作业个人网站源码div+css布局个人网站使用div+css布局，网站一共四个页面。页面中的banner使用swiper框架制作动画切换，注册页面使用js验证用户信息输入是否正确。<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″>&l.

个人网站使用div+css布局，网站一共四个页面。页面中的banner使用swiper框架制作动画切换，注册页面使用js验证用户信息输入是否正确。

HTML网页作业个人网站源码div+css布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" />
  <link href="css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />


</head>

<body>



  <div class="nav">
    <div class="wrapper">
      <div class="logo">
        <a href="#"><img src="./images/LOGO.png" height="45"></a>
      </div>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="news.html">个人简介</a>
          <dl style="display: none;">
            <dd><a href="#">个人经历 </a></dd>
            <dd><a href="#">参加活动 </a></dd>

          </dl>
        </li>
        <li><a href="hot.html">给我留言</a></li>
        <li><a href="res.html">注册</a></li>

      </ul>
      <div class="searchBox">
        <form name="head_search" id="searchFrom" method="GET">
          <input type="text" placeholder="搜索个人网站" class="searchInput">

          <input type="button" value="" class="searchBtn">
        </form>
      </div>
    </div>
  </div>
  <div class="menuBox">

    <div class="">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"> <img src="./images/banner1.png"> </div>
          <div class="swiper-slide"> <img src="./images/banner2.png"> </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

    </div>
  </div>
  <div class="about">
    <div class="wrapper">
      <div class="menutitle">
        <h3>个人介绍</h3>
      </div>

      <dl>
        <dt>
          <img src="./images/about.png" alt="">
        </dt>
        <dd>
          <h3>张爱玲</h3>
          <p>张爱玲 北京大学 老家山东</p>
          <p>
            夏洛克.福尔摩斯抚摸着他已经被截肢的左手，那里从手腕以下空荡荡的，截面已经愈合成了凸起的肉球。那是上次拆弹时的牺牲品。在阴冷的天气里，夏洛克有时会感受到从手臂传上来的疼痛，仿佛那只手还在似的。詹姆斯.莫里亚蒂，那个数学教授，几乎在所有领域都成为了天才的人，已经让夏洛克尝到了十数次的苦果。毫无疑问，他是夏洛克一生中最强大的对手。
          </p>
              <p>
            托上次行动的福，夏洛克终于明白了莫里亚蒂如此强大的秘密。在那次行动中，他看到莫里亚蒂因为强烈的刺激而分裂出了新的人格。毫无疑问，他是个精神分裂。而他每次分裂出新的人格时，他也成为了在那个身份所属职业的天才。上次美蒂奇艺术馆的爆炸案中，夏洛克看到莫里亚蒂的面容逐渐扭曲
            ，音调越来越高，然后发出了不男不女的怪声。之后，他癫狂着冲向了一幅古斯塔夫·克里姆特的女人画作，探起脚尖亲吻肖像中的女人，浑然不顾自己身上的血液弄脏了这幅上亿元的画作。然后，他用女声向着空旷的大厅喊道“多么炽热的一吻！
          </p>

        </dd>
      </dl>

    </div>

  </div>

  <div class="wrapper">
    <div class="menutitle">
      <h3>我的文章</h3>
    </div>


    <div class="zixun">
      <div class="list clearfix">
        <div class="pic">
          <a href="#">
            <img src="./images/zi.png" style="display: inline;">
          </a>
        </div>
        <div class="detail">
          <a href="#">
            <h5>进击的巨人</h5>
          </a>
          <p>
            多年以后，尤弥尔站在被巨人践踏为平地的大地上时，准会想起几十年前和师父在山巅学宫的那个下午。清澈的阳光穿过纯白的大理石柱子，风中的细小灰尘在浮光的照射下，仿佛微小的精灵在飞舞。

          </p>

        </div>
      </div>
      <div class="list clearfix">
        <div class="pic">
          <a href="#">
            <img src="./images/zi2.png" style="display: inline;">
          </a>
        </div>
        <div class="detail">
          <a href="#">
            <h5>神探夏洛克——最后的誓言</h5>
          </a>
          <p> 夏洛克.福尔摩斯抚摸着他已经被截肢的左手，那里从手腕以下空荡荡的，截面已经愈合成了凸起的肉球。那是上次拆弹时的牺牲品。在阴冷的天气里，夏洛克有时会感受到从手臂传上来的疼痛，仿佛那只手还在似的</p>

        </div>
      </div>
      <div class="list clearfix">
        <div class="pic">
          <a href="#">
            <img src="./images/zi3.png" style="display: inline;">
          </a>
        </div>
        <div class="detail">
          <a href="#">
            <h5>西塞罗</h5>
          </a>
          <p>
            “我哪里有什么远大的理想，我所做的一切
            ，都只是命运在推着我走罢了。”西塞罗美地奇后来回忆自己的一生时，这样说道。“我的导师啊，你哪里有什么罪。有罪的，是这些愚昧无知的暴民，和让他们肆意生长的世界啊。”浮士德对即将上火刑架的乔尔丹诺-布鲁诺说道。
          </p>

        </div>
      </div>
    </div>






  </div>


  <div class="desinbox">
    <div class="wrapper">
      <div class="menutitle">
        <h3>我的照片</h3>

      </div>
      <ul>
        <li>
          <img src="./images/timg.png" alt="">

          <h3>参加演讲比赛</h3>

        </li>
        <li>

          <img src="./images/timg1.png" alt="">
          <h3>成都的鲤鱼旗</h3>

        </li>
        <li>

          <img src="./images/timg2.png" alt="">
          <h3> 魔鬼城克拉玛依</h3>

        </li>
        <li>
          <img src="./images/timg3.png" alt="">

          <h3>去甘肃玩 </h3>

        </li>
        <li>

          <img src="./images/timg4.png" alt="">
          <h3>月牙湖</h3>

        </li>
        <li>

          <img src="./images/timg5.png" alt="">
          <h3>去游乐场</h3>

        </li>
      </ul>
    </div>
  </div>



  <div class="foot">
    <div class="footer">
      <div class="footleft">
        <h5>个人网站</h5>
        <p>最新个人网站、实时发布</p>

      </div>
      <div class="footleft">
        <h5>联系我们</h5>
        <p>邮箱：123456@qq.com</p>
        <p>Q Q：123456789</p>
      </div>
    </div>
  </div>
  <div class="footerson">版权信息 © XXX</div>

  <div class="change">

    <input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
    <input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />
  </div>

</body>

</html>
<script src="./js/jquery.min.js"> </script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/js.js"> </script>
<script>
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

HTML网页作业个人网站源码div+css布局

<!DOCTYpE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" />
  <link href="css/swiper.min.css" rel="stylesheet" type="text/css" />

</head>

<body>


  <div class="nav">
    <div class="wrapper">
      <div class="logo">
        <a href="#"><img src="./images/LOGO.png" height="45"></a>
      </div>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="news.html">个人简介</a>
          <dl style="display: none;">
            <dd><a href="#">个人经历 </a></dd>
            <dd><a href="#">参加活动 </a></dd>

          </dl>
        </li>
        <li><a href="hot.html">给我留言</a></li>
        <li><a href="res.html">注册</a></li>

      </ul>
      <div class="searchBox">
        <form name="head_search" id="searchFrom" method="GET">
          <input type="text" placeholder="搜索个人网站" class="searchInput">

          <input type="button" value="" class="searchBtn">
        </form>
      </div>
    </div>
  </div>
  <div class="wrapper  ">
    <div class="infobox ">
      <div class=" ">
        <div class="info">
          <dl>
            <dt> <img src="./images/ziji.png" height="280"></dt>
            <dd>
              <h3>张爱玲</h3>
              <h4>
                　热情随和，活波开朗，具有进取精神和团队精神，有较强的动手本事。良好协调沟通本事，适应力强，反应快、进取、灵活，爱创新!提高自我，适应工作的需要。所以我期望找一份与自身知识结构相关的工作，具有必须的社会交往本事，具有优秀的组织和协调本事。在学习中，我注重理论与实践的结合，己具备了相当的实践操作本事。熟练操作计算机办公软件。很强的事业心和职责感使我能够应对任何困难和挑战。
              </h4>
              <ul>
                <li>中文名：张爱玲</li>

                <li>国 籍：中国</li>
                <li>民 族：汉族</li>

                <li>出生地：北京</li>
                <li>出生日期：2021年7月1日</li>
                <li>星 座：巨蟹座</li>
                <li>血 型：AB型</li>
                <li>身 高：171 cm</li>
                <li>体 重：70 kg</li>
                <li>毕业院校b:北京</li>
              </ul>
            </dd>
          </dl>
          <div class="notemenu" style="margin-bottom:10px;">
            <div class="titlemenus">
              <ul>
                <li class="cur">
                  参加活动
                </li>

              </ul>

            </div>
          </div>
          <div class="infolist">

            <p>
              第三十届创新杯：基于数据挖掘的学习注意力监测系统设计与实现 </p>
            <p>
              大学生创业计划项目：基于卷积神经网络的人脸识别与表情分析系统设计与实现——以校园安全为例</p>
            <p>
              全国大学生创新创业挑战赛：“金领工厂”高校人才培养一体化基地——高校高质量实习就业领航者
            </p>


          </div>
        </div>

        <div class="notemenu" style="margin-bottom:10px;">
          <div class="titlemenu">
            <ul>
              <li class="cur">
                生活照片
              </li>
              <li>
                活动照片
              </li>
            </ul>

          </div>
        </div>

        <div class="infolist">

          <div class="picbox">

            <div class="piclist">

              <ul>
                <li>
                  <img src="./images/ge1.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge2.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge3.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge4.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge5.jpg" alt="">
                </li>
             
              </ul>
              <ul style="display: none;"> 
                <li>
                  <img src="./images/ge7.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge8.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge9.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge10.jpg" alt="">
                </li>
                <li>
                  <img src="./images/ge11.jpg" alt="">
                </li>
              
              </ul>

            </div>

          </div>


        </div>
      </div>

    </div>
  </div>



  <div class="foot">
    <div class="footer">
      <div class="footleft">
        <h5>个人网站</h5>
        <p>最新个人网站、实时发布</p>

      </div>
      <div class="footleft">
        <h5>联系我们</h5>
        <p>邮箱：123456@qq.com</p>
        <p>Q Q：123456</p>
      </div>
    </div>
  </div>
  <div class="footerson">版权信息 © XXX</div>
  
  <div class="change">

    <input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
    <input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />
  </div>

  <script src="./js/jquery.min.js"> </script>
 
  <script src="./js/js.js"> </script>
</body>

</html>

HTML网页作业个人网站源码div+css布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" />
  <link href="css/swiper.min.css" rel="stylesheet" type="text/css" />

</head>

<body>
  

  <div class="nav">
    <div class="wrapper">
      <div class="logo">
        <a href="#"><img src="./images/LOGO.png" height="45"></a>
      </div>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="news.html">个人简介</a>
          <dl style="display: none;">
            <dd><a href="#">个人经历 </a></dd>
            <dd><a href="#">参加活动 </a></dd>

          </dl>
        </li>
        <li><a href="hot.html">给我留言</a></li>
        <li><a href="res.html">注册</a></li>

      </ul>
      <div class="searchBox">
        <form name="head_search" id="searchFrom" method="GET">
          <input type="text" placeholder="搜索个人网站" class="searchInput">

          <input type="button" value="" class="searchBtn">
        </form>
      </div>
    </div>
  </div>
  
  <div class="wrapper piece">
  
    <div class="contact"   >
      <div class="container">
        <div class="conn1">
          <img src="./images/tupian.png" alt="" width="100%"> 
        </div>
        <div class="contact-bottom">
          
          <div class="contact-text">
            <div class="contact-right">
              <div class="address">
                <h5>电子邮件</h5>
                <p>如果您有任何关于我的问题，<br>请发邮件给我。发送邮件至：
  service@qq.cn</p>
              </div>
              <div class="address">
                <h5>联系电话</h5>
                <p>138-0000-0000 </p>
              </div>
            </div>
            <div class=" contact-left">
              <form>
              <input type="text" value="姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '姓名';}"><br>
              <input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"><br>
              <input type="text" value="电话" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '电话';}"><br>
              <textarea value="留言内容:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '留言内容';}">留言内容..</textarea>
                <div class="submit-btn">								
                    <input type="submit" value="提交">							
                </div>
              </form>
            </div>						
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>

  </div>


   
  <div class="foot">
    <div class="footer">
      <div class="footleft">
        <h5>个人网站</h5>
        <p>最新个人网站、实时发布</p>

      </div>
      <div class="footleft">
        <h5>联系我们</h5>
        <p>邮箱：123456@qq.com</p>
        <p>Q Q：123456</p>
      </div>
    </div>
  </div>

  <div class="footerson">版权信息 © XXX</div>

  <div class="change">

    <input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
    <input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />
  </div>
</body>

</html>
<script src="./js/jquery.min.js"> </script>

<script src="./js/js.js"> </script>

HTML网页作业个人网站源码div+css布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" />
  <link href="css/swiper.min.css" rel="stylesheet" type="text/css" />

</head>

<body>
  

  <div class="nav">
    <div class="wrapper">
      <div class="logo">
        <a href="#"><img src="./images/LOGO.png" height="45"></a>
      </div>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="news.html">个人简介</a>
          <dl style="display: none;">
            <dd><a href="#">个人经历 </a></dd>
            <dd><a href="#">参加活动 </a></dd>

          </dl>
        </li>
        <li><a href="hot.html">给我留言</a></li>
        <li><a href="res.html">注册</a></li>

      </ul>
      <div class="searchBox">
        <form name="head_search" id="searchFrom" method="GET">
          <input type="text" placeholder="搜索个人网站" class="searchInput">

          <input type="button" value="" class="searchBtn">
        </form>
      </div>
    </div>
  </div>
  
  <div class="wrapper ">
  

  <div class="main">
    <div class="restitle">
      <h1>会员注册</h1>
      <h5>Membership</h5>
      <h4>register</h4>
    </div>
    <div class="login">
      <form class="form sign-up" method="post" action="#" name="form1" id="zhuce" onsubmit="return lymz(this)">
      <ul class="ulnop">
        <li><input class="name " placeholder="请输入用户名" id="username" name="username"></li>
       
        <li><input type="password" class="pass" placeholder="请输入密码" id="password" name="password"></li>
        <li><input type="password" class="pass" placeholder="确认密码" id="password2" name="password2"></li>
        <li><input class="name " placeholder="请输入手机号" id="Telphone" name="Telphone"></li>
        <li><input class="name " placeholder="请输入邮箱" id="Email" name="Email"></li>
        <li>
          <input class="name" placeholder="验证码" style="width: 65%;" id="codeput" name="codeput">
          <div class="btn_wx"><span id="code">gbsl</span></div>
        </li>
        <li><button class="btn" type="submit">确认注册</button></li>
      </ul>
    </form>
    </div>
  </div>

  </div>


   
  <div class="foot">
    <div class="footer">
      <div class="footleft">
        <h5>个人网站</h5>
        <p>最新个人网站、实时发布</p>

      </div>
      <div class="footleft">
        <h5>联系我们</h5>
        <p>邮箱：123456@qq.com</p>
        <p>Q Q：123456</p>
      </div>
    </div>
  </div>

  <div class="footerson">版权信息 © XXX</div>

  
  <div class="change">

    <input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
    <input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />
  </div>
  <script src="./js/jquery.min.js"> </script>
 
  <script src="./js/js.js"> </script>
</body>

</html>

网站源码地址：HTML静态个人网站主题div+css布局网页作业-HTML静态网站-网站作业之家-大学生网页作业，网站毕业设计，课程设计，PHP作业、html网页作业原创定制代做，网站成品，Dreamweaver网页制作

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/37321.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注