HTML网页作业个人网站源码div+css布局
个人网站使用div+css布局，网站一共四个页面。页面中的banner使用swiper框架制作动画切换，注册页面使用js验证用户信息输入是否正确。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=devi
·
个人网站使用div+css布局，网站一共四个页面。页面中的banner使用swiper框架制作动画切换，注册页面使用js验证用户信息输入是否正确。
<!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>
<!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>
<!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>
<!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>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)