對(duì)于做一個(gè)屬于自己的網(wǎng)站，一開始我還是有些在意，畢竟是頭一次制作，但是當(dāng)我做起來(lái)的時(shí)候??我才知道，是我想多了。。。
已經(jīng)不是好不好看的程度了，做出來(lái)我感覺(jué)就已經(jīng)是一個(gè)很厲害的事情了??
開始的時(shí)候總是手忙腳亂，不知道從哪里入手，自己在紙上畫的圖太草率，往往都要在瀏覽器中調(diào)試后能成功，對(duì)于這次手忙腳亂的制作，我還是覺(jué)得蠻慶幸的，我居然能做出來(lái)，雖說(shuō)看似少了一些東西，畢竟時(shí)間實(shí)在是太少了，過(guò)年的時(shí)候把時(shí)間大多放在了玩上，做成這樣已經(jīng)挺滿意辣~
后來(lái)，我又自己上網(wǎng)查了一些關(guān)于邊角修飾的css語(yǔ)言，添加到了我的程序中，看起來(lái)還不錯(cuò)。
接下來(lái)，代碼如下↓↓↓
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</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="智能窗控制系統(tǒng)">
<input type="submit" class="find" value="查 找">
</form>
<p>
<strong>
<a href="">熱搜榜</a>
<a href="">智能運(yùn)輸小車</a>
<a href="">貼心寵物</a><br>
<a href="">智能跑鞋</a>
<a href="">二重工作模式機(jī)械臂</a>
<a href="">智能遙控器</a>
</strong>
</p>
</div>
<div class="help fr">
<a href="loading.html">登陸</a>
|
<a href="register.html">注冊(cè)</a>
</div>
</div>
<!--頭部end-->
<!--導(dǎo)航start-->
<div class="w1637 nav">
<ul class="nav1 fl">
<li class="first"><a href="">首頁(yè)</a></li>
<li><a href="">閱讀</a></li>
<li><a href="">技術(shù)</a></li>
<li><a href="">資源</a></li>
</ul>
<ul class="nav1 nav2 fl">
<li><a href="">論壇</a></li>
<li><a href="">活動(dòng)</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>本作品是一輛能節(jié)約運(yùn)輸時(shí)人力資源成本的自動(dòng)運(yùn)輸車的模型，它涵蓋了可以移植成為商業(yè)化運(yùn)輸小車的各項(xiàng)技術(shù)</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>遠(yuǎn)程操控類</li>
<li>競(jìng)技類</li>
<li>手工類</li>
</ul>
<ol class="form2">
<li><span>1</span><a href="../image/instruction1.html"> 智能運(yùn)輸小車</a></li>
<li><span>2</span><a href="../image/instruction2.html"> 智能開關(guān)系統(tǒng)</a></li>
<li><span>3</span><a href="../image/instruction3.html">二重工作模式機(jī)械臂</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"> 智能交通系統(tǒng)</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*/
/*導(dǎo)航 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;
}
/*導(dǎo)航 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>無(wú)標(biāo)題文檔</title>
</head>
<body>
<form action="">
賬號(hào)：<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>
注冊(cè)界面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<form action="">
賬號(hào)名稱：<input type="text" name="user_name" value=""/><br>
密碼：<input type="password" name="password" value=""/><br>
密碼確認(rèn)：<input type="password" name="password" value=""/><br>
性別：<input type="radio" name="sex" value="men"/>男
<input type="radio" name="sex" value="women"/>女<br>
身份證號(hào)：<input type="password" name="password" value=""/><br>
愛(ài)好：<input type="checkbox" name="hobby" value="打籃球"/>打籃球
<input type="checkbox" name="hobby" value="踢足球"/>踢足球
<input type="checkbox" name="hobby" value="聽音樂(lè)"/>聽音樂(lè)
<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>無(wú)標(biāo)題文檔</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">
作品簡(jiǎn)介：<br>
1. 自動(dòng)開關(guān)窗:<br>
i.自動(dòng)開窗:溫度過(guò)高，每天定時(shí)開窗通風(fēng)自動(dòng)開窗<br>
ii.自動(dòng)關(guān)窗:溫度過(guò)低，濕度過(guò)高，檢測(cè)到惡劣天氣，每天定時(shí)關(guān)窗<br>
2.自動(dòng)擦窗:定期擦窗，檢測(cè)到水時(shí)自動(dòng)擦窗（進(jìn)入擦窗系統(tǒng)）<br>
3.其他功能<br>
實(shí)時(shí)溫濕度輸出、窗戶角度卡死、按鍵開關(guān)窗，擦窗<br>
作品優(yōu)點(diǎn)：<br>
操作簡(jiǎn)單，方便快捷<br>
實(shí)用價(jià)值：<br>
這款智能窗控制系統(tǒng)可以完全釋放使用者的雙手，不必為每天擦窗開關(guān)窗的繁瑣小事而困擾，有利于使用者在忙碌的日常生活中得到較好的環(huán)境，適用于廣大的工作人群，有一定的前景。<br>
</div>
</body>
</html>
預(yù)覽圖：（請(qǐng)不要吐槽它很丑啊喂?。?/p>
屏幕截圖(84).png
其中一個(gè)超鏈接：
屏幕截圖(85).png
注冊(cè)界面：
屏幕截圖(87).png
登陸界面：
屏幕截圖(86).png
接下來(lái)百度云鏈接：
鏈接：http://pan.baidu.com/s/1bo5DxH9 密碼：m8ox
