熟悉CSS+DIV网页设计技术

最新推荐文章于 2024-08-17 22:24:13 发布

不才邪键仙

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量336

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_72317603/article/details/134831885

版权

实验目的

熟悉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>