页面布局实例

实例1

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    position: absolute;
    border: 1px solid blue;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
}
#left {
    position: absolute;
    border: 1px solid red;
    width: 100px;
    left: 0px;
    top: 0px;
    bottom: 0px;
}
#right {
    position: absolute;
    border: 1px solid green;
    right: 0px;
    left: 100px;
    top: 0px;
    bottom: 0px;
}
#hide1 {
    position: absolute;
    border: 1px solid orange;
    width: 10px;
    left: 0px;
    top: 0px;
    bottom: 0px;
}
#main {
    position: absolute;
    border: 1px solid cyan;
    right: 0px;
    left: 10px;
    top: 0px;
    bottom: 0px;
}
#main-bottom {
    position: absolute;
    border: 1px solid purple;
    height: 200px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#main-top {
    position: absolute;
    border: 1px solid pink;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 200px;
}
#hide2 {
    position: absolute;
    border: 1px solid orange;
    height: 10px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
    <div id="left">
    </div>
    <div id="right">
        <div id="hide1">
        </div>
        <div id="main">
            <div id="main-top">
                <div id="hide2">
                </div>
            </div>
            <div id="main-bottom">
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
var hide1 = document.getElementById(‘hide1‘);
var left = document.getElementById(‘left‘);
var right = document.getElementById(‘right‘);
hide1.onclick = function() {
    var interval = setInterval(function() {
            console.log(left.offsetWidth);
            left.style.width = left.offsetWidth - 10 + ‘px‘;
            right.style.left = left.offsetWidth + ‘px‘;
            if (left.offsetWidth < 10) clearInterval(interval);
        }, 100);
}
</script>

时间: 2024-11-05 23:37:18

页面布局实例的相关文章

—页面布局实例———win7自己的小算盘

晚上7各地点布局,9点半,刚拿到. 他发现自己专注的时候效率挺高真的哈萨克斯坦.计算器布局前.做了两件简单的页面布局练练手.今晚总体感觉更好,不难. 器之间调试有点蛋疼,真心不想搭理IE. 在进行布局之前.我先把win7自带的计算器总体进行裁剪測量了一下,然后了解到大致的尺寸.然后画了张草图(例如以下).真是丑的不忍心看.我自己都认为不像我的风格,实在是太丑了.这样子,对于全局的把握起到了一个非常好的作用,最起码心里有数应该怎么怎么搞了. watermark/2/text/aHR0cDovL2J

第13天:页面布局实例-博雅主页

今天写了个简单的页面,再熟悉了一下div+css布局,写的还可以,以后还要多练习.此外还进一步学习了定位相关知识. 1.相对定位: 相对定位有坑,所以一般不用于做"压盖"效果.页面中,效果极小.就两个作用: 1) 微调元素 2) 做绝对定位的参考,子绝父相 2.绝对定位: 绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角. 绝对定位的盒子,是脱离标准文档流的.所以,所有的标准文档流的性质,绝对定位之后都不遵守了. 绝对定位之后,标签就不区分所谓的

&lt;div+css页面布局课堂笔记&gt;11---页面布局网站首页设计实例__终极版(仿csdn首页)

1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="sty

Bootstrap页面布局21 - BS对话框设计

设计弹出层对话框: 设计一个点击登录按钮,再弹出一个登陆对话框的实例,且带有动画效果 <div class='container-fluid'> <h2 class='page-header'>对话框插件的调用</h2> <a href='#login' data-toggle='modal' class='btn btn-primary'>登录</a> <div class='modal hide fade' id='login'>

Html代码seo优化最佳布局实例讲解

搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的"木庄网络博客",但过多关键字可能被搜索引擎惩罚! 2.<html> 这个是代码开头 结尾时和</html>对应. 3.<head> 头标记结尾用</head> 4.<title>(木庄网络博客-勤记录 懂分享)</title

无废话ExtJs 入门教程十六[页面布局:Layout]

无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distribution;layout] 对事物的全面规划和安排,布:陈设:设置. 我对布局理解是“把**东西放在**位置显示”[动词]. ok,我们这节课就讲一下怎么样把 ExtJs 的组件,放到我们想放置的位置. 一.常用布局 (1)ContainerLayout:默认布局方式,其他布局继承该类进行扩展功能.显示:

bootstrap页面布局

首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页面布局 页面布局,去到bootstrap中文网,寻找适合自己的布局实例,然后右击保存页面下载代码,copy代码到自己的项目,然后删删改改,当然完全可以自己用boottrap进行页面布局也是可以的,主要看你是否要求对前端精深,时刻明确自己的目的,学会借力打力,这样做才有效率,否则事事亲力亲为,尤其是在

微信小程序页面布局

页面布局: wcml: <view class="page"> <view class="page_hd"> </view> <view class="page_bd"> <view class="section_nav"> <view class="left border_right"> 酒店 </view> <vi

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和