- 实验目的
熟悉CSS+DIV网页设计技术
- 实验环境
IDEA2022.2
实验内容
(1)任选主题,设计一个带导航条的CSS+DIV网页。
(2)点击导航条里的项目时,能显示对应内容。
实验步骤
1、编写css设置网页样式
.div{ /*margin-top: 300px;*/
width: 720px;
border-style: inset;
border-width: 10px;
border-color: darkcyan;
/* margin-left: 700px;*/
margin-left: auto;
/*margin: 0 auto;*/
margin-right: 70px;
/* background-color: dimgrey;*/
/* opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);*/
/*半透明但是会全局半透明*/
/*毛玻璃效果*/
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
/*border: 0px solid rgba(255, 255, 255, 0.18);*/
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 18px;
-webkit-border-radius: 18px;
color: rgb(255, 255, 255);
/* background: rgba(255,204,51, 0.5);*/
/*align-self: flex-start;*/
overflow: hidden;
}
.fontcolor{
color: darkcyan;
}
.over{
border-radius: 6px;
background-color: rgba(71, 70, 70, 0.2);
color: #fff;
}
2、编写html实现网页功能
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/qq_style.css" type="text/css">
<link rel="stylesheet" href="./css/border_01.css" type="text/css">
<meta charset="UTF-8">
<title>the Steam Dragon Express</title>
<style>
</style>
</head>
<body>
<!--<audio src="audio/造物2/m02-2mix.wav"controls autoplay loop></audio>-->
<table cellspacing="0" cellpadding="0" border="0" align="center" >
<tr >
<!-- <td align="left" width="5px" height="5px">
<audio src="audio/shengdan.mp3" controls autoplay loop></audio>
</td>-->
<td align="left">
<img src="image/QQ图片20210920201649.jpg" alt="" width="13.78" height="18.34">
</td>
<td align="right" style="font-size: 12px">
简体中文 || 意见反馈
</td>
</tr>
<!--<tr height="200"></tr>-->
<tr >
<table cellspacing="0" cellpadding="0" border="0" align="right">
<td >
<img src="image/屏9.png" height="301.2" width="945.6" >
</td>
</table>
</tr >
<tr align="right">
<div class="div" >
<td colspan="2" class="text_min" >
<span class="fontcolor">注册信息--></span>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="text_h2" >
<span style="color:darkslategray">欢迎注册</span></td>
</tr>
<tr>
<td class="text_min"> <span class="fontcolor">每天乐在其中</span> </td>
</tr>
<tr>
<td>
<input type="text" class="input" placeholder=" 昵称" name="name">
</td>
<tr>
<td>
<input type="password" class="input" placeholder=" 密码" name="power">
</td>
</tr>
<td>
<input type="text" class="input" placeholder=" 电话号码" name="call">
</td>
<tr>
<td height="10px">
<a href="https://www.webtoons.com/en/fantasy/steam-dragon-express/list?title_no=1270&page=1" class="text_min">点击观看漫画</a>
</td>
</tr>
</tr>
<td>
<input type="button"class="button_input " value=" 立即注册" >
</td>
<tr height="20"></tr>
</table>
</td>
</div>
</tr>
<tr><audio src="audio/造物2/m02-2mix.wav" controls autoplay loop></audio></tr>
<!-- <tr align="center">
<tr height="200"></tr>
<img src="image/背景尝试1.jpg" height="1192" width="670"/></tr>-->
</table>
</body>
</html>