day--16页面布局
后台页面布局
一、fixed布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--对body标签执行CSS样式操作 --> <style> body{ margin:0; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .left{ float:left; } .right{ float:right; } .pg-content .menu{ position:fixed; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; } .pg-content .content{ position:fixed; top:48px; right:0; bottom:0; left:200px; background-color:pink; overflow:auto; } </style> <!-- 上面overflow是滚动条，当内容超过页面的高度之后，定义overflow会出现滚动条，让能够拉动看到下面的内容 --> <!-- 最小宽度，当比例小于最小宽度失效，执行最小宽度 --> <!-- 另外一个移动的边框会受到影响，会出现什么情况 --> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p> </div> </div> <div class="pg-footer"></div> </body> </html>
提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id='f1' action="http://www.oldboyedu.com"> <input type="text"/> <input type="submit" value="提交" /> <a onclick="submitForm();">提交吧</a> </form> <script> function submitForm(){ document.getElementById('f1').submit() } </script> </body> </html>
行为 样式 结构 相分离的页面
js CSS HTML
行为即让页面动起来，JavaScript来实现的，样式是CSS，结构是HTML代码，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #test { background-color: red; width: 300px; height: 400px; } </style> </head> <body> <div id="test"> dasdfasdf </div> <script> var mydiv = document.getElementById('test') mydiv.onclick = function(){ console.log("adasfda") } </script> </body> </html>
写代码要规范，要把样式，行为分开，不能混淆，虽然功能是一样的，但是看起来很Low,上面代码实现了行为结构相分离的原则，行为在<script>标签中，样式在<style>中，结构是单独的<HTML>代码。
样式 行为 结构相分离的鼠标放上去变色情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300px"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <script> var myTrs = document.getElementsByTagName('tr'); var len = myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover = function(){ this.style.backgroundColor = 'red'; } myTrs[i].onmouseout = function(){ this.style.backgroundColor = ""; } } </script> </body> </html>
上面this是当执行那个函数的时候，就生效。通过JS来修改样式。
