对于做一个属于自己的网站，一开始我还是有些在意，毕竟是头一次制作，但是当我做起来的时候🤣我才知道，是我想多了。。。
已经不是好不好看的程度了，做出来我感觉就已经是一个很厉害的事情了😂
开始的时候总是手忙脚乱，不知道从哪里入手，自己在纸上画的图太草率，往往都要在浏览器中调试后能成功，对于这次手忙脚乱的制作，我还是觉得蛮庆幸的，我居然能做出来，虽说看似少了一些东西，毕竟时间实在是太少了，过年的时候把时间大多放在了玩上，做成这样已经挺满意辣~
后来，我又自己上网查了一些关于边角修饰的css语言，添加到了我的程序中，看起来还不错。
接下来，代码如下↓↓↓
源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="../css/css.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../image/instruction1.html">
<link rel="stylesheet" href="../image/instruction2.html">
<link rel="stylesheet" href="../image/instruction3.html">
<link rel="stylesheet" href="../image/instruction4.html">
<link rel="stylesheet" href="../image/instruction5.html">
<link rel="stylesheet" href="../image/instruction6.html">
<link rel="stylesheet" href="../image/instruction7.html">
<link rel="stylesheet" href="../image/instruction8.html">
<link rel="stylesheet" href="../image/instruction9.html">
<link rel="stylesheet" href="../image/instruction10.html">
</head>
<body>
<!--头部start-->
<div class="w1239 header">
<div class="logo fl">
</div>
<div class="screach fl">
<form>
<input type="text" class="conclusion" value="智能窗控制系统">
<input type="submit" class="find" value="查 找">
</form>
<p>
<strong>
<a href="">热搜榜</a>
<a href="">智能运输小车</a>
<a href="">贴心宠物</a><br>
<a href="">智能跑鞋</a>
<a href="">二重工作模式机械臂</a>
<a href="">智能遥控器</a>
</strong>
</p>
</div>
<div class="help fr">
<a href="loading.html">登陆</a>
|
<a href="register.html">注册</a>
</div>
</div>
<!--头部end-->
<!--导航start-->
<div class="w1637 nav">
<ul class="nav1 fl">
<li class="first"><a href="">首页</a></li>
<li><a href="">阅读</a></li>
<li><a href="">技术</a></li>
<li><a href="">资源</a></li>
</ul>
<ul class="nav1 nav2 fl">
<li><a href="">论坛</a></li>
<li><a href="">活动</a></li>
</ul>
<ul class="nav1 nav3 fl">
<li class="box3"><a href="">文章搜索</a></li>
</ul>
</div>
<!--展示 start-->
<div class="display w1637">
<div class="exh fl">
<div class="zhanshi">作品展示</div>
<div class="tuxiang">
<a href=""></a>
<p>本作品是一辆能节约运输时人力资源成本的自动运输车的模型，它涵盖了可以移植成为商业化运输小车的各项技术</p>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="form fl">
<ul class="form1">
<li>全部</li>
<li>电子类</li>
<li>远程操控类</li>
<li>竞技类</li>
<li>手工类</li>
</ul>
<ol class="form2">
<li><span>1</span><a href="../image/instruction1.html"> 智能运输小车</a></li>
<li><span>2</span><a href="../image/instruction2.html"> 智能开关系统</a></li>
<li><span>3</span><a href="../image/instruction3.html">二重工作模式机械臂</a></li>
<li><span>4</span><a href="../image/instruction4.html"> 智能跑鞋</a></li>
<li><span>5</span><a href="../image/instruction5.html">贴心宠物</a></li>
<li><span>6</span><a href="../image/instruction6.html"> 激光竖琴</a></li>
<li><span>7</span><a href="../image/instruction7.html"> 智能遥控器</a></li>
<li><span>8</span><a href="../image/instruction8.html"> 示波器手表</a></li>
<li><span>9</span><a href="../image/instruction9.html"> 智能垃圾桶</a></li>
<li><span>10</span><a href="../image/instruction10.html"> 智能交通系统</a></li>
</ol>
</div>
</div>
<!--展示 end-->
</body>
</html>
css部分：
@charset "utf-8";
/* CSS Document */
/*公共部分 start*/
body{
font-size: 16px;
font-family:"Microsoft YaHei UI Light";
color: #fff;
}
.w1239{
width: 1239px;
margin: 0 auto;
}
.w1637{
width: 1637;
margin: 0 auto;
border: 1px solid #fff;
margin-left: 45px;
}
/*公共部分 end*/
/*头部 start*/
.header{
height: 200px;
}
.log{
width: 392px;
height: 474px;
}
.log img{
width:392px;
padding-left: 5px;
}
img{height: 200px;}
.screach{
padding: 50px 0px 50px 20px;
width: 490px;
height: 100px;
}
.screach form{
height: 50px;
width: 400px
}
.screach p{
height: 100px;
width: 400px;
color: #464545;
font-size: 14px;
text-decoration: none;
}
.screach a{
color: #464545;
font-size: 14px;
text-decoration: none;
}
p,a:hover{color: green;}
.conclusion{
font-style: italic;
width:320px;
height:25px;
line-height:25px;
border:1px solid #babebf;
border-right:0 none;
outline:none;
color:#999999;
padding-left:5px;
float:left;
}
.find{
width:68px;
height:27px;
outline:none;
border:1px #babebf solid;
font-size:14px;
font-weight:bold;
float:left;
}
.help {
height: 200px;
}
.help img{
height: 200px;
width: 450px;
}
/*头部 end*/
/*导航 start*/
.nav{
height: 58px;
line-height: 35px;
}
.nav li {
float: left;
display: inline;
}
.nav1 li{
padding: 10px 60px;
border: 1px solid #000000;
border-radius:11px;
margin-left: 5px;
}
.nav1 a{
color:green;
}
.nav1 a:hover{
color:antiquewhite;
font-weight: bold;
}
.first {
font-weight: bold;
}
.nav2{
padding-left:55px;
}
.nav3{
padding-left:55px;
}
/*导航 end*/
/*展示 start*/
.display{
height: 1637px;
margin-top:10px;
margin-left: 56px;
background-color: 0;
padding:8px 0 7px 0;
}
.exh{
width: 1000px;
height: 1420px;
}
.zhanshi{
height: 30px;
width: 70px;
text-align: center;
line-height: 30px;
border: 1px solid #000;
border-radius:9px;
color: #000;
margin: 10px;
}
.tuxiang{
width:800px;
height: 1000px;
margin-bottom: 8px;
position: absolute;
}
.tuxiang img{
width: 1000px;
height: 1000px;
}
.tuxiang p{
width:1000px;
height:31px;
line-height:31px;
background-color: #000;
position:absolute;
left:0;
bottom:0;
font-size:14px;
color:#fff;
text-indent:30px;
opacity:0.5;
filter:alpha(opacity=50);
}
.exh li{
width:135px;
height:95px;
float:left;
display:inline;
padding:1px;
margin-left:24px;
cursor:pointer;
position: relative;
right: 0px;
top: 1001px;
border: 1px solid #522829;
}
.exh ul img{
width:135px;
height:95px;
}
.form{
width: 310px;
height: 1000px;
background: url(../image/rank1.jpg) ;
padding-left: 46px;
margin-top: 52px;
}
.form1{
height: 26px;
}
.form1 li{
display: inline;
height:20px;
line-height:24px;
padding:0px 4px;
margin-top: 5px;
border:1px solid #545454;
color:#666666;
font-size: 11px;
}
.form2{
height: 973px;
}
.form2 li{
font-size: 29px;
height: 99px;
color: aqua;
}
.form2 a{
font-size: 27px;
}
.form1 :hover{
background:#07D5EF;
}
/*展示 end*/
登陆界面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="">
账号：<input type="text" name="user_name" value=""/><br>
密码：<input type="password" name="password" value=""/><br>
<input type="submit" value="OK!"/> <input type="reset" value="reset!"/>
</form>
</body>
</html>
注册界面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="">
账号名称：<input type="text" name="user_name" value=""/><br>
密码：<input type="password" name="password" value=""/><br>
密码确认：<input type="password" name="password" value=""/><br>
性别：<input type="radio" name="sex" value="men"/>男
<input type="radio" name="sex" value="women"/>女<br>
身份证号：<input type="password" name="password" value=""/><br>
爱好：<input type="checkbox" name="hobby" value="打篮球"/>打篮球
<input type="checkbox" name="hobby" value="踢足球"/>踢足球
<input type="checkbox" name="hobby" value="听音乐"/>听音乐
<input type="checkbox" name="hobby" value="下象棋"/>下象棋
<input type="checkbox" name="hobby" value="打乒乓球"/>打乒乓球
<input type="checkbox" name="hobby" value="其他"/>其他<br>
<input type="submit" value="OK!"/> <input type="reset" value="reset!"/>
</form>
</body>
</html>
超链接部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
display: inline-block;
}
.box1{
height: 600px;
width: 600px;
}
.box2{
width: 722px;
height: 476px;
float: right;
background: #000;
color: aliceblue;
font-size:16px ;
line-height: 39px;;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
作品简介：<br>
1. 自动开关窗:<br>
i.自动开窗:温度过高，每天定时开窗通风自动开窗<br>
ii.自动关窗:温度过低，湿度过高，检测到恶劣天气，每天定时关窗<br>
2.自动擦窗:定期擦窗，检测到水时自动擦窗（进入擦窗系统）<br>
3.其他功能<br>
实时温湿度输出、窗户角度卡死、按键开关窗，擦窗<br>
作品优点：<br>
操作简单，方便快捷<br>
实用价值：<br>
这款智能窗控制系统可以完全释放使用者的双手，不必为每天擦窗开关窗的繁琐小事而困扰，有利于使用者在忙碌的日常生活中得到较好的环境，适用于广大的工作人群，有一定的前景。<br>
</div>
</body>
</html>
预览图：（请不要吐槽它很丑啊喂！）
屏幕截图(84).png
其中一个超链接：
屏幕截图(85).png
注册界面：
屏幕截图(87).png
登陆界面：
屏幕截图(86).png
接下来百度云链接：
链接：http://pan.baidu.com/s/1bo5DxH9 密码：m8ox
