简单的HTML网页框架
来源:互联网 发布:微杂志免费制作软件 编辑:程序博客网 时间:2024/05/17 02:22
先上个效果大家看一下.
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { font-family: "微软雅黑"; font-size: 18px; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .head { position: fixed; top: 0; left: 0; right: 0; height: 80px; background: #2B2B2B; color: white; padding: 5px; } .left { position: fixed; top: 80px; width: 200px; background: #7F7F7F; margin: 0px; left: 0px; bottom: 20px; padding: 5px; } .main { position: absolute; top: 80px; left: 200px; bottom: 20px; right: 0px; height: 1000px; background: #EBEBEB; padding: 5px; margin: 0px; z-index: -1; } .foot { position: fixed; bottom: 0; left: 0; right: 0; height: 30px; background: #2B2B2B; text-align: center; color: white; padding: 3px; font-size: 13px; } ul li { list-style-type:none; margin: 5px; } ul li a { text-decoration: none; color: #000000; } table { border-top: 1px solid; border-left: 1px solid; border-color: #828282; border-collapse: collapse; border-spacing: 0px; width: 100%; } table tr td,table tr th { padding: 5px; border-bottom: 1px solid; border-right: 1px solid; border-color: #828282; margin: 0px; } tr:nth-child(odd){background-color:#FFE4C4;} tr:nth-child(even){background-color:#F0F0F0;} table tr th { background: #828282; } </style> </head> <body> <div class="head">标准界面</div> <div class="left"> <ul> <li> <a href="#">我的菜单</a> </li> <li> <a href="#">CSS精讲</a> </li> </ul> </div> <div class="main"> <h1>如有疑问联系 3684170@qq.com</h1> <h2>热衷hbuilder mui开发app</h2> <table > <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>名次</th> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> <tr> <td>王加急</td> <td>语文</td> <td>99</td> <td>3</td> </tr> </table> </div> <div class="foot">版权所有 3684170@qq.com 2016</div> </body></html>
阅读全文
0 0
- 简单的HTML网页框架
- 简单的网页布局实战(表格与HTML框架)
- 简单的html思维框架
- HTML之网页框架
- html网页框架
- 简单的网页html代码使用说明
- 一个简单的网页布局HTML+CSS
- html网页与iOS的简单交互
- 网页、HTML标签的简单介绍
- tomcat部署简单的html静态网页
- 使用html编写简单的网页计算器
- HTML写出简单的QQ注册网页
- html表格实战<<简单的网页布局>>
- tomcat部署简单的html静态网页
- 简单的html静态网页使用libevent
- 简单的框架网页高度自适应
- HTML5 -- 网页框架bootstrap的简单使用
- HTML5 -- 网页框架bootstrap的简单使用
- 内存管理-对象树
- php数组函数总结
- 计算字符串最后一个单词的长度
- 一种快速划分千分位的方法
- 四年工作总结
- 简单的HTML网页框架
- CodeForces301D 【BIT】
- 文章标题 汇编 : 判断素数
- OA审批1.0版本工作总结
- [Codeforces 727C] Guess The Array 交互题
- 57 linux内核的i2c设备驱动模型
- 栈、堆和静态区
- php 设计模式 (原型模)
- 杭电2782