2019.01.10作业
设计如下布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.class{
width: 450px;
height: 340px;
}
.class1{
width: 450px;
height: 80px;
background-color: #42474B;
color: white;
text-align: center;
float: left;
}
.class2{
width: 150px;
height: 210px;
background-color: #622B62;
color: white;
text-align: center;
float: left;
}
.class3{
width: 150px;
height: 210px;
background-color: #51C551;
color: white;
text-align: center;
float: left;
}
.class4{
width: 150px;
height: 210px;
background-color: #F6C5AC;
color: white;
text-align: center;
float: left;
}
.class5{
width: 450px;
height: 50px;
background-color: #C1BAE8;
color: white;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="class">
<div class="class1">页眉区域</div>
<div class="class2">2.导航栏</div>
<div class="class3">1.主题内容区域</div>
<div class="class4">3.其他栏目</div>
<div class="class5">页脚区域</div>
</div>
</body>
</html>
设计用户登录和注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.class{
background-color: #66CCFF;
}
span{
color: red;
}
legend{
border: 1px solid #8ABAE6;
}
a{
color: black;
font-size: 13px;
}
.t{
vertical-align: top;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>用户登录</legend>
<table align="center">
<tr>
<td align="right">用户名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="登录" class="class">
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset>
<legend>用户注册</legend>
<table align="center">
<tr>
<td align="right">用户名：</td>
<td><input type="text"></td>
<td><span>*(最多30个字符)</span></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password"></td>
<td><span>*(最多30个字符)</span></td>
</tr>
<tr>
<td align="right">重复密码：</td>
<td><input type="password"></td>
<td><span>*(密码需要一致)</span></td>
</tr>
<tr>
<td align="right">密码保护问题：</td>
<td>
<select>
<option>请选择密码提示问题</option>
<option>您的生日是？</option>
<option>您的籍贯是？</option>
<option>您的性别是？</option>
</select>
</td>
</tr>
<tr>
<td align="right">密码保护问题答案：</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="a">男
<input type="radio" name="a">女
</td>
</tr>
<tr>
<td align="right" class="t">本站印象：</td>
<td>
<textarea rows="2" cols="20"></textarea>
</td>
</tr>
<tr>
<td align="right">同意服务条款：</td>
<td>
<input type="checkbox">
<a href="#">查看服务条款？</a>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交" class="class">
</td>
</tr>
</fieldset>
</form>
</body>
</html>
制作网站导航（ 列表的浮动）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,a{
margin: 0px;
padding: 0px;
color: white;
text-decoration: none;
list-style: none;
}
#a{
width: 600px;
height: 40px;
margin: 0px auto;
background-color: #383838;
}
#a li{
float: left;
}
#a li a{
color: white;
height: 40px;
line-height: 40px;
font-size: 18px;
font-weight: bold;
padding: 0px 15px;
}
#a li:hover{
background-color: royalblue;
}
</style>
</head>
<body>
<div id="a">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">知识库</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">学员问答</a></li>
<li><a href="#">圈子</a></li>
<li><a href="#">实时课堂</a></li>
<li><a href="#">客户端下载</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
</div>
</body>
</html>
1983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
