效果:
![](http://dl.iteye.com/upload/attachment/479252/c5a3fa1c-92e1-3349-aef4-ac726aff8106.png)
分析:
上面Layer7...是一个定义了高度的div,下面是一个两行的table,主要东西都在第一行中,第二行定义了一个高度,是为了和下方结果之间有一个空隙。
1、
![](http://dl.iteye.com/upload/attachment/479275/91e92fdf-70c6-3756-b327-83ffe0eb1ad4.png)
2、
![](http://dl.iteye.com/upload/attachment/479257/fee4f18a-3e00-3b06-93de-ed13471f2d47.png)
3、
![](http://dl.iteye.com/upload/attachment/479254/c607505a-9cac-335c-a2c3-555c8f33e693.png)
table的第一行如蓝色的线部分,两列,其左侧空白即红色的线部分,主体部分在第二个td中:
4、
![](http://dl.iteye.com/upload/attachment/479269/bcab1d80-6a40-3861-924c-586c8456672a.png)
5、
![](http://dl.iteye.com/upload/attachment/479271/71547b5b-fa27-3c00-a1e3-83b41d3ca59b.png)
右侧td里面定义了一个一行一列的table,并设置背景图片
在单元格中定义一个div,设定padding-left
div中又定义了一个width是90%的table,这才是内容的主体部分
6、绿线是div部分,右侧蓝线是90%的table部分
![](http://dl.iteye.com/upload/attachment/479285/3ec98df0-6ce9-3e91-bfc5-4757e15f110a.png)
![](http://dl.iteye.com/upload/attachment/479282/732d440a-61c5-356a-bc5c-54e031821dba.png)
这个主体table部分代码:
<div id="searchInfo" style="padding-left: 20px;">
<table style="width:90%;" border="0">
<tr height="30px">
<td colspan="5">
<span style="color: #808080;font-weight: bold;">
Select a mark-up Area
</span>
</td>
</tr>
最后的按钮class:
<input type="button" class="button_search" onclick="doQuery();" value="Search"/>
.button_search {
width: 150px;height:23px;border: 1px solid #8DB3E2;background:#5D5DFF;text-align:center;text-decoration:none;font-size:13px;color: #FFF;font-weight: bold;
}
背景图片:
![](http://dl.iteye.com/upload/attachment/479291/2e817df6-7bf3-347c-8a14-b1e413017f54.gif)
...
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9252/c5a3fa1c-92e1-3349-aef4-ac726aff8106-thumb.png)
- 大小: 15.4 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9254/c607505a-9cac-335c-a2c3-555c8f33e693-thumb.png)
- 大小: 8.1 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9257/fee4f18a-3e00-3b06-93de-ed13471f2d47-thumb.png)
- 大小: 2.8 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9269/bcab1d80-6a40-3861-924c-586c8456672a-thumb.png)
- 大小: 15.8 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9271/71547b5b-fa27-3c00-a1e3-83b41d3ca59b-thumb.png)
- 大小: 6.6 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9275/91e92fdf-70c6-3756-b327-83ffe0eb1ad4-thumb.png)
- 大小: 2.8 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9282/732d440a-61c5-356a-bc5c-54e031821dba-thumb.png)
- 大小: 14.2 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9285/3ec98df0-6ce9-3e91-bfc5-4757e15f110a-thumb.png)
- 大小: 17.1 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0047/9291/2e817df6-7bf3-347c-8a14-b1e413017f54-thumb.gif)
- 大小: 4.5 KB
分享到:
相关推荐
《变幻之美DivCSS网页布局揭秘-案例实战篇源码》是一部深入探讨Div+CSS网页布局技术的实践性教程。在Web开发领域,Div+CSS布局是构建高效、可维护、响应式网站的基础,它能够帮助开发者实现灵活多变的页面设计,提升...
《CSS网站布局实录》第二版是一本深入探讨CSS在网页布局中的应用的专业书籍。它主要涵盖了以下几个核心知识点: 1. **CSS基础**:书中首先介绍了CSS的基础概念,包括选择器、属性和值,这些都是理解和编写CSS样式的...
layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js
在这个"openlayers扩展:风场可视化(wind-layer)"项目中,我们主要关注的是如何利用OpenLayers实现风场的动态可视化。这个扩展提供了计算风速、风向和风级的功能,并且能够动态更新风场数据,用户还可以自由地显示...
为后端程序员设计的前端框架。这是一个封装了各种css和js、Ajax等等的前端框架,其封装程度之高,有时...包含layui和layer的js和css文件,文件非常完整齐全,不缺任何一个文件,解压即用!个人使用没有遇到任何问题。
03-00-CSS布局入门 04-01-多级下拉导航 04-01-横向导航传统表格HTML代码 04-01-横向导航系统_CSS布局 04-01-纵向导航系统 04-02-背景高级控制 04-03-表单 04-04-列表元素 04-05-字体样式 04-06-图片样式设计 04-07-...
3. **响应式布局**:Layer支持响应式设计,能够自动适应不同屏幕尺寸的设备,确保在移动端也有良好的显示效果。 4. **模块化**:Layer采用模块化设计,方便开发者按需引入,减小了整体项目的体积。 5. **兼容性**...
《变幻之美-DivCSS网页布局揭秘(案例实战篇)》案例源码下载提供了丰富的实例,涵盖了常见的布局模式,如盒模型、浮动布局、定位、Flexbox以及Grid布局。这些案例不仅演示了基本概念,还展示了在实际项目中的应用,...
CSS 网格布局(Grid Layout)是一种强大的二维布局系统,允许开发者轻松地创建复杂的、响应式的网页布局。相比于Flex布局,Grid布局更加适合处理二维布局的问题,因为它将容器划分为行和列,生成单元格,进而定位...
可视化 一个可视化布局 纯css布局 Layout-UI. 一个可视化布局 纯css布局 Layout-UI.
CSS Pro布局 CSS库,用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
[变幻之美-DivCSS网页布局揭秘-案例实战篇].(金峰).扫描版
在网页设计中,CSS(Cascading Style Sheets)...在“css-layout-and-positioning-master”这个压缩包中,可能包含了一系列关于CSS布局与定位的实例和教程,通过学习和操作这些文件,你可以更好地理解和应用这些概念。
《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》通过作者原创的4个案例,细致地介绍了基于Web标准的Div CSS网页布局的实现方法。每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析,以及最终CSS页面...
标题"DIV+CSS 1-1-(1+2+1)-1布局"指的是一个特定的布局模式,这种模式通常用于创建复杂的网页布局,而描述中的内容似乎是对该布局模式的一种简化表示。接下来,我们将深入探讨`DIV+CSS`布局以及这个特殊的“1-1-(1+2...
在IT行业中,CSS(Cascading Style Sheets)是网页设计不可或缺的一部分,用于定义网页的布局、样式和视觉表现。这个主题“CSS那些事儿”涵盖了CSS的方方面面,包括基础语法、选择器、盒模型、布局技术、响应式设计...
在本示例中,我们关注的是使用CSS3的Grid布局来创建一个独特的六边形网格页面。CSS3 Grid布局是一个二维布局系统,它允许开发者轻松地定义行和列,从而构建复杂的网页布局。这个名为“css3-grid-layout.rar”的...
"HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧" 本章节主要介绍了网页布局和设计技巧,涵盖了网页布局的定义、网页大小的设计、网页栏目划分、表格布局和CSS布局等方面的知识点。 网页布局的定义 网页布局...
**Div+CSS布局详解** Div(Division)+CSS(Cascading Style Sheets)布局是网页设计中的核心概念,它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf",是一份全面的学习Div+CSS布局...