`
uule
  • 浏览: 6352177 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

css布局初次尝试-Layer7

    博客分类:
  • CSS
阅读更多

效果:

分析:

 上面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
分享到:
评论

相关推荐

    DIVCSS布局大全---12天学会DIV+CSS教程

    12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE ...第八天:CSS布局入门 第九天:第一个CSS布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误

    变幻之美DivCSS网页布局揭秘-案例实战篇源码

    《变幻之美DivCSS网页布局揭秘-案例实战篇源码》是一部深入探讨Div+CSS网页布局技术的实践性教程。在Web开发领域,Div+CSS布局是构建高效、可维护、响应式网站的基础,它能够帮助开发者实现灵活多变的页面设计,提升...

    css网站布局实录-2

    《CSS网站布局实录》第二版是一本深入探讨CSS在网页布局中的应用的专业书籍。它主要涵盖了以下几个核心知识点: 1. **CSS基础**:书中首先介绍了CSS的基础概念,包括选择器、属性和值,这些都是理解和编写CSS样式的...

    layer.css web弹层组件

    layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js

    openlayers扩展:风场可视化(wind-layer)

    在这个"openlayers扩展:风场可视化(wind-layer)"项目中,我们主要关注的是如何利用OpenLayers实现风场的动态可视化。这个扩展提供了计算风速、风向和风级的功能,并且能够动态更新风场数据,用户还可以自由地显示...

    《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布局的实例教程。包含全部代码。

    《变幻之美-DivCSS网页布局揭秘(案例实战篇)》案例源码下载提供了丰富的实例,涵盖了常见的布局模式,如盒模型、浮动布局、定位、Flexbox以及Grid布局。这些案例不仅演示了基本概念,还展示了在实际项目中的应用,...

    css-网格布局-详情

    CSS 网格布局(Grid Layout)是一种强大的二维布局系统,允许开发者轻松地创建复杂的、响应式的网页布局。相比于Flex布局,Grid布局更加适合处理二维布局的问题,因为它将容器划分为行和列,生成单元格,进而定位...

    div+css布局大全

    7. **Grid布局**:CSS网格布局(Grid)提供了一个二维的布局系统,可以轻松创建复杂的、响应式的网格。它允许开发者定义行和列的大小,并将元素放置在网格的任意单元格中。 8. **响应式设计**:随着移动设备的普及...

    css-pro-layout:CSS库,用于构建响应式和可自定义的布局

    CSS Pro布局 CSS库,用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 &lt; link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout

    [变幻之美-DivCSS网页布局揭秘-案例实战篇]..扫描版

    [变幻之美-DivCSS网页布局揭秘-案例实战篇].(金峰).扫描版

    css-layout-and-positioning-css布局与定位

    在网页设计中,CSS(Cascading Style Sheets)...在“css-layout-and-positioning-master”这个压缩包中,可能包含了一系列关于CSS布局与定位的实例和教程,通过学习和操作这些文件,你可以更好地理解和应用这些概念。

    css那些事儿---css

    在IT行业中,CSS(Cascading Style Sheets)是网页设计不可或缺的一部分,用于定义网页的布局、样式和视觉表现。这个主题“CSS那些事儿”涵盖了CSS的方方面面,包括基础语法、选择器、盒模型、布局技术、响应式设计...

    css3-grid-layout.rar_CSS3_DEMO_divisiondml_六边形_网格布局

    在本示例中,我们关注的是使用CSS3的Grid布局来创建一个独特的六边形网格页面。CSS3 Grid布局是一个二维布局系统,它允许开发者轻松地定义行和列,从而构建复杂的网页布局。这个名为“css3-grid-layout.rar”的...

    Div_CSS.rar_DIV css布局_css大全_css布局

    **Div+CSS布局详解** Div(Division)+CSS(Cascading Style Sheets)布局是网页设计中的核心概念,它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf",是一份全面的学习Div+CSS布局...

    CSS设计彻底研究--源代码

    7. **性能优化**:高效的CSS编写能够提升页面加载速度,包括减少选择器复杂度、合理使用内联样式、避免使用!important等,这些都是优化CSS性能的关键点。 通过阅读"CSS设计彻底研究--源代码"这本书,你可以获得实践...

    妙味课堂——前端HTML+CSS修炼之道-值得反复推敲的经典布局方案

    前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-...

    CSS帮助文档--css.rar

    CSS2是CSS的第二个主要版本,发布于1998年,相较于CSS1增加了许多新的特性,如浮动、定位、多列布局、边框和背景等。中文手册使得国内开发者更容易理解和学习这些特性,避免了语言障碍。手册通常会包含详细的语法...

    CSS40个布局实例

    关于CSS40个布局实列CSS布局大全:40多个教程,提示,例子和最佳实践 CSS布局教程 1-Three column fixed layout structure using CSS- 这篇文章解释了如何显示HTML/CSS基本结构。 2-Design page layout using CSS- 如何...

Global site tag (gtag.js) - Google Analytics