005-WebBuilder使用结构元素进行网页布局

于 2022-01-17 17:00:22 发布
阅读量421 收藏 1
点赞数
分类专栏： webBuilder 文章标签： css3 javascript webbuilder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43404791/article/details/122543620
版权

这个太零散了直接在代码上写的注释，第一份前端代码

<!DOCTYPE html>
<html> <!--文档基本结构-->
	<head><!--设置section或者page的页眉-->
		<meta charset="utf-8" /><!--meta网页元信息-->
		<title>业务种类</title><!--网页标题-->
		<!--使用结构元素进行网页布局-->
		<!--定义文档的样式信息-->
		<style>
			.left-list-container{
				float: left;/*float规定框是否应该浮动，left设置定位元素左外边距边界与其包含块左外边界之间的偏移*/
			}
			.left-list-title{
				margin-bottom: 20px;/*定义元素外边距使用margin属性，可以专门设置某一方向属性，比如margin-bottom:设置元素的下外边距*/
			}
			.left-list-header{
				font-size: 30px;/*字体大小*/
				color: rgb(16,120,173); 
				/*定义内边距使用padding属性，内边距就是元素包含的内容和元素边框内边沿之间的距离*/
				padding-left: 8px;
				/*边框border:任何元素都可以定义边框，并且能够很好地显示出来。边框在网页布局中就是用来分割模块的。*/
				border-left: 5px solid rgb(16,120,173);
			}
			.left-list-footer{
				font-size: 15px;
				color: rgb(255,203,0);
				padding-left: 8px;/*padding是内边距，设置内边距这样我们就有空间可以设置border边框了， soild一个实体边框*/
				border-left: 5px solid rgb(255,203,0);
			}
			.left-list-content{
				flex: 1;/*让所有弹性盒子对象的子元素都有相同的长度，且忽略他们内部的内容*/
				width: 200px;/*元素区域宽度*/
				background-color: rgb(247,247,247);/*背景色*/
				padding: 0 5px;
				border: 1px solid rgb(247,247,247);/*定义边框，只要和背景色一样就看不出来*/
			}
			.left-list-content-item{
				display: flex;/*利用display属性控制盒子的类型，flex:多行多列布局方式*/
				align-items: center;/*元素位于容器的中心，这个没啥用*/
				font-size: 20px;/*字体大小*/
				line-height: 25px;/*line-height行高，用来设置行间的距离*/
				padding: 10px 0;/*上下填充是10px,左右填充是0， 行间距和padding的上下填充感觉重复*/
				border-bottom: 1px solid rgb(247,247,247);/*定义底部边框，只要背景色一样就看不出来*/
			}
			.left-list-content-item:nth-last-child{/*nth-last-child是从最后一个元素开始计算选择特定元素*/
				border-bottom: 0px solid rgb(247,247,247);
			}
			.left-list-icon{/*设置图标大小*/
				height: 20 px;
				width: 20 px;
			}
		
		</style>
	</head>
	<body>
		<div class="list-container"><!--div定义文档的节-->
			<div class="left-list-title">
				<div class="left-list-header">
					业务种类
				</div>
				<div class="left-list-footer">
					Bussiness Type
				</div>
			</div>
			<ul class="left-list-content"><!--ul定义无序列表-->
				<li class="left-list-content-item"><!--li定义列表的项目-->
					<img src="img/left.jpg" class="left-list-icon"/><!--定义图像-->
					<span class="left-list-content">出入境体检</span><!--定义文档的节-->
				</li>
				<li class="left-list-content-item">
					<img src="img/left.jpg" class="left-list-icon"/>
					<span class="left-list-content">预防接种</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/left.jpg" class="left-list-icon"/>
					<span class="left-list-content">指定签证体检</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/left.jpg" class="left-list-icon"/>
					<span class="left-list-content">社会健康体检</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/left.jpg" class="left-list-icon"/>
					<span class="left-list-content">其他服务</span>
				</li>
			</div>
			<div class="left-list-title">
				<div class="left-list-header">
					业务指南
				</div>
				<div class="left-list-footer">
					Bussiness Guide
				</div>
			</div>
			<ul class="left-list-content" >
				<li class="left-list-content-item">
					<img src="img/体检流程.jpg" class="left-list-icon"/>
					<span class="left-list-content">体检流程</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/体检注意事项.jpg" class="left-list-icon"/>
					<span class="left-list-content">体检注意事项</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/体检结果领取须知.jpg" class="left-list-icon"/>
					<span class="left-list-content">体检结果领取须知</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/收费标准.jpg" class="left-list-icon"/>
					<span class="left-list-content">收费标准</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/办公时间.jpg" class="left-list-icon"/>
					<span class="left-list-content">办公时间</span>
				</li>
				<li class="left-list-content-item">
					<img src="img/预防接种须知.jpg" class="left-list-icon"/>
					<span class="left-list-content">预防接种须知</span>
				</li>
			</div>
		</div>
	</body>
