m_Orchestrate learning system---二十二、html代码如何变的容易

m_Orchestrate learning system---二十二、html代码如何变的容易

一、总结

一句话总结：（结构清晰之后构建页面就变得超级容易了）（多做多用一下子就熟了）

 

1、文章显示页的结构，结构清楚了思路就很清楚了？

结构清晰之后构建页面就变得超级容易了

pet_main包含整个文章

 

2、如何实现单选框选择不同的选项登录的账号密码自动改变？

（用的jquery的radio的change事件）

用的jquery的radio的change事件：当元素的值发生改变时，会发生 change 事件，radio选择不同选项的时候恰巧是值发生改变。

 

 1 <form class="am-form tpl-form-line-form" action="" method="post">  2  3 <div class="am-form-group">  4 <label class="am-radio-inline tpl-login-remember-me">  5 <input class="tpl-form-input" type="radio" name="status" id="student" value="0" checked="checked">Student  6 </label>  7 <label class="am-radio-inline tpl-login-remember-me">  8 <input class="tpl-form-input" type="radio" name="status" id=teacher value="1" >Teacher  9 </label> 10 </div> 11 12 <div class="am-form-group"> 13 <input type="text" class="tpl-form-input" id="username" name="username" required="" value="" placeholder="username"> 14 15 </div> 16 17 <div class="am-form-group"> 18 <input type="password" class="tpl-form-input" id="password" name="password" required="" value="" placeholder="password"> 19 20 </div> 21 22 <!-- 验证码 --> 23 <!-- <div class="am-form-group"> 24  <input type="text" class="tpl-form-input" id="user-name" name="code" placeholder="CAPTCHA"> 25  </div> 26  <div class="am-form-group"> 27  <img width="100%" style="cursor: pointer" src="{:captcha_src()}" alt="captcha" οnclick="this.src='{:captcha_src()}?'+Math.random();" /> 28  </div> --> 29 <!--End 验证码 --> 30 31 32 <div class="am-form-group tpl-login-remember-me"> 33 <input id="remember-me" type="checkbox"> 34 <label for="remember-me"> 35 36  记住密码 37 </label> 38 <label style="margin-left: 15px"> 39 <a href="{:url('login/register')}"> 注册</a> 40 </label> 41 42 </div> 43 44 <div class="am-form-group"> 45 46 <button type="submit" class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">提交</button> 47 48 </div> 49 </form>

js

 1 <script>
 2     $(document).ready(function() {
 3 $('input[type=radio][name=status]').change(function() {  4 if (this.value == '0') {  5 $("#username").val("student");  6 $("#password").val("student");  7  }  8 else if (this.value == '1') {  9 $("#username").val("teacher"); 10 $("#password").val("teacher"); 11  } 12  }); 13  }); 14 </script>

 

 

3、css样式如何来写结构才能清晰？

css样式（结构非常清晰：够用就用，不够用就加）

 

css样式是按照板块来写的，结构非常清晰

够用就用，不够用就加

 

 

4、一些东西左靠后者右靠用的是float还是position？

当然是float

float相关设置（一般的都是父亲是相对定位，儿子是绝对定位）

 

 1 <!-- 添加评论板块 -->
 2 <div class="add_comment pet_comment_list">  3 <div class="pet_comment_list_wap">  4 <div class="pet_comment_list_title">添加评论</div>  5 <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab">  6 <ul class="am-tabs-nav am-cf pet_comment_list_title_tab">  7 <li class="am-active"><a href="#">人气</a></li>  8 <li class=""><a href="#">最新</a></li>  9 <li class=""><a href="#">最早</a></li> 10 </ul> 11 </div> 12  111111 13 14 </div> 15 </div> 16 <!--End 添加评论板块 -->

父亲是相对定位，父亲相对他原来在文本流中的位置进行定位

儿子是绝对定位，相对于父亲的位置进行绝对定位

一般的都是父亲是相对定位，儿子是绝对定位

 1 /* 评论 */
 2 .pet_comment_list { width: 100%; padding-top: 20px;}  3 .pet_comment_list_wap { background: #fff;padding: 18px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.05);}  4 .pet_comment_list_title { position: relative; font-weight: bold; color: #222; font-size: 16px; width: 100%; border-bottom: 1px solid #f1f1f1; padding-bottom: 15px; margin-bottom: 5px;}  5 .pet_comment_list_wap .am-tabs-default .am-tabs-nav { padding: 0 10px; background: none; border-radius: 20px; width: 140px; height: 30px; border: 1px solid #f1f1f1;}  6 .pet_comment_list_wap .am-tabs-default .am-tabs-nav li { padding-top: 6px;}  7 .pet_comment_list_wap .am-tabs-default .am-tabs-nav>.am-active a { padding: 0 5px; background: none; color: #979797;height: 16px; line-height: 16px; font-size: 12px;}  8 .pet_comment_list_wap .am-tabs-default .am-tabs-nav a {padding: 0 5px; border-right: 1px solid #f1f1f1; background: none;color: #cacaca;height: 16px; line-height: 16px;font-size: 12px;}  9 .pet_comment_list_title_tab { position: absolute; display: inline-block; float: right; right: 18px; top: 16px;} 10 .pet_comment_list_wap .am-tabs-default .am-tabs-nav li:last-child a{ border: none; } 11 .pet_comment_list_tab { margin: 0;} 12 .pet_comment_list_tab .am-tabs-bd {border: none;} 13 .pet_comment_list_tab .am-tab-panel { padding: 0; } 14 .pet_comment_list_block { width: 100%; padding: 15px 0; border-bottom: 1px solid #f1f1f1; overflow: hidden;} 15 .pet_comment_list_block_l { width: 50px; height: 50px; float: left; position: relative; border-radius: 50%; overflow: hidden;} 16 .pet_comment_list_block_l img { width: 100%;} 17 .pet_comment_list_block_r {position: relative; margin-left: 65px;} 18 .pet_comment_list_block_r_info { color: #222; font-size: 18px;} 19 .pet_comment_list_block_r_text { color: #222; font-size: 14px;} 20 .pet_comment_list_block_r_text span { color:#ff5656; padding-right: 5px;} 21 .pet_comment_list_block_r_bottom { font-size: 14px; color: #757575; padding-top: 5px;} 22 .pet_comment_list_bottom_info_l { position: relative; float: left;} 23 .pet_comment_list_bottom_info_r { position: relative; text-align: right;} 24 .pet_comment_list_bottom_info_r span { display: inline-block; padding-right: 8px; padding-left: 3px; } 25 .pet_pl_list .pet_comment_list_block:last-child{ border: none;}

 

 

5、thinkphp生成的url如何带参数？

善于搜索

$this->success('添加评论成功！',url('engage/article','id=6'));

$this->success('添加评论成功！',url('engage/article',['id'=>$comment['carticleid']]));

 

 

 

二、内容在总结中