"我家菜馆"点菜单
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> </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> 咏柳</h2>
<p> [唐]贺知章</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>    </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> 男
<input type="radio" name="sex" id="woman" checked> 女
</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"> 跑步
<input type="checkbox" name="run"> 跑步
<input type="checkbox" name="run"> 跑步
<input type="checkbox" name="run"> 跑步
</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