前端JS学习_Day16
页面布局方式
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>页面布局title> 6 <style> 7 body{ 8 margin:0; 9 } 10 .left{ 11 float: left; 12 } 13 .right{ 14 float: right; 15 } 16 .pg-header{ 17 height: 48px; 18 background-color: #2459a2; 19 } 20 .pg-body .pg-menu{ 21 width: 10%; 22 background-color: bisque; 23 position: absolute; 24 top:48px; 25 left: 0; 26 bottom: 0; 27 } 28 .pg-body .pg-content{ 29 width: 90%; 30 position: absolute; 31 top:48px; 32 right: 0; 33 bottom: 0; 34 overflow: auto; 35 background-color: blue; 36 z-index: 9; 37 } 38 .pg-header .logo{ 39 color: black; 40 text-align: center; 41 width: 10%; 42 line-height: 48px; 43 background-color: wheat; 44 } 45 .pg-header .userinfo img{ 46 border-radius: 50%; 47 } 48 .pg-header .userinfo{ 49 border: 1px solid red; 50 margin-top: 4px; 51 width: 140px; 52 } 53 .pg-header .userinfo .infolist{ 54 display: none; 55 } 56 .pg-header .userinfo:hover .infolist{ 57 display: block; 58 color: red; 59 } 60 .pg-header .userinfo .infolist{ 61 /*background-color: green;*/ 62 /*position: absolute;*/ 63 /*top:43px;*/ 64 /*right: 36px;*/ 65 } 66 .pg-header .userinfo .infolist a{ 67 display: block; 68 color: white; 69 width: 140px; 70 } 71 style> 72 head> 73 <body> 74 <div class="pg-header"> 75 <div class="logo left"> 76 <span>欢迎光临span> 77 div> 78 <div class="userinfo right" style="position: relative"> 79 <a href=""><img src="1.jpg" alt="" width="40" height="40">a> 80 <div class="infolist" style="position: absolute;top:42px;right: 20px;z-index: 10;"> 81 <a>我的信息a> 82 <a>登录a> 83 div> 84 div> 85 div> 86 <div class="pg-body"> 87 <div class="pg-menu"> 88 这是菜单侧边栏 89 div> 90 <div class="pg-content"> 91 这是内容 92 <p>这是内容p> 93 <p>这是内容p> 94 <p>这是内容p> 95 div> 96 div> 97 body> 98 html>页面布局
JavaScript介绍
1.被设计用来向html页面添加交互行为
2.是一种脚本语言
3.由数行可执行的计算机代码组成
4.通常直接嵌入html页面
5.是一种解释性语言
JS能做什么
表单数据验证
动态HTML
用户交互
少量数据查找
AJAX核心技术
语法规范