效果:
分析:
上面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布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
css3弹性布局-webkit-box的用法演示 css3弹性布局-webkit-box的用法演示
变幻之美DivCSS网页布局揭秘-案例实战篇源码
偶然下载的一本书,不过还没看。CSS那些事儿:掌握网页样式与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-...
第二版书籍,一些布局,盒模型,圆角实现,一些兼容性
css-网格布局-详情
为后端程序员设计的前端框架。这是一个封装了各种css和js、Ajax等等的前端框架,其封装程度之高,有时...包含layui和layer的js和css文件,文件非常完整齐全,不缺任何一个文件,解压即用!个人使用没有遇到任何问题。
DIV+CSS网页布局基础-常用HTML标签介绍。
《CSS网站布局实录-基于Web标准的网站设计指南(第2版)-》┊李超[.PDF]
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
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课 CSS排版 - CSS/DIV布局专题讲解 - 第8课 网页变幻 - CSS/DIV布局专题讲解 - 第9课 CSS与其他技术 CSS与Javascript的综合应用 - CSS与其他技术 - 第1课 ...
CSS学习手册,学习CSS有用。DIV+CSS布局大全-.zip
[变幻之美-DivCSS网页布局揭秘-案例实战篇].(金峰).扫描版
DIV+CSS 1-1-(1+2+1)-1布局
网页学习的绝佳资料。关于CSS布局的实例教程。包含全部代码。
《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》通过作者原创的4个案例,细致地介绍了基于Web标准的Div CSS网页布局的实现方法。每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析,以及最终CSS页面...
div+css布局大全 B/S项目表现层也很重要!
前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-...