效果:
分析:
上面Layer7...是一个定义了高度的div,下面是一个两行的table,主要东西都在第一行中,第二行定义了一个高度,是为了和下方结果之间有一个空隙。
1、
2、
3、
table的第一行如蓝色的线部分,两列,其左侧空白即红色的线部分,主体部分在第二个td中:
4、
5、
右侧td里面定义了一个一行一列的table,并设置背景图片
在单元格中定义一个div,设定padding-left
div中又定义了一个width是90%的table,这才是内容的主体部分
6、绿线是div部分,右侧蓝线是90%的table部分
这个主体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;
}
背景图片:
...
- 大小: 15.4 KB
- 大小: 8.1 KB
- 大小: 2.8 KB
- 大小: 15.8 KB
- 大小: 6.6 KB
- 大小: 2.8 KB
- 大小: 14.2 KB
- 大小: 17.1 KB
- 大小: 4.5 KB
分享到:
相关推荐
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE ...第八天:CSS布局入门 第九天:第一个CSS布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js
为后端程序员设计的前端框架。这是一个封装了各种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布局。这些案例不仅演示了基本概念,还展示了在实际项目中的应用,...
7. **Grid布局**:CSS网格布局(Grid)提供了一个二维的布局系统,可以轻松创建复杂的、响应式的网格。它允许开发者定义行和列的大小,并将元素放置在网格的任意单元格中。 8. **响应式设计**:随着移动设备的普及...
在IT行业中,网页设计是至关重要的一个领域,而DIV+CSS布局则是现代网页设计的核心技术之一。本资源包“DIV+CSS布局大全-.zip”包含了深入学习CSS的基础知识和实践技巧,对于想要提升网页设计技能的初学者或者专业...
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布局与定位的实例和教程,通过学习和操作这些文件,你可以更好地理解和应用这些概念。
在本示例中,我们关注的是使用CSS3的Grid布局来创建一个独特的六边形网格页面。CSS3 Grid布局是一个二维布局系统,它允许开发者轻松地定义行和列,从而构建复杂的网页布局。这个名为“css3-grid-layout.rar”的...
"HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧" 本章节主要介绍了网页布局和设计技巧,涵盖了网页布局的定义、网页大小的设计、网页栏目划分、表格布局和CSS布局等方面的知识点。 网页布局的定义 网页布局...
在IT行业中,遮罩层(Mask Layer)是一种常见的用户界面设计元素,用于在屏幕上覆盖一层半透明或全黑的背景,以突出显示特定区域或信息,同时阻止用户与背景交互。这种技术常用于应用程序的引导流程、功能指导、加载...
7. **性能优化**:高效的CSS编写能够提升页面加载速度,包括减少选择器复杂度、合理使用内联样式、避免使用!important等,这些都是优化CSS性能的关键点。 通过阅读"CSS设计彻底研究--源代码"这本书,你可以获得实践...
在网页设计领域,`DIV` 和 `CSS` 是构建现代网页布局不可或缺的元素。`DIV`(Division,分块)是HTML中的一个通用容器标签,它允许我们将网页内容分割成独立的、可样式化的区域。而`CSS`(Cascading Style Sheets,...
layui弹出层需要引入的文件,大家也可以从官网上下载,我这边给大家上传了,原地址:http://res.layui.com/static/download/layer/layer-v3.1.1.zip
关于CSS40个布局实列CSS布局大全:40多个教程,提示,例子和最佳实践 CSS布局教程 1-Three column fixed layout structure using CSS- 这篇文章解释了如何显示HTML/CSS基本结构。 2-Design page layout using CSS- 如何...