示例演练(html css javascript)
--制作图书馆后台界面
1. 成品图
2. 代码关键点解析
· 书写规范十分重要 在制作前先思考 如何分大板块(此处为 header context foot)
· position后的参数再次强调(具体看上章):
fixed:按照边框给定位置,并定死
relative(置于外部标签)+absolute(置于内部标签)==》直接在父标签中定位
两种方法皆可 将需要固定的标签订于窗体
· 多出部分利用overflow:auto增加滚动条(具体可看上章)
· hover增加鼠标掠过部分 hover .<style>即可对此style进行选中时修改
· border-radius:50%;在图片中将其变为圆形
· 对于文字分别设置大小、斜体、粗细程度:
font-size: 31px;
font-style: italic;
font-weight: 600;
· 时间间隔器函数:
实际将取到文字拆分 在拼接 最终按照间隔反复调用 实现滚动横幅
<script> function func(){ var tag=document.getElementById('i2'); var content=tag.innerText; var i=content.charAt(0); var f=content.substring(1,content.length); tag.innerText=f+i; } setInterval('func()',500); </script>
全部代码(下方为了实现滚动条 多打div 模拟超出大小的数据)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台</title> <style> .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color:blue; color:white; line-height:48px; } .pg-header .logo{ width:200px; background-color:green; } .pg-header .user{ color: black; height: 48px; margin-right: 50px; padding: 0 24px; } .pg-header .user:hover{ background-color:#04049e; } .pg-header .user:hover .tab{ display:block; } .pg-header .user img{ height:40px; width:40px; margin-top: 4px; margin-left: 2px; border-radius:50%; } .pg-header .user .tab{ position: absolute; top: 48px; right:0; z-index: 10; background-color:#04049e; width:90px; display:none; } .pg-header .text1{ font-size: 31px; font-style: italic; font-weight: 600; color:red; margin-left: 400px; func(); } .pg-content .menu{ position:absolute; top:48px; left:0; bottom:0; width:20%; min-width:200px; background-color:grey } .pg-content .content{ position:absolute; top:48px; left:205px; bottom:0; right:0; overflow:auto; min-width:200px; } </style> <script> function func(){ var tag=document.getElementById('i2'); var content=tag.innerText; var i=content.charAt(0); var f=content.substring(1,content.length); tag.innerText=f+i; } setInterval('func()',500); </script> </head> <body style="margin:0;"> <div class="pg-header"> <div class="logo left">图书馆预约</div> <div id="i2" class="text1 left">欢迎各位同学使用</div> <div class="user right" style="position:relative"> <a href=""> <img src="1.jpg"> </a> <div id="i1" class="tab"> <a style="display:block;color:white;" href="">我的资料</a> <a style="display:block;color:white;" href="">注销</a> </div> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <div style="background-color:red;"> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div> </div> </div> </div> <div class="pg-foot"></div> </body> </html>