`
uule
  • 浏览: 6382944 次
  • 性别: 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
分享到:
评论

相关推荐

    多个列Dlv等高层设计

    例如,Flexbox和Grid是现代CSS布局模型,它们提供了简便的方法来实现等高列。Flexbox允许设置`align-items: stretch`来拉伸子项填充整个容器,而Grid可以通过设置`grid-template-rows: 1fr`让所有行具有相同高度。 ...

    HarmonyOS应用开发-JS相关整体梳理.docx

    - **类Web编程范式:** 使用类似于HTML和CSS的语言来进行页面布局与样式的设计,而JavaScript用于处理页面业务逻辑。 - **UI跨设备显示能力:** 在开发过程中无需特别考虑不同设备之间的差异,由框架自动处理适配...

    Openlayers教程

    3. **为div指定样式**:设置`div`元素的宽度和高度,使其适应页面布局。 4. **插入OpenLayers代码引用**:通过`&lt;link&gt;`和`&lt;script&gt;`标签引入OpenLayers的CSS和JS文件。 5. **编写JavaScript代码**:实现地图初始化...

    Thinkphp互联网网络科技类网站模板

    模板中的文件名如`layer.css`,代表了CSS层叠样式表,它是网页设计中控制视觉表现的重要部分。`layer.css`可能包含了页面中弹窗、对话框等组件的样式定义,确保了用户界面的一致性和美观性。`.htaccess`文件则是...

    layui-main.zip

    3. 弹窗(Layer):轻量级的弹出层组件,可用于提示信息、加载iframe、展示图片等,支持自定义大小和位置。 4. 按钮(Button):提供多种样式的按钮,可设置图标、状态、监听点击事件。 5. 导航(Nav)和菜单(Menu...

    customLayerSwitcher

    6. **CSS样式**:为了让自定义图层切换器美观且易于使用,开发者还需要具备CSS知识,来调整组件的布局和视觉效果。 7. **模块化和封装**:为了代码的可维护性和复用性,通常会将自定义图层切换器作为一个独立的模块...

    ROYcms2.0建站工具

    8. **ROYcms.Sys.3Layer**:这部分代码可能涉及系统的三层架构设计,包括表示层、业务逻辑层和数据访问层,有利于实现代码的分离和模块化,提高代码的可维护性和可扩展性。 9. **ROYcms.Web**:这部分是网站的前端...

    动力起航5dtcms

    对于初次使用者来说,这是一个非常重要的参考文档,可以帮助他们顺利地完成系统的安装和部署。 2. **DTcms2015.sln** 和 **DTcms.sln**:这两个文件都是Visual Studio的解决方案文件。".sln"扩展名用于组织一个或多...

    jquery分页插件jquery.pagination.js实现无刷新分页

    此外,为了美化分页控件的样式,通常还会引入一个与之配套的CSS文件pagination.css。 使用该插件实现分页功能时,需要注意以下几点: 1. 初始化分页:在页面加载时使用$("#Pagination").pagination()方法初始化分页...

Global site tag (gtag.js) - Google Analytics