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']]));

?

?

?

二、內容在總結中

?

總結

以上是生活随笔為你收集整理的m_Orchestrate learning system---二十二、html代码如何变的容易的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。