jtahstu的博客

root@jtahstu.com   Github   英文博客  

最新碎语:以后没事写写小的知识点吧

您的位置:jtahstu的博客 >笔记> 大三下软件项目开发实训第一天 - html+css

大三下软件项目开发实训第一天 - html+css

1、注册页面


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>注册</title>
  <style type="text/css">
   body {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: "微软雅黑";
   }
   .form {
    padding-left: 30%;
    width: 40%;
   }
   #submit {
    margin-left: 15%;
   }
   .h{
    background-color: rgba(158, 158, 158, 0.09);;
   }
  </style>
 </head>
 <body>
  <h2 align="center">注册</h2>
  <div class="form">
   <form action="" method="post">
    用户名:<input type="text" class="h"/>
    <br /> 
    密码:
    <input type="password" value="" class="h"/>
    <br /> 
    性别:
    <input type="radio" value="0" name="sex" checked="checked" />男
    <input type="radio" value="1" name="sex" />女
    <br /> 
    爱好:
    <input type="checkbox" name="hobby" value="lol"/>LOL
    <input type="checkbox" name="hobby" value="dota"/>Dota
    <input type="checkbox" name="hobby" value="dnf"/>DNF
    <br /> 
    省份:
    <select>
     <option>请选择省份</option> 
     <option>安徽省</option>
     <option>江苏省</option>
     <option>浙江省</option>
     <option>广东省</option>
    </select>
    <br /> 签名:
    <textarea name="" rows="6" cols="50" class="h"></textarea>
    <br />
    <input type="submit" value="提交" id="submit" />
    <input type="reset" name="" id="" value="重置" />
   </form>
  </div>
 </body>
</html>

2、google

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Google搜索</title>
  <style type="text/css">
   span{
    font-family: "微软雅黑";
    font-size: 100px;
    letter-spacing: -10px;
   }
   #google{
    padding-top: 50px;
    text-align: center;
   }
   #search{
    padding-top: 20px;
    text-align: center; 
   }
   #s{
       background-color: #f2f2f2;
       border: 1px solid #f2f2f2;
       border-radius: 2px;
       color: #757575;
       font-family: arial,sans-serif;
       font-size: 13px;
       font-weight: bold;
       height: 36px;
       line-height: 27px;
   }
   #i{
    height: 32px;
    width: 25%;
    font-size: 16px;
   }
   .r{
    color:#FF0000;
   }
   .y{
    color: #FFEB3B;
   }
   .b{
    color: #2196F3;
   }
   .g{
    color: #4CAF50;
   }
  </style>
 </head>
 <body>
  <p id="google">
   <span class="r">G</span>
   <span class="g">o</span>
   <span class="y">o</span>
   <span class="b">g</span>
   <span class="r">l</span>
   <span class="g">e</span>
  </p>
  <p id="search">
   <input type="text" name="" id="i" value="" />
   &nbsp;&nbsp;
   <input type="submit" id="s" value="Google 搜索"/>
  </p>
 </body>
</html>

3、我以前写的一个课表



<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>安徽科技学院2015-2016学年第二学期计算机科学与技术132班课程表</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
  <style type="text/css">
   .table tr td,.table tr th{text-align: center;}
   .embedded{color: #A5A5A5;}
  </style>
  <!--writed by jtahstu at 2016/02/21-->
 </head>
 <body>
  <div class="container">
   <h3 style="text-align: center;">安徽科技学院2015-2016学年第二学期计算机科学与技术132班课程表</h3>
   <table class="table table-bordered table-hover table-container">
    <tr>
     <th></th>
     <th>一</th>
     <th>二</th>
     <th>三</th>
     <th>四</th>
     <th>五</th>
    </tr>
    <tr>
     <td>1、2</td>
     <td>
      教育学<br />
      林飞、姚文均<br />
      1-6、8-10、12-13<br />
      求知楼B205
     </td>
     <td>
      计算机网络技术<br />
      1-12<br />
      新知楼B201<br />
      刘斌
     </td>
     <td>
      软件工程<br />
      新知楼B201<br />
      1-10<br />
      马润
     </td>
     <td>
      计算机网络技术<br />
      1-12<br />
      新知楼B201  刘斌<br />
      计算机网络技术实验<br />
      实验室13  刘斌
     </td>
     <td>
      教育学<br />
      林飞、姚文均<br />
      1-7<br />
      求知楼B205
     </td>
    </tr>
    <tr>
     <td>3、4</td>
     <td class="embedded">
      嵌入式系统原理与接口技术<br />
      实验室  8-10,12-14<br />
      教师待定<br />
      嵌入式方向
     </td>
     <td></td>
     <td class="embedded">
      嵌入式系统原理与接口技术<br />
      实验室  8-14<br />
      教师待定<br />
      嵌入式方向
     </td>
     <td>
      计算机网络技术实验<br />
      实验室  7-13<br />
      刘斌
     </td>
     <td class="embedded">
      嵌入式系统原理与接口技术<br />
      实验室<br />
      1-8<br />
      教师待定
     </td>
    </tr>
    <tr>
     <td>5、6</td>
     <td class="embedded">
      嵌入式系统原理与接口技术<br />
      实验室  8-13<br />
      教师待定<br />
      嵌入式方向
     </td>
     <td>
      面向对象与设计模式<br />
      6-10沈峰  实验室<br />
      信息管理技术方向<br />
      <span class="embedded">嵌入式Linux系统开发<br />
      5-13  实验室<br />
      教师待定<br />
      嵌入式方式
      </span>
     </td>
     <td></td>
     <td>
      面向对象与设计模式<br />
      1-13  沈峰  实验室<br />
      信息管理技术方向<br />
      <span class="embedded">嵌入式Linux系统开发<br />
      5-13  实验室<br />
      教师待定<br />
      嵌入式方式
      </span>
     </td>
     <td>
      软件工程<br />
      1-6<br />
      新知楼B201  马润<br />
      软件工程实验<br />
      7-10  马润
     </td>
    </tr>
    <tr>
     <td>7、8</td>
     <td></td>
     <td class="embedded">
      嵌入式Linux系统开发<br />
      5-13  实验室<br />
      教师待定<br />
      嵌入式方式
     </td>
     <td></td>
     <td class="embedded">
      嵌入式Linux系统开发<br />
      5-13  实验室<br />
      教师待定<br />
      嵌入式方式
     </td>
     <td></td>
    </tr>
    <tr>
     <td>9、10、11</td>
     <td></td>
     <td>
      JAVA WEB系统开发<br />
      1-12(3节)<br />
      实验室<br />
      赵靖
     </td>
     <td></td>
     <td>
      JAVA WEB系统开发<br />
      1-12(3节)<br />
      实验室<br />
      赵靖
     </td>
     <td></td>
    </tr>
   </table>
  </div>
 </body>
</html>

---

本文章采用 知识共享署名2.5中国大陆许可协议 进行许可,欢迎转载,演绎或用于商业目的。

---

二维码加载中...

扫一扫移动端访问O(∩_∩)O

发表评论

24 + 69 =
路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交
正在加载中……