目录
一.页面总体布局
这里用css将也面设置为无法活动，并将背景颜色调整为由红到白渐变，语法为background: linear-gradient(渐变方向,起始颜色,终止颜色);。
html,body{
margin: 0px;
overflow: hidden;
height: 100%;
}
body{
background: linear-gradient(to right, rgb(255, 0, 17),white);
}
接着在页面左侧放入一个div盒模型，将其class属性定义为one，接着用css选择器调整背景等属性，这里用到主要css知识：borde-rights简化设置右边框，display设置盒模型的显示模式，width设置长，height设置长，background-color设置背景颜色。
.one{
width: 20%;
height:100%;
background-color: rgb(255, 140, 0);
border-right: red dotted 1px;
display: inline-block;
}然后在页面上端放置一个盒子用作选项栏，这里注意用到的css知识有：border设置各个方向的边款，border-radius设置边框弧度，float设置漂浮使盒模型飘到顶端，margin设置外边距，display将盒的显示模式设为flex（便于后续在里面放置盒模型），flex-direction设置弹性盒方向，justify-content和align-items是设置弹性盒内部盒模型的布局，position设置相对定位（便于后面主体表单的定位）（重复的用法省略）。
.top{
border: rgb(165, 42, 93);
border-top: none;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
width:70% ;
height: 15%;
float: right;
margin-right:80px ;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
background-color: rgb(165, 42, 93);
}用同样的方法设置主体弹性盒的布局，其用到的方法也上述的基本相同，其中额外的便是用 position: absolute; top: 200px;来定位，顶部弹性盒设置的relative就是为这里所服务的，以下是主体弹性盒的css属性：
.under{
width: 70%;
height: 70%;
float: right;
position: absolute;
top: 200px;
right: 80px;
display: flex;}
总体布局就算完成了。
二.左栏篇
左栏主要设置选项栏，在里面放置盒模型，超链接，最后加点特效，主要的css知识有：（布局的知识与上述一致，在此省略）用a:hover的伪类来设置盒模型的特效，使在有鼠标放置在盒子上面的时候会发生相应的变化，该类下设置变化后的大小，用transition设置变化的区域（长变、宽变，还是都变）和变化的时间。其中盒模型里面的内容其中一个运用html的a标签设置超链接，
其他三个运用伪元素a:after{}来设置，具体在下面第二张图（伪元素可以让字体“焊”在页面上而无法被选中去进行复制等操作）
.two:hover{
width:70%;
height:20% ;
transition: all 1s;} #infromation::after{
content:'个人信息';
}
#infromation3::after{
content:'成绩查询';
}
#infromation4::after{
content:'服务通知';
}三.顶栏篇
顶栏篇的设计和左栏差不多，就是布局内部盒子，设置边框类型，颜色，弧度，伪元素特效等，这里补充几个涉及到的知识：html中超链接的target属性：常用的有_self(点开后在本窗口打开网页)和_blank（点开后在新窗口打开网页)，font-size设置字体大小，font-weight设置字体粗细。
.mima,.sex,.hobby,.class,.infro,.zhanghu{
border: thistle double 10px;
font-size: larger;
display: inline-block;
margin-top: 10px;
border-radius: 20%;
background-color: rgb(83, 62, 145);
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 300;
color: azure;
}
四.主体表单篇
设置表单主要用到html的from表单知识，在这里将一一介绍：
（1）输入框：这里主要用到from表单中的input标签，type设置表单类型，输入款就是text和password，name为名称，id为标注（id必须是唯一的），placeholder设置输入框的提示字体
<input type="text" name="user" id="zhanghu" placeholder="账号">（2）单选框：这里同样用到from表单中的input标签,但type类型设置为radio，而且name此时必须设置为同一个值，这样两个选项才会被识别为一组，才能有单选的功能
<span class="sex" >性别：</span>
<input type="radio" name="sex" id="sex">男
<input type="radio" name="sex">女（3）下拉框：下拉框不使用input标签，而是用select标签和里面的option标签，具体代码如下：
<span class="class">班级：</span>
<select name="class" id="">
<option value="C301">高三一班</option>
<option value="C302">高三二班</option>
<option value="C303">高三三班</option>
</select>（4）复选框：复选框使用input标签，type类型设置为checkbox,同样name也要设置为同一个值。
<span class="hobby">爱好：</span>
<input type="checkbox" name="hobby" id="hobby">游泳
<input type="checkbox" name="hobby" id="">阅读
<input type="checkbox" name="hobby" id="">看电影
<input type="checkbox" name="hobby" id="">摄影（5）文本框：文本框不是用input标签，而是用textarea标签，其中placeholder属性同样设置提示字，cols和rows分别设置文本框的长和宽。
<span class="infro">自我介绍：</span><BR></BR>
<textarea name="intro" id="infro" cols="40" rows="10" placeholder="请简要介绍一下自己"></textarea>（6）按钮：按钮类型有好几种，这里用只有种——提交和重置，直接使用button标签，type设 7置为submit和reset即可。
<button type="submit" class="submit1"><span class="submit">提交</span></button>
<button type="reset" class="reset1"><span class="reset">重置</span></button（7）一些修饰：
①用label标签可以实现这样的功能：点击“账号”而不是文本框就可以进行输入，让用户更有体验感，其中的label标签下的for属性的值需要与里面input（可以是其他标签比如selection）中的id属性的值相同（不是name属性的值）才能发挥作用。
<label for="zhanghu">
<span class="zhanghu">账户：</span>
<input type="text" name="user" id="zhanghu" placeholder="账号"><br></label>②用hr（水平线）、br（换行）标签来进行布局，用span标签装下文字并用css设置字体边框，颜色，特效等。
五.课程表篇
新建一个html文件进行表格编辑，这里这样用到的知识：table标签，tbody标签，tr，th，td标签，table，tbody标签定义表格，接着tr标签表示一行，th标签定义表格头，td标签定义内容，其中table标签中有border属性(设置边框)，cellspancing属性（设置单元格之间的距离），cellpadding属性（设置字体与边框的距离），还可以在tr标签中添加style内联样式设置背景颜色，字体等，这里提一下使文字居中的属性是text-align: center;
<table border="10" cellspancing="10" cellpadding="10" style="width: 1000px;height: 700px;">
<tbody>
<tr><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>
<tr style="text-align: center;"><td>早读</td><td>升旗</td><td>英语</td><td>语文</td><td>英语</td><td>语文</td></tr>
<tr style="background-color: greenyellow;text-align: center;"><td>第一节</td><td>英语</td><td>数学</td><td>英语</td><td>政治</td><td>英语</td></tr>
<tr style="text-align: center;"><td>第二节</td><td>音乐</td><td>体育</td><td>数学</td><td>历史</td><td>物理</td></tr>
<tr style="background-color: greenyellow;text-align: center;"><td>第三节</td><td>数学</td><td>政治</td><td>信息</td><td>化学</td><td>生物</td></tr>
<tr style="text-align: center;"><td>午休</td><td>睡觉</td><td>睡觉</td><td>睡觉</td><td>睡觉</td><td>睡觉</td></tr>
<tr style="background-color: greenyellow;text-align: center;"><td>第四节</td><td>语文</td><td>语文</td><td>心理</td><td>语文</td><td>数学</td></tr>
<tr style="text-align: center;"><td>第五节</td><td>地理</td><td>化学</td><td>生物</td><td>数学</td><td>体育</td></tr>
<tr style="background-color: greenyellow;text-align: center;"><td>第六节</td><td>美术</td><td>物理</td><td>地理</td><td>体育</td><td>选修</td></tr>
</tbody>
</table>可以将body的显示模式改为flex即弹性盒模式，设置justify-content: center;align-items: center;将表格居中。
最后在原来的网页中设置课程安排的超链接，点开即可
div class="inner two" style='text-align: center; color: darkorange;background-color:rgb(142, 142, 220);font-weight: 900
;font-size:x-large;'><a href="class.html" style='text-align: center; color: darkorange;background-color:rgb(142, 142, 220);font-weight: 900
;font-size:x-large;'>课程安排</a></div>最后成品：
扫一扫
2266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
