目录
回复讨论(解决方案)
首页 web前端 html教程 jsp如何画这种界面 主要左边的点线不好弄!_html/css_WEB-ITnose

jsp如何画这种界面 主要左边的点线不好弄!_html/css_WEB-ITnose

Jun 21, 2016 am 09:27 AM
jsp 左边 界面


回复讨论(解决方案)

关于竖线的已经参考本论坛一位的效果弄好了,关键左边的点线布局没有好 的思路

<table height=90 style=border-color:000000;border-left-style:solid;border-width:1px><tr><td valign=top>内容</table>
登录后复制

<table height=90 cellspacing cellpadding><tr><td bgcolor=000000 width=1><td width=300 valign=top>内容</table>
登录后复制

具体可参看:http://blog.csdn.net/malelionofwakeup/article/details/1956960

贴代码,希望帮上你!

<style>	li{list-style:none;width:100%;height:104px;font-family: 'Microsoft YaHei';}	.linePanel {float:left;width:5%;}	.line{background-color:rgb(204, 204, 204);width:5px;height:40px;}	.point{width:14px;height:14px;border-radius:10px;background-color:rgb(204, 204, 204);margin:5px -4px;}	.date{height:67px;}	.date .text{font-size:20px;color:rgb(204, 204, 204);margin-left:-50px;width:100px;text-align:center;}	.half{height:20px;}	.contentPanel{width:95%;height:40px;float:right;}	.content{position:relative;background-color:rgb(204, 204, 204);width:90%;height:70px;margin-top:25px;margin-left:10%;border-radius:10px;}	.triangle-left{position:absolute;left:-16px;top:20px;width:0px;height: 0;border-top: 8px solid transparent;border-right: 16px solid rgb(204, 204, 204);border-bottom: 8px solid transparent;}	.content .text{font-size:16px;color:#fff;padding:5px;font-weight:bold;word-spacing: 2px;}</style><body>	<ul>		<li>			<div class="linePanel">				<div class="line"></div>				<div class="point"></div>				<div class="line"></div>			</div>			<div class="contentPanel">				<div class="content">					<div class="triangle-left"></div>					<div class="text">20:34 快件离开 武汉中转部已发</div>				</div>			</div>		</li>		<li>			<div class="linePanel">				<div class="line"></div>				<div class="point"></div>				<div class="line"></div>			</div>			<div class="contentPanel">				<div class="content">					<div class="triangle-left"></div>					<div class="text">20:31 快件到达武汉中转部 上一站是 温州中转部</div>				</div>			</div>		</li>		<li class="date">			<div class="linePanel">				<div class="line half"></div>				<div class="text">6-21</div>				<div class="line half"></div>			</div>		</li>		<li>			<div class="linePanel">				<div class="line"></div>				<div class="point"></div>				<div class="line"></div>			</div>			<div class="contentPanel">				<div class="content">					<div class="triangle-left"></div>					<div class="text">21:57 快件离开 温州中转部 已发往 武汉中转部</div>				</div>			</div>		</li>		<li>			<div class="linePanel">				<div class="line"></div>				<div class="point"></div>				<div class="line"></div>			</div>			<div class="contentPanel">				<div class="content">					<div class="triangle-left"></div>					<div class="text">20:06 快件到达温州中转部 上一站是 上海</div>				</div>			</div>		</li>	</ul></body>
登录后复制

@maihao110  非常感谢!看来 小看了li的力量了!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Python小技之不用 Gui,照样实现图形界面 Python小技之不用 Gui,照样实现图形界面 Apr 12, 2023 pm 04:43 PM

如果说程序员有什么怕的,那我想可能就是 —— 需求又变了!这不,客户在笔者开发完一个基于浏览器的 Web 应用程序之后说:程序需要在内(无)部(网)环境中运行……这就意味着无法安装 Python 环境!谁叫咱是程序员呢,不就开发一个 GUI 版本吗,难不倒我……可是听到给的时间后,就不淡定了……为了不影响客户的评测,只能给出一周时间!构思GUI 虽然也不难,不过需要梳理一遍服务以及与用户的交互接口,弄不好就得为 GUI 单独编写接口,这点时间显然不够呀。不行,就再想想办法……不然直接将 Web

jsp是属于前端还是后端 jsp是属于前端还是后端 Jan 28, 2023 pm 06:23 PM

jsp属于后端。jsp的本质是一种servlet,而servlet又是服务器端的java应用程序,所以jsp是属于后端的技术。JSP部署于网络服务器上,可响应客户端发送的请求,并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页,然后返回给请求者。JSP技术以Java作为脚本语言,为用户HTTP请求提供服务,并能与服务器上的其它Java程序共同处理复杂的业务需求。

word界面变小了怎么办 word界面变小了怎么办 Mar 20, 2024 pm 09:30 PM

我们在使用电脑进行word文档操作编辑的时候,经常不知道是触碰到了什么位置,界面忽然变得很小,有时候word文档里的文字都看不太清楚了。有人可能遇到这样的问题会惊慌失措了,以为是不是电脑出了故障,其实,这只是因为你碰到了某种设置,将显示做了调整。那么,如果不小心改变了界面显示的大小,应该怎么恢复和调整呢?word界面变小了怎么办呢?下边,我们就分享几种方式加以解决,希望你遇到这样的问题的时候能够轻松应对和处理。首先,我们新建并打开一个Word文档,进行简单的编辑操作,以便于展示操作步骤。在下图中

jsp和html区别在哪 jsp和html区别在哪 Jan 09, 2024 am 10:46 AM

jsp和html区别:1、运行机制;2、用途;3、与Java的关系;4、功能;5、与后端的关系;6、速度;7、可维护性和扩展性;8、学习和使用的难易程度;9、文件后缀和识别工具;10、社区和支持;11、安全性。详细介绍:1、运行机制,HTML是一种标记语言,主要用于描述和定义网页的内容,它运行在客户端,由浏览器解释执行,JSP是一种动态网页技术,运行在服务器端等等。

SpringBoot项目如何整合JSP SpringBoot项目如何整合JSP May 12, 2023 pm 07:40 PM

新建好springboot项目以后目录如下:第一步:在项目的pom文件中加入配置jsp所需要的jar包代码:org.apache.tomcat.embedtomcat-embed-jasperprovided第二步:在main路径下新建目录webapp,在webapp下新建路径WEB-INF,在WEB-INF下新建路径jsp,在这个路径下放置我们要使用的jsp文件第三步:在主配置文件中配置jsp文件的访问路径和后缀代码:spring.mvc.view.prefix=/WEB-INF/jsp/sp

两位谷歌华人研究员发布首个纯视觉「移动UI理解」模型,四大任务刷新SOTA 两位谷歌华人研究员发布首个纯视觉「移动UI理解」模型,四大任务刷新SOTA Apr 12, 2023 pm 04:40 PM

对AI来说,「玩手机」可不是一件易事,光是识别各种用户界面(user interface, UI)就是一大难题:不光要识别出各个组件的类型,还要根据其使用的符号、位置来判断组件的功能。对移动设备UI的理解,能够帮助实现各种人机交互任务,比如UI自动化等。之前的工作对移动UI的建模通常依赖于屏幕的视图层次信息,直接利用了UI的结构数据,并借此绕过了从屏幕像素开始对组件进行识别的难题。不过并不是所有的场景下都有可用的视图层次,这种方法通常会因为对象描述的缺失或结构信息的错位而输出错误结果,所以尽管使

上代机皇能否再战?三星 Galaxy S23 Ultra 实际使用体验分享 上代机皇能否再战?三星 Galaxy S23 Ultra 实际使用体验分享 Mar 12, 2024 pm 01:58 PM

在智能手机市场,三星的Galaxy系列一直以其卓越的性能和创新的设计备受瞩目。而GalaxyS23Ultra作为上代机皇,自发布以来便受到了广大消费者的喜爱。随着时间的推移,新机型层出不穷,那么,这款昔日的机皇如今还能否再战呢?接下来,我将分享自己在使用三星GalaxyS23Ultra过程中的实际体验,带大家一同探讨这个问题。首先,从外观设计上来看,GalaxyS23Ultra依然保持着三星一贯的精致与高端。其独特的微曲屏设计不仅提升了手机的整体美感,更为用户带来了更加沉浸的视觉体验。在日常使用

jsp分页功能怎么实现 jsp分页功能怎么实现 Mar 04, 2024 pm 04:40 PM

实现步骤:1、在JSP页面中引入JSTL标签库;2、从数据库中获取数据;3、对数据进行分页处理;4、在页面中显示分页导航条;5、根据当前页码和每页显示数量,从分页后的数据中获取对应的数据并显示在页面上即可。

See all articles