HTML

•分类 , 笔记
691 0

"我家菜馆"点菜单

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"我家菜馆"点菜单</title>
</head>
<body bgcolor="#ffffcc">
  <h3>&nbsp;&nbsp;</h3>
  <ul>
    <li></li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <li></li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <li></li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <li></li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </ul>
  <hr width="280"size="1"align="left"color="#990000">
  <br>
  <i></i>
</body>
</html>

唐诗欣赏

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<titl>唐诗欣赏</titl>
</head>
<body>
  <article>
  <header>
    <h2>相思</h2>
    <h4>唐：王维</h4>
    </header>
    <section>
      123456789
      <br>123456789
      <br>
    </section>
    <aside>
      <h5>123456789</h5>
    </aside>
    <footer>
      <hr/>
    </footer>
  </article>
  <article>
    <header>
    <h3>译文</h3>
    </header>
    <section>
      <br>
    </section>
     <section>
       <header>
    <h4>注释</h4>
    </header>
       <section>
         <br>
         <br>
         <br>
         <br>
       </section>
    </section>
    <aside>
      <h5>参考资料</h5>
    </aside>
    <footer>
    </footer>
    <hr/>
  </article>
  <article>
    <header>
      <h3>创作背景</h3>
    </header>
    <section>
      此时一作
    </section>
    <aside>
      <h5>参考资料</h5>
    </aside>
    <footer>
      <hr/>
    </footer>
  </article>
  <article>
    <figure>
      <figcaption>
        王维
        </figcaption>
        <p><img src=""></p>
    </figure>
    <footer>
      <hr/>
    </footer>
  </article>
  <aside>
    <h4><i>来源</i></h4>
  </aside>
  <article>
    <header>
      <h2>猜你喜欢</h2>
    </header>
    <section>
      <hgroup>
      <figcaption>
       <h4>望</h4>
       </figcaption>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    <figcaption>
      <h4>征</h4>
    </figcaption>
        <br>
        <br>
        <br>
        <br>
    <figcapation>
      <h4>次北</h4>
    </figcapation>
    <br>
    <br>
    <br>
    <br>
    <br>
      </hgroup>
    </section>
  </article>
</body>
</html>

古诗词欣赏

index.html

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<titl>古诗欣赏</titl>
</head>
<body>
  <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;咏柳</h2>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[唐]贺知章</p>
  <ul>
   <p>碧玉<sup>[1]</sup>妆<sup>[2]</sup>成一树<sup>[3]</sup>高，</p>
   <p>万条垂下碧丝绦<sup>[4]</sup>。</p>
   <p><ins>不知细叶谁裁出，</ins></p>
   <p><ins>二月春风似剪刀。</ins></p>
  </ul>
  <hr/>
  <ul>
    <li><strong>诗词解释</strong></li>
    <p>[1]123456789</p>
    <p>[2]123456789</p>
    <p>[3]123456789</p>
    <p>[4]123456789</p>
    </ul>
   <ul>
     <li><strong>画线诗句译文</strong></li>
     <p>123456789</p>
  </ul>
</body>
</html>

温州科技馆入馆须知

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>温州科技馆入馆须知</title>
</head>
<body bgcolor="#ccffff">
  <h2 align="center"></h2>
  <hr color="#ff3300">
  <strong><i></i></strong>
  <p></p>
  <strong><i></i></strong>
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <strong><i></i></strong>
  <p></p>
</body>
</html>

古诗文欣赏

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>古诗文欣赏</title>
</head>
<body>
  <h2></h2>
  <p>&nbsp&nbsp&nbsp&nbsp</p>
  <div id="top">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div id="bottom">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>


<style typle="text/css">
p,
h2{
  text-align:center;
}
h2{
  border-radius:10px 30px;
  border:#f60 solid 2px;
  height:50px;
  width:450px;
  lint-height:50px;
  margin:0 auto;
  background-color:#ff0;
}
#top{
  width:450px;
  margin:40px auto;
  border-radius:40px;
  border:4px double #f60;
}
#bottom{
  width:450px;
  margin:40px auto;
  border-radius:40px;
  backgroud-color:#69c;
  border:#69c solid 2px;
}
</style>

散文赏析

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>散文赏析</title>
  <link href="style/div.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="article">
    <div id="header">
      <h1></h1>
    </div>
    <div id="content">
      <h2></h2>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div id="footer"></div>
  </div>
