使用html、css、js，实现了一些简单功能，话不多直接进行展示！
效果展示：
点击首页展示的是一个登录界面
点击文字练习
点击提交个人信息后，上方输入内容会在下方展示
点击图片练习（有轮播图）
对小图片点击，可以放大查看
以上是全部效果展示
下面是全部代码（关注获得源码！！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个HTML页面练习</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--头部样式-->
<div id="top">
<div id="top_l"></div>
</div>
<div class="main_left">
<ul class="mian_ul">
<li class="mian_li">
<a href="#" class="main" data-main="login">首页</a>
</li class="mian_li">
<li class="mian_li">
<a href="#" class="main" data-main="Text">文字练习</a>
</li class="mian_li">
<li class="mian_li"><a href="#" class="main" data-main="Img">图片练习</a></li>
<li class="mian_li"><a href="#" class="main" data-main="Audio">其他练习</a></li>
</ul>
</div>
<div class="main_right">
<iframe id="myIframe"></iframe>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
var Main = document.querySelectorAll('.main');
Main.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接的默认行为
var main = this.dataset.main; // 获取链接的数据类别
console.log('Clicked main:', main); // 打印点击的类别
var iframe = document.getElementById('myIframe');
var newSrc = '';
switch (main) {
case 'Text':
newSrc = 'TEXT.html'; //文本页面
break;
case 'Img':
newSrc = 'IMG.html';
break;
case 'login':
newSrc = 'login.html';
break;
default:
console.log('Unknown category:', main);
break;
}
if (newSrc) {
iframe.src = newSrc; // 更新iframe的src属性
console.log('Iframe src set to:', iframe.src); // 打印设置的iframe源
}
});
});
});
</script>
</html><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会员登录</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #5c67f2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4a54e1;
}
a {
display: block;
text-align: center;
margin-top: 10px;
color: #5c67f2;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<body>
<div class="login-container">
<form id="loginForm" action="/login" method="get">
<h2>会员登录</h2>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="input_code">验证码:</label>
<input type="text" id="ImgCode" name="ImgCode" required>
<img alt="验证码" src="VerifyCodeServlet" id="imgCode" onclick="reloadCode()">
</div>
<div class="form-group">
<input type="button" value="登录" onclick="get()">
</div>
<div class="form-group">
<a href="register.html">注册新账户</a>
</div>
</form>
</div>
</body>
<script>
function reloadCode(){
var time=new Date().getTime();
var code = document.getElementById("imgCode").src="VerifyCodeServlet?id"+time;
}
</script>
</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 rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="information">
<form id="infoForm">
<h1>个人信息填写</h1>
姓名：<input id="name" type="text" name="name"><br>
年龄：<input id="age" type="number" name="age" min="1"><br>
<label>性别:</label>
<input type="radio" id="male" name="gender" value="男" checked> 男
<input type="radio" id="female" name="gender" value="女"> 女<br>
<label for="hobby">爱好：</label>
<select id="hobby" name="hobby">
<option value="唱歌">唱歌</option>
<option value="跳舞">跳舞</option>
<option value="打篮球">打篮球</option>
<!-- 根据需要添加更多爱好选项 -->
</select><br>
自我介绍：<br><textarea id="largeTextbox" name="introduction" placeholder="在这里输入您的文本..."></textarea><br>
<button type="submit" onclick="showInformation(event)" style="width: 20%;padding: 10px;border: none;border-radius: 4px;background-color: #5cb85c;color: white;cursor: pointer;margin-top: 10px;">提交个人信息</button>
</form>
</div>
<div id="displayArea" style="margin-top: 20px; border: 1px solid #ddd; padding: 10px;"></div>
</body>
<script>
function showInformation(event) {
// 阻止表单默认提交行为
event.preventDefault();
var form = document.getElementById('infoForm');
var name = form.elements['name'].value;
var age = form.elements['age'].value;
var gender = form.elements['gender'].value;
var hobby = form.elements['hobby'].value;
var introduction = form.elements['introduction'].value;
// 确定选中的单选按钮
var genderRadios = form.elements['gender'];
for (var i = 0, length = genderRadios.length; i < length; i++) {
if (genderRadios[i].checked) {
gender = genderRadios[i].value;
break;
}
}
// 获取展示区域元素，并设置其内容
var displayArea = document.getElementById('displayArea');
displayArea.innerHTML = '<p><strong>姓名：</strong> ' + name + '</p>' +
'<p><strong>年龄：</strong> ' + age + '</p>' +
'<p><strong>性别：</strong> ' + gender + '</p>' +
'<p><strong>爱好：</strong> ' + hobby + '</p>' +
'<p><strong>自我介绍：</strong> ' + introduction + '</p>';
}
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动轮播图示例</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--点击图片打开的弹框-->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modalImg">
<div id="caption"></div>
</div>
<div class="carousel">
<button class="arrow prev" onclick="moveSlide(-1)">❮</button>
<button class="arrow next" onclick="moveSlide(1)">❯</button>
<div class="carousel-container">
<!-- 初始时设置第一个图片为显示状态 -->
<div class="carousel-item" style="background-image: url('cxk.png'); display: block;"></div>
<div class="carousel-item" style="background-image: url('2.jpg');"></div>
<div class="carousel-item" style="background-image: url('3.jpg');"></div>
<!-- 更多图片 -->
</div>
</div>
<script>
let index = 0;
const slides = document.querySelectorAll('.carousel-item');
const totalSlides = slides.length;
const autoSlideInterval = 3000; // 自动轮播的时间间隔，单位毫秒
// 设置初始状态
function setup() {
slides.forEach((slide, i) => {
if (i === index) {
slide.style.display = 'block';
} else {
slide.style.display = 'none';
}
});
}
setup();
function moveSlide(step) {
// 先隐藏当前显示的图片
slides[index].style.display = 'none';
// 计算新的索引并显示新的图片
index = (index + step + totalSlides) % totalSlides;
slides[index].style.display = 'block';
}
// 自动轮播
setInterval(() => {
moveSlide(1);
}, autoSlideInterval);
// 点击箭头时清除计时器，避免冲突
document.querySelector('.prev').addEventListener('click', () => {
clearInterval(autoSlideInterval);
});
document.querySelector('.next').addEventListener('click', () => {
clearInterval(autoSlideInterval);
});
</script>
<div class="image-container">
<!-- 图片示例 -->
<img src="4.jpg" alt="Image 1">
<img src="2.jpg" alt="Image 2">
<img src="3.jpg" alt="Image 3">
<img src="cxk.png" alt="Image 3">
<img src="5.jpg" alt="Image 1">
<img src="10.jpg" alt="Image 1">
<img src="6.jpg" alt="Image 2">
<img src="10.jpg" alt="Image 3">
<img src="8.jpg" alt="Image 2">
<img src="9.jpg" alt="Image 3">
<img src="7.jpg" alt="Image 3">
<img src="11.jpg" alt="Image 1">
<img src="12.jpg" alt="Image 1">
<img src="13.jpg" alt="Image 1">
<img src="14.jpg" alt="Image 1">
<img src="16.jpg" alt="Image 1">
<img src="18.jpg" alt="Image 1">
<!-- 更多图片 -->
</div>
</body>
<script>
// 获取所有图片和模态框元素
const images = document.querySelectorAll('.image-container img');
const modal = document.getElementById('myModal');
const modalImg = document.getElementById('modalImg');
const captionText = document.getElementById('caption');
const closeBtn = document.getElementsByClassName('close')[0];
// 点击图片时的事件处理函数
function openModal(e) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// 点击关闭按钮时的事件处理函数
function closeModal() {
modal.style.display = "none";
}
// 为所有图片绑定点击事件
images.forEach(img => img.addEventListener('click', openModal));
// 为关闭按钮绑定点击事件
closeBtn.addEventListener('click', closeModal);
// 点击模态框外部区域时关闭模态框
window.addEventListener('click', function(event) {
if (event.target === modal) {
closeModal();
}
});
</script>
</html>css代码
#top {
height: 50px;
background-color: #333;
border-radius: 8px; /* 边框圆角 */
}
#top_l {
height: 50%;
width: 10%;
margin-left:10px ;
margin-top: 10px;
}
/* 其他标题可以设置不同的字号或样式 */
.main_left {
height: 400px; /* 导航栏高度 */
width: 10%; /* 导航栏宽度 */
background-color: rgb(245, 248, 248); /* 导航栏背景颜色 */
float: left; /* 使导航栏浮动到左侧 */
margin-right: 10px; /* 与右侧内容的间距 */
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
border-radius: 4px; /* 边框圆角 */
margin-top: 20px;
}
/* 导航列表样式 */
.main_left ul {
list-style-type: none; /* 移除列表项前的标记 */
padding: 0;
margin: 0;
}
/* 导航列表项样式 */
.main_left li {
padding: 5px 0; /* 列表项的内边距 */
text-align: center; /* 文本居中对齐 */
border-bottom: 1px solid #fff; /* 列表项底部边框 */
}
/* 导航链接样式 */
.main_left a {
display: block; /* 将链接显示为块级元素 */
padding: 10px 20px; /* 链接的内边距 */
text-decoration: none; /* 移除下划线 */
color: #333; /* 文字颜色 */
transition: background-color 0.3s; /* 鼠标悬停时的背景颜色变化过渡效果 */
}
/* 鼠标悬停在链接上时的样式 */
.main_left a:hover {
background-color: #ccc; /* 鼠标悬停时的背景颜色 */
}
/* 激活的链接样式 */
.main_left a.active {
background-color: #ddd; /* 激活状态的背景颜色 */
color: #000; /* 文字颜色 */
}
.main_right {
height: 1000px;
width: 85%;
margin-left: 50px;/* 距离左边距50px */
background-color: #ffffff;
float: left;
margin-top: 20px;
}
iframe {
width: 100%;
height: 100%;
border: 1px solid #ccc; /* 边框样式 */
border-radius: 8px; /* 边框圆角 */
padding: 0; /* 内边距 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}
/*
TEXT.html页面
*/
#largeTextbox {
width: 50%; /* 宽度为页面宽度的95% */
height: 300px; /* 高度为300像素，您可以根据需要调整 */
resize: none; /* 防止用户调整大小 */
padding: 10px; /* 内边距 */
margin: 10px 0; /* 外边距 */
border: 1px solid #ccc; /* 边框 */
box-sizing: border-box; /* 边框计算在宽度和高度内 */
}
.information {
margin-left: 5px;
}
/* 轮播图 */
.carousel {
position: relative;
width: 100%; /* 设置轮播图的宽度 */
overflow: hidden;
margin: 0 auto;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background-color: #fff;
border: none;
padding: 10px;
font-size: 24px;
color: #000; /* 添加颜色以便在白色背景上可见 */
z-index: 10; /* 确保箭头在轮播图上方 */
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.carousel-container {
display: flex;
}
.carousel-item {
width: 100%;
flex-shrink: 0;
background-size: cover;
background-position: center;
height: 400px; /* 设置图片的高度 */
display: none; /* 初始时不显示任何图片 */
}
/*小图片*/
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333; /* 文本颜色 */
line-height: 1.6; /* 行高 */
}
.container {
max-width: 1200px; /* 容器最大宽度 */
margin: 0 auto; /* 居中对齐 */
padding: 20px; /* 内边距 */
}
.image-container {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px; /* 使用gap代替margin来控制间隔 */
margin-bottom: 20px;
}
.image-container img {
width: auto;
height: 200px; /* 固定高度 */
object-fit: cover;
border-radius: 10px; /* 圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
transition: transform 0.3s ease; /* 平滑过渡效果 */
}
.image-container img:hover {
transform: scale(1.05); /* 鼠标悬停时放大图片 */
}
/* 媒体查询，用于响应式设计 */
@media (max-width: 768px) {
.image-container img {
width: calc(50% - 20px); /* 在小屏幕上，图片宽度为容器的一半 */
}
}
@media (max-width: 480px) {
.image-container img {
width: 100%; /* 在非常小的屏幕上，图片宽度填满容器 */
}
}
/*弹框样式*/
.modal {
display: none; /* 默认不显示 */
position: fixed; /* 固定定位 */
z-index: 1; /* 确保模态框在页面最上层 */
left: 0;
top: 0;
width: 100%; /* 宽度100% */
height: 50%; /* 高度100% */
overflow: auto; /* 允许滚动 */
background-color: rgb(0,0,0); /* 背景颜色 */
background-color: rgba(0,0,0,0.9); /* 背景颜色，透明度 */
}
.modal-content {
margin: auto;
display: block;
max-height: 80%; /* 限制图片最大宽度 */
width: auto;
object-fit: contain; /* 保持图片比例 */
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
