课堂练习

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了课堂练习相关的知识,希望对你有一定的参考价值。

   网站系统开发需要掌握的技术:

一般的流程是这样

申请空间,绑定域名(当然也可以用自己的电脑做主机,用ip访问)
将代码上传到空间中
测试、运营

涉及到的技术如下:
服务端:比如go语言等就用于服务器开发。php或者asp目前是主流空间都支持的技术,一般空间都是采用其中的一种,配合数据库(如sql)等进行开发。
前端:html、js、css等,这是编辑网页需要用到的技术,这些会管理所有的交互及界面

具体来说:
购买空间后,将代码ftp上传到空间中,直接打开空间绑定的ip地址或域名即可访问
本机电脑架设网站,需要自行配制IIS等运行环境,根据需求进行维护开发

 

 

 

本次课堂测试的源代码:

  1. <!DOCTYPE HTML
  2. <html
  3. <head
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
  5. <meta http-equiv="description" content="运用CSS3和CSS滤镜做的精美的登录界面,无用到图片的喔!"
  6. <meta http-equiv="author" content="chenjinfei"
  7. <meta http-equiv="date" content="2012-2-6"
  8. <title>登录</title
  9. <link rel="stylesheet" href="style/common/common.css"
  10. <style type="text/css"
  11. body { 
  12.     margin:0; 
  13.     padding:0; 
  14.     background-color:#E4E8EC; 
  15. .wrap { 
  16.     margin:150px auto; 
  17.     width:380px; 
  18.     overflow:hidden; 
  19. .loginForm { 
  20.     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2); 
  21.     position:absolute; 
  22.     z-index:0; 
  23.     background-color:#FFF; 
  24.     border-radius:4px; 
  25.     height:250px; 
  26.     width:380px; 
  27.     background: -webkit-gradient(linear, left top, left 24, from(#EEE), color-stop(4%, #FFF), to(#EEE)); 
  28.     background: -moz-linear-gradient(top, #EEE, #FFF 1px, #EEE 24px); 
  29.     background: -o-linear-gradient(top, #EEEEEE, #FFFFFF 1px, #EEEEEE 24px); 
  30. .loginForm:before { 
  31.     content:‘‘; 
  32.     position:absolute; 
  33.     z-index:-1; 
  34.     border:1px dashed #CCC; 
  35.     top:5px; 
  36.     bottom:5px; 
  37.     left:5px; 
  38.     right:5px; 
  39.     box-shadow: 0 0 0 1px #FFF; 
  40. .loginForm h1 { 
  41.     text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5); 
  42.     text-transform:uppercase; 
  43.     text-align:center; 
  44.     color:#666; 
  45.     line-height:3em; 
  46.     margin:16px 0 20px 0; 
  47.     letter-spacing: 4px; 
  48.     font:normal 26px/1 Microsoft YaHei, sans-serif; 
  49. fieldset { 
  50.     border:none; 
  51.     padding:10px 10px 0; 
  52. fieldset input[type=text] { 
  53.     background:url(style/default/images/user.png) 4px 5px no-repeat; 
  54. fieldset input[type=password] { 
  55.     background:url(style/default/images/password.png) 4px 5px no-repeat; 
  56. fieldset input[type=text], fieldset input[type=password] { 
  57.     width:100%; 
  58.     line-height:2em; 
  59.     font-size:12px; 
  60.     height:24px; 
  61.     border:none; 
  62.     padding:3px 4px 3px 2.2em; 
  63.     width:300px; 
  64. fieldset input[type=submit] { 
  65.     text-align:center; 
  66.     padding:2px 20px; 
  67.     line-height:2em; 
  68.     border:1px solid #FF1500; 
  69.     border-radius:3px; 
  70.     background: -webkit-gradient(linear, left top, left 24, from(#FF6900), color-stop(0%, #FF9800), to(#FF6900)); 
  71.     background: -moz-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px); 
  72.     background:-o-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px); 
  73. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FF9800‘, endColorstr=‘#FF6900‘); 
  74.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FF9800‘, endColorstr=‘#FF6900‘)"; 
  75.     height:30px; 
  76.     cursor:pointer; 
  77.     letter-spacing: 4px; 
  78.     margin-left:10px; 
  79.     color:#FFF; 
  80.     font-weight:bold; 
  81. fieldset input[type=submit]:hover { 
  82.     background: -webkit-gradient(linear, left top, left 24, from(#FF9800), color-stop(0%, #FF6900), to(#FF9800)); 
  83.     background: -moz-linear-gradient(top, #FF9800, #FF6900 0, #FF9800 24px); 
  84.     background:-o-linear-gradient(top, #FF6900, #FF6900 0, #FF9800 24px); 
  85. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FF6900‘, endColorstr=‘#FF9800‘); 
  86.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FF6900‘, endColorstr=‘#FF9800‘)"; 
  87. .inputWrap { 
  88.     background: -webkit-gradient(linear, left top, left 24, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
  89.     background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px); 
  90.     background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px); 
  91.     border-radius:3px; 
  92.     border:1px solid #CCC; 
  93.     margin:10px 10px 0; 
  94. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#EEEEEE‘, endColorstr=‘#FFFFFF‘); 
  95.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#EEEEEE‘, endColorstr=‘#FFFFFF‘)"; 
  96. fieldset input[type=checkbox] { 
  97.     margin-left:10px; 
  98.     vertical-align:middle; 
  99. fieldset a { 
  100.     color:blue; 
  101.     font-size:12px; 
  102.     margin:6px 0 0 10px; 
  103.     text-decoration:none; 
  104. fieldset a:hover { 
  105.     text-decoration:underline; 
  106. fieldset span { 
  107.     font-size:12px; 
  108. </style
  109. <!--为了让IE支持HTML5元素,做如下操作:--> 
  110. <!--[if IE]
  111. <script type="text/javascript"
  112. document.createElement("section"); 
  113. document.createElement("header"); 
  114. document.createElement("footer"); 
  115. </script
  116. <![endif]--
  117. </head
  118.  
  119. <body
  120. <div class="wrap"
  121.   <form action="#" method="post"
  122.     <section class="loginForm"
  123.       <header
  124.         <h1>登录</h1
  125.       </header
  126.       <div class="loginForm_content"
  127.         <fieldset
  128.           <div class="inputWrap"
  129.             <input type="text" name="userName" placeholder="邮箱/会员帐号/手机号" autofocus required
  130.           </div
  131.           <div class="inputWrap"
  132.             <input type="password" name="password" placeholder="请输入密码" required
  133.           </div
  134.         </fieldset
  135.         <fieldset
  136.           <input type="checkbox" checked="checked"
  137.           <span>下次自动登录</span
  138.         </fieldset
  139.         <fieldset
  140.           <input type="submit" value="登录"
  141.           <href="#">忘记密码?</a<href="#">注册</a
  142.         </fieldset
  143.       </div
  144.     </section
  145.   </form
  146. </div
  147. </body
  148. </html>
  149. 结果截图:技术分享
  150. 假期没有好好学习。
  151. 能够独立的完成网页的构架。每周拿出5小时来学习。

 

以上是关于课堂练习的主要内容,如果未能解决你的问题,请参考以下文章

课堂练习-找水王

课堂练习

课堂练习

课堂练习-找水王

课堂练习-找水王

01课堂练习