</body>
</html>

style.css

@charset "utf-8";
/*CSS Document*/
*{
  margin:0px;
  padding:0px;
  border:0px;}
body{
  font-family:"黑体";
  font-size:12px;
  color:#3a3a3a;
  backgroud-img:url() repeat center;}
#article{
  width:760px;
  margin:0px auto;}
#header{
  background-image:url();
  height:250px;}
#header h1{
  font-size:30px;
  font-weight:400;
  color:#fff;
  padding-top:15px;
  padding-left:15px;
  letter-spacing:-2px;}
#content h2{
  font-size:25px;
  text-align:center;
  font-weight:100;
  padding-top:8px;
  padding-bootom:10px;}
#content p{
  line-height:2em;
  text-indent:2em;}
#footer{
  border-top:1px solid #dadada;
  font-size:12px;
  color:gray;
  text-align:center;
  padding-top:8px;
  padding-bottom:40px;
  margin-top:8px;}

登陆界面

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登陆界面</title>
  <link href="style/div.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="login">
    <from name="loginfrom" method="post" action="#">
      <div class="loginfunc">
        <span class="loginfuncapp">二维码登录</span>
        <span clas="loginfuncnormal">邮箱账号登陆</span>
      </div>
      <input typle="text" placeholder="邮箱账号或手机号" class="identity">
      <input typle="password" placeholder="密码" class="password">
      <p class="info">
        <input typle="checkbox" class="checkbox">
        <span>十天内免登录</span>
        <span class="help">
          <a href="#">忘记密码？</a>
        </span>
      </p>
      <input type="submit" value="登 录" class="submit">
      <input type="button" value="注 册" class="button">
    </from>
  </div>
</body>
</html>

style.css

@charset "utf-8";
/*CSS Document*/
*{
  margin:0px;
  padding:0px;
  border:0px;}
body{
  font-family:"微软雅黑";}
input:focus{
  outline:none;}
#login{
  width:450px;
  height:380px;
  border:1px solid #999;
  box-shadow:0px 0px 5px 2px #cccccc;
  border-radius:10px;
  margin:40px auto;}
#login .loginfunc{
  height:48px;
  width:100%;
  margin-bottom:45px;
}
.loginfuncapp,.loginfuncnormal{
  display:inline-block;
  width:100px;
  text-align:center;
  line-height:48px;
  color:#666;
  margin:10px 60px;}
