一次单独完成的网站作业

作者: 黑猫乄 | 来源:发表于2017-02-01 23:34 被阅读0次

一次单独完成的网站作业
忙碌的生活
学习新技能，做小报
数据可视化个人作业2
单独清除某网站的cookie
习概老师给我们作业打了100分，猪队友连一句感谢的话都没有
2018.8.4 看到一束光
当日复盘2
2018年1月计划
04-Web网站基础架构和组成

对于做一个属于自己的网站，一开始我还是有些在意，毕竟是头一次制作，但是当我做起来的时候🤣我才知道，是我想多了。。。
已经不是好不好看的程度了，做出来我感觉就已经是一个很厉害的事情了😂
开始的时候总是手忙脚乱，不知道从哪里入手，自己在纸上画的图太草率，往往都要在浏览器中调试后能成功，对于这次手忙脚乱的制作，我还是觉得蛮庆幸的，我居然能做出来，虽说看似少了一些东西，毕竟时间实在是太少了，过年的时候把时间大多放在了玩上，做成这样已经挺满意辣~
后来，我又自己上网查了一些关于边角修饰的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">
        ![](../image/transmission-tower-antenna-clip-art-5700.jpg)
    </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">
        ![](../image/8a40262b7bd778ae9cdf1531fac3d6df.gif)
        <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="">![](../image/display 1.jpg)</a>
            <p>本作品是一辆能节约运输时人力资源成本的自动运输车的模型，它涵盖了可以移植成为商业化运输小车的各项技术</p>
        </div>
        <ul>
            <li>![](../image/display 1.jpg)</li>
            <li>![](../image/display 2.jpg)</li>
            <li>![](../image/display 3.jpg)</li>
            <li>![](../image/display 4.jpg)</li>
            <li>![](../image/display 6.jpg)</li>
            <li>![](../image/display 7.jpg)</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">
![](display 3.jpg)
    </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

一次单独完成的网站作业
对于做一个属于自己的网站，一开始我还是有些在意，毕竟是头一次制作，但是当我做起来的时候?我才知道，是我想多了。。。...
忙碌的生活
第一次用网站来给学生布置作业，独立操作，没想到完成以后，跑到作业区一看怎么没有呢？重复操作几次后还是不见效果，有...
学习新技能，做小报
学校布置的作业，家长来完成。小包模板，图片，抠图网站，内容，美化。got it~
数据可视化个人作业2
个人作业进度完成了地图的绘制点击国家出现该国网站排名的交互完成不同网站，在同一比较量上的图表比较解决不同颜...
单独清除某网站的cookie
方法一：（此方法比方法二更方便~）方法二：在计算机上打开 Chrome。依次点击右上角的“更多”图标 >...
习概老师给我们作业打了100分，猪队友连一句感谢的话都没有
习概小组作业评分出来了，老师给我打了满分，还单独私信夸了我：小唯，你们小组作业完成得很好 [竖起大拇指] 我的个...
2018.8.4 看到一束光
因为发现连续两天作业没有按照自己的日程安排完成，让丫头拿着作业和我一起进到房间单独沟通；（此时心里有些生...
当日复盘2
1.完成disc课程打卡，关键是昨天的作业不能补了。把作业内容搞错也没谁了。 2.娃娃开始耍赖不想单独睡，沟通安慰...
2018年1月计划
特别的一次作业-手写完成。
04-Web网站基础架构和组成
网站篇http协议(单独详细学习)静态网站(较动态网站更为安全)动态网站(多种结构组合)伪静态网站(本质是一个动态...

一次单独完成的网站作业

相关文章

一次单独完成的网站作业

忙碌的生活

学习新技能，做小报

数据可视化个人作业2

单独清除某网站的cookie

习概老师给我们作业打了100分，猪队友连一句感谢的话都没有

2018.8.4 看到一束光

当日复盘2

2018年1月计划

04-Web网站基础架构和组成

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读