</html>

效果
在这里插入图片描述
在webbuilder中的效果
在这里插入图片描述
今天基本就是在学习这一份前端代码，自己敲了一遍，放在webBuilder上运行了一下。前端果然复杂呀。

天又热了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
快速开发平台 WebBuilder 使用笔记
woskyer的专栏
09-27 4835
最近公司在使用WebBuilder做项目开发，感觉很不错。 ​      可以看到，这货不仅能使用可视化的方式拖拽出界面，还能直接在页面上完成数据库相关的操作。对于企业级的应用来说，一般会涉及到非常复杂的表单布局，以及大量的数据库交互。使用WebBuilder则只要打开一个浏览器就可以了，plsql神马的，一般的开发就无需打开了。       Amdocs也有一款类似的在线
lodash-webbuilder:用于构建 lodash 的 Web 客户端
06-05
lodash-webbuilder 是一个专门针对lodash库的工具，用于构建适合Web客户端使用的定制版本。lodash是一个广泛使用的JavaScript实用程序库，提供了各种便利的功能，如数组操作、对象处理、函数编程等，帮助开发者编写...
HTML5 使用结构元素进行网页布局
LQS的博客
03-07 4665
使用结构元素进行网页布局 .main{ width: 1000px; margin: 40px auto; } .main nav{ width: 1000px; height: 40px; background: #999; /*背景颜色*/ border-radius: 5px; /*圆角边框半径*/ } .main nav li{ widt
html5用结构元素来布局,HTML5 结构元素
weixin_35112865的博客
07-08 501
的用法。 一般来说，一个应该出现在文档大纲中article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中元素的作者信息可通过元素提供，但是不适用于嵌套的元素；元素的发布日...
利用 CSS 进行网页布局
陈 浩
01-22 1056
这里主要主要介绍如何利用 CSS 来进行网页的一栏，两栏，三栏和混合布局1. 一列布局<html> <head> <style type="text/css"> body{margin:0;padding:0} .top{height: 100px; background: blue;} .main{width: 800px;
004-webbuilder所有布局
weixin_43404791的博客
01-13 1477
viewport viewport表示整个页面的显示视口，他把页面渲染到浏览器的body中，他的大小等于浏览器body的大小,如果整个页面需要占据整个浏览器body(全屏显示)，可以使用该控件作为顶层控件。 大部分需要在浏览器中显示的模块通常都会使用viewport作为顶层控件，然后在其下添加其他界面控件。 在模块文件中，非容器控件只有被添加到viewport或者容器（如panel控件）才会被显示，比如文本框控件text只有被添加到viewport或者panel才会被显示，佛祖额如果模块不在单独的窗口中运
WebBuilder使用教程.pdf
11-17
WebBuilder使用教程.pdf
Webbuilder使用说明文档
最新发布
02-28
WebBuilder 是一款强大的快速Web应用开发和运行平台，使用 WebBuilder 您可以快速开发出无与伦比的应用系统，目前官网学习课堂下架，导致初学者使用者不知如何入门，所以此文档分享给大家。
webbuilder
03-06
在本文中，我们将深入探讨WebBuilder的核心特性、使用方法以及如何通过它来构建网页。 首先，WebBuilder支持多种编程语言，包括HTML、CSS、JavaScript，甚至更高级的PHP和ASP.NET。这使得开发者可以根据项目需求...
webbuilder 用网页编辑数据库的中数据
08-08
WebBuilder是一款专为Windows系统设计的网页编辑工具，它允许用户通过网页界面来直接操作和管理各种类型的数据库。这款软件的独特之处在于它将网页开发与数据库管理紧密结合，为IT专业人士提供了一个直观且高效的...
WebBuilder
05-26
基于J2EE的可视化开发工具,集成封装Ext、FusionCharts以及Java后台组件 WebBuilder是一款跨平台、数据库和浏览器的Web应用开发和部署平台，可以在您原有使用的技术框架上混合使用，可以使用Eclipse开发调试。这个版本是没有任何限制的正式完全版本，欢迎大家使用。
WebBuilder开发手册
09-19
WebBuilder开发手册 （基于浏览器的集成开发环境，可视化和智能化的设计，能轻松完成常规应用和面向手机的移动应用开发；高效、稳定和可扩展的特点，使应用系统的开发更快捷和简单。）
快速开发平台 WebBuilder
02-27
WebBuilder是一款跨平台、数据库和浏览器的可视化Web应用开发平台。WebBuilder使用了多项最新的技术，使Web应用的开发更快捷和简单。 作为一款高效的Web开发工具，WebBuilder的特色是： .基于浏览器的集成开发环境 .丰富的组件库 .开发应用简单快速 .高效率和高稳定性 .跨平台、数据库和浏览器 .服务器端的脚本支持 .智能的数据库访问机制 使用WebBuilder可开发ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的企业级应用系统，帮助信息化管理系统的快速构建。完善的基础架构，具有大型应用系统必须的完整功能，使应用系统的开发仅需致力于业务的开发。 您可以到 http://www.putdb.com 在线使用或下载到本地使用，软件开源并基于GPL协议授权。
WebBuilder Web开发和部署平台 - IDE
12-28
WebBuilder是一款跨平台、数据库和浏览器的Web应用开发和部署平台。帮助企业提高应用系统的开发效率，并降低成本，提高竞争力。强大的功能满足用户对于应用的苛刻要求，提高用户满意度。完善的基础架构，具有应用系统必须的完整功能，使企业仅致力于业务的开发。WebBuilder具有强大的生产力，能通过它开发ERP、CRM、BOSS等Web应用系统。
WebBuilder 2010 Web应用开发和部署平台
01-18
WebBuilder是一款跨平台、数据库和浏览器的Web应用开发和部署平台。帮助企业提高应用系统的开发效率，并降低成本。完善的基础架构，具有应用系统必须的完整功能，使企业仅致力于业务的开发。WebBuilder的功能： 应用开发：提供可视化的WebBuilder集成开发环境，帮助应用系统的快速开发，支持使用Eclipse等开发工具的开发和调试。 应用部署：使用基于Web的资源管理器进行应用的部署，支持Java，.Net，PHP等大部分Web应用的部署。 自定义的应用描述语言：基于XML的Web应用描述语言，屏蔽不同平台、数据库和浏览器之间的差异。 完整的组件框架：提供应用开发所需的经过封装的前后台组件、开发框架以及应用模块。
Extjs随笔（一）WebBuilder开发
baixiefu5782的博客
12-27 166
1.extjs怎么实现点击第一个grid1(对应store1)的某行，显示第二个grid2(对应store1)与之关联的行（前提是grid1和grid2之间的数据有关联），并默认选中所有的行: (1).在grid1的events事件的itemclick属性加入如下代码： //首先获取grid1所选中的行 var record = grid1.getSelectionModel()....
63
xiexuzhao的专栏
07-22 164
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Dat...
html div css网页,结构化HTML DIV CSS网页布局入门指南
weixin_39744408的博客
06-27 157
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知...
强大的快速开发平台WebBuilder(简称WB)
热门推荐
a482102的博客
12-17 1万+
强大的WebBuilder(简称WB) WebBuilder是一款强大，全面和高效的应用开发和运行平台。基于浏览器的集成开发环境，可视化和智能化的设计，能轻松完成常规应用和面向手机的移动应用开发。包含多项先进技术，使应用系统的开发更快捷和简单。 WB集成开发环境 wb的集成开发环境主要是基于EXTJS、JAVA以及数据库之间的交互，打开wb的IDE页面右侧控件箱内为封装好的控件。控件中包含方法和属...
WebBuilder开发与应用指南
WebBuilder开发基础部分涵盖了系统的目录结构、参数机制、配置方法以及运行时变量的使用，这些都是开发过程中不可或缺的基础知识。 在页面布局和容器组件章节，手册列举了多种常用的布局方式和组件，如viewPort、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值