.loginfuncnormal{
  color:#0a8745;
  border-bottom:2px solid #0a8745;}
.identity,.password{
  width:328px;
  height:45px;
  margin:10px 60px 10px 38px;
  border:1px solid #ccc;
  padding-left:45px;}
.identity{
  background:url()no-repeat 10px center;}
.password{
  background:url()no-repeat 10px center;}
.identity:focus,.password:focus{
  border:1px solid #0a8745;}
::-webkit-input-placeholder{
  color:#ccc}
.info{
  height:20px;
  padding:0 0 10px 40px;}
.chekbox{
  width:16px;
  height:16px;
  vertical-align:bottom;}
.info span{
  font-size:14px;
  color:#666;
  vertical-align:bottom;
  margin-left:10px;}
.info span.help{
  margin-left:190px;}
.info span a{
  color:#0a8745;
  text-decoration:none;
}
.submit,.button{
  width:172px;
  height:50px;
  border-radius:4px;
  text-align:center;
  font-size:18px;
  cursor:pointer;
}
.submit{
  background:#0a8745;
  color:#fff;
  margin:20px 20px 0px 40px;}
.button{
  border:1px solid #a7d4bd;
  color:#0a8745;
  background:#e6f3ec;}
.submit:hover{
  background:#077e3f;}
.button:hover{
  background:#cee7da;}

创建简历

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>创建简历</title>
  <link href="style/div.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="wrap">
    <div class="header"><h3>创建简历</h3></div>
    <form name="resume" method="post" action="#" autocompelete="on">
    <div class="title"><h5>注意：录入个人简历</h5></div>
    <div class="content">
      <table width="570" border="0" cellpadding="0" cellspacing="1">
        <tr>
          <td align="center" class="cols1">姓名<span class="sign">*</span></td>
          <td align="center" class="cols2"><input type="text" class="input1" required></td>
          <td align="center" class="cols1">照片</td>
          <td align="center" class="cols2"><input type="file" class="input1"></td>
        </tr>
        <tr>
          <td align="center" class="cols1">性别</td>
          <td align="center" class="cols2">
          <input type="radio" name="sex" id="man" checked>&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" name="sex" id="woman" checked>&nbsp;&nbsp;女
          </td>
          <td align="center" class="cols1">电子邮箱<span class="sign">*</span></td>
          <td align="center" class="cols2"><input type="email" class="input1" require></td>
        </tr>
        <tr>
          <td align="center" class="cols1">出生日期</td>
          <td align="center" class="cols2"><input type="date" class="input1"></td>
          <td align="center" class="cols1">年龄</td>
          <td align="center" class="cols2"><input type="number" class="input1" min="12" max="100"></td>
        </tr>
        <tr>
          <td align="center" class="cols1">政治面貌</td>
          <td align="center" class="cols2"><input type="text" class="input1"></td>
          <td align="center" class="cols1">自学能力</td>
          <td align="center" class="cols2"><input type="range" class="input1" min="1" max="100"></td>
        </tr>
        <tr>
          <td align="center" class="cols1">手机号码</td>
          <td align="center" class="cols2"><input type="tel" class="input1" required></td>
          <td align="center" class="cols1">幸运颜色</td>
          <td align="center" class="cols2"><input type="color" value="#ff0000"></td>
        </tr>
        <tr>
          <td align="center" class="cols1">兴趣爱好</td>
          <td colspan="3" align="center" class="cols2">
          <input type="checkbox" name="run">&nbsp;&nbsp;跑步&nbsp;&nbsp;
          <input type="checkbox" name="run">&nbsp;&nbsp;跑步&nbsp;&nbsp;
          <input type="checkbox" name="run">&nbsp;&nbsp;跑步&nbsp;&nbsp;
          <input type="checkbox" name="run">&nbsp;&nbsp;跑步&nbsp;&nbsp;
          </td>
        </tr>
        <tr>
          <td align="center" class="cols1">个人主页</td>
          <td colspan="3" align="center" class="cols2"><input type="url" class="input2"></td>
        </tr>
      </table>
    </div>
      <div class="bottom"><input type="submit" value="添加"><input type="button" value="关闭"></div>
    </form>
  </div>
</body>
</html>

style.css

200页css
@charset "utf-8";
/*css document*/
*{
  padding:0px;
  margin:0px;
  border:0px;
}
.wrap{
  width:650px;
  height:400px;
  margin:80px auto;
  background:#b1c242;
}
.resume{
  width:630px;
  height:356px;
  background:#fff; 
  border:1px solid #ff0;
  margin:2px 9px 0px 9px;
  position:relative;
}
.header{
  height:30px;
  background:url() no-repeat 7px center;
  background-size:20px 20px;
}
.header h3{
  font-size:12px;
  padding-left:30px;
  padding-top:9px;
  letter-spacing:1px;
}
.title{
  width:100%
    height:35px;
  background:#ffffe7;
}
.title h5{
  color:#6f622b;
  font-weight:normal;
  font-family:"微软雅黑"；
  padding-left:35px;
  padding-top:9px;
  background:url() no-repeat 12px 8px;
  background-size:16px 16px;
}
.content{
  width:100%
  height:350px;
}
.content table{
  background:#b1c242;
  margin:5px auto;
}
.cols1{
  background:#e5f0c8;
  width:90px;
  height:30px;
  font-size:12px;
}
.cols2{
  background:#fff;
  width:195px;
  font-size:12px;
}
.input1{
  width:190px;
  height:24px;
  border:1px solid #b1c242;
  font-size:12px;
}
.input2{
  width:477px;
  height:24px;
  border:1px solid #b1c242;
}
.sign{
  color:#f00;
  font-size:14px;
  font-weight:bold;
}
.bottom{
  width:100%;
  height:40px;
  margin-top:60px;
  bottom:0px;
  background:#f5f5f5;
  border-top:1px solid #ccc;
  text-align:right;
}
.bottom input{
  width:90px;
  height:30px;
  font-size:12px;
  background:#9ba741;
  color:#fff;
  margin:5px 4px 2px;
}
最后更新 2023-12-26
评论 ( 0 )
OωO
隐私评论