<style type="text/css">

*{ margin:0px; padding:0px;}

#body{ width:1000px; height:2000px; margin:auto; position:relative;}

#top_1{ width:1000px; height:115px; border:1px solid #999; position:relative; box-shadow:1px 1px 1px #999999}

#top_2{ width:1000px; height:70px; border:1px solid #CCC; margin-top:10px; position:relative; box-shadow:2px 2px 2px #999999}

#top_3{ width:240px; height:240px; border:1px solid #ccc; margin-top:10px; position:relative; float:left; box-shadow:2px 2px 2px #999999}

#top_4{ width:750px; height:270px; border:1px solid #ccc; position: relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}

#top_5{ width:240px; height:120px; border:1px solid #ccc; position:relative; margin-top:10px; float:left; box-shadow:2px 2px 2px #999999}

#top_6{ width:750px; height:40px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}

#top_7{ width:750px; height:215px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}

#top_8{ width:240px; height:1000px; border:1px solid #ccc; position:relative; float:left; margin-top:10px; box-shadow:2px 2px 2px #999999}

#top_9{ width:750px; height:780px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}

#top_10{ width:750px; height:30px; border:1px solid #ccc; position:relative; float:right; left:2px; margin-top:10px; box-shadow:2px 2px 2px #999999}

#top_11{ width:1000px; height:200px; border:1px solid #ccc; position:relative; float:left; margin-top:10px; box-shadow:2px 2px 2px #999999}

#nei_1{ width:333px; height:200px; border-right:1px solid #ccc; float:left; box-shadow:2px 2px 2px #999999}

#nei_2{ width:332px; height:200px; border-right:1px solid #ccc; float:left; box-shadow:2px 2px 2px #999999}

#nei_3{ width:333px; height:200px; float:left; box-shadow:2px 2px 2px #999999}

.daohang{ width:100px; height:40px; float:left; background-color:#F00; position:relative; overflow:hidden; margin-left:10px; margin-top:10px;}

.daohang:hover{ overflow:visible; cursor:pointer}

.xiala{ width:100px; height:40px; background-color:#00F; position:relative; margin-top:40px; overflow:hidden;}

.xiala2{ width:100px; height:40px; background-color:#FF0; position:relative; margin-left:100px;}

.xiala:hover{ overflow:visible; cursor:pointer}

.xiala3{ width:100px; height:40px; background-color:#0F0; position:relative; overflow:hidden;}

.xiala2:hover{ overflow:visible}

.xiala4{ width:100px; height:40px; background-color:#999; position:relative; overflow:hidden; margin-left:100px;}

.xiala3:hover{ overflow:visible}

.xiala5{ width:100px; height:40px; background-color:#000; position:relative; overflow:hidden;}

.xiala5:hover{ overflow:visible}

.xiala6{ width:100px; height:40px; background-color:#300; position:relative; overflow:hidden; margin-left:100px;}

</style>

</head>

<body>

<div id="body">

<div id="top_1"></div>

<div id="top_2"></div>

<div id="top_3"></div>

<div id="top_4"></div>

<div id="top_5"></div>

<div id="top_6"></div>

<div id="top_7"></div>

<div id="top_8"></div>

<div id="top_9"></div>

<div id="top_10"></div>

<div id="top_11">

    <div id="nei_1"></div>

    <div id="nei_2"></div>

    <div id="nei_3"></div>

</div>

    <div class="daohang">

        <div class="xiala">

            <div class="xiala2"></div>

        </div>

        <div class="xiala3">

            <div class="xiala4"></div>

        </div>

        <div class="xiala5">

            <div class="xiala6"></div>

        </div>

    </div>

    <div class="daohang">

        <div class="xiala">

            <div class="xiala2"></div>

        </div>

        <div class="xiala3">

            <div class="xiala4"></div>

        </div>

        <div class="xiala5">

            <div class="xiala6"></div>

        </div>

    </div>

    <div class="daohang">

        <div class="xiala">

            <div class="xiala2"></div>

        </div>

        <div class="xiala3">

            <div class="xiala4"></div>

        </div>

        <div class="xiala5">

            <div class="xiala6"></div>

        </div>

    </div>

</div>

</body>

</html>

1119 网页布局，css写下拉列表的更多相关文章

  1. 网页布局 CSS实现DIV并列等高

    同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...

  2. Web设计之网页布局CSS技巧

    1.两列布局 1.1.左列固定,右列自适应 #left{    width:190px; float:left; } #right{    margin-left:205px; } 1.2.右列固定, ...

  3. H5网页布局+css代码美化

    HTML5的结构化标签,对搜索引擎更友好 li 标签对不利于搜索引擎的收录,尽量少用 banner图片一般拥有版权,不需要搜索引擎收录,因此可以使用ul + li <samp></s ...

  4. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  6. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  7. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  8. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  9. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

随机推荐

  1. (转)MVC，MVP 和 MVVM 的图示

    作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身 ...

  2. （转） Lua使用心得一 LUA和VC整合

    这几天研究了一下lua,主要关注的是lua和vc之间的整合,把代码都写好放在VC宿主程序里,然后在lua里调用宿主程序的这些代码(或者叫接口.组件,随便你怎么叫),希望能用脚本来控制主程序的行为.这实 ...

  3. Android之ADB指令

    Android打包过程 aapt Android应用打包工具 adb Android调试桥 下面打包过程,eclipse帮我们自动打包好run as->Android application r ...

  4. where子句的使用

    关系运算符: = > < <= >= != <> 略. 有一个<=> 有啥用? 其实也是判断等于. 不比较NULL值,效果就和= 一样,比较NULL值, ...

  5. 贪心+构造（ Codeforces Round #344 (Div. 2)）

    题目:Report 题意:有两种操作: 1)t = 1,前r个数字按升序排列:   2)t = 2,前r个数字按降序排列: 求执行m次操作后的排列顺序. #include <iostream&g ...

  6. 无向图最小生成树（prim算法）

    普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点,且其所有边的权值之和亦为最小.该算法于1930年由捷 ...

  7. Quartz任务调度快速入门(转）

    转自http://www.blogjava.net/baoyaer/articles/155645.html 概述 了解Quartz体系结构 Quartz对任务调度的领域问题进行了高度的抽象,提出了调 ...

  8. 今天开始着手原来Office系统的重构

    原来系统架构Spring+Hibernate+Struts+springsecurity 拟改成 Spring+SpringMVC+MyBatis/JDBC+Shiro 同时优化前端的CSS和JQue ...

  9. UVA 11992 Fast Matrix Operations（线段树：区间修改）

    题目链接 2015-10-30 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=s ...

  10. WCF配置与服务寄宿

    1.项目框架如下: 2.WCF服务项目 其中WCFService中存放服务契约及其实现,需添加命名空间:System.ServiceModel 3.服务寄宿 WCFHost是一个控制台程序,用于寄宿W ...