jsp如何画这种界面 主要左边的点线不好弄！_html/css_WEB-ITnose
回复讨论(解决方案)
关于竖线的已经参考本论坛一位的效果弄好了，关键左边的点线布局没有好 的思路
<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的力量了！
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7555
15
1384
52
83
11
59
19
28
96
Python 팁은 Gui를 사용하지 않고도 그래픽 인터페이스를 구현할 수 있습니다.
Apr 12, 2023 pm 04:43 PM
프로그래머가 두려워하는 것이 있다면 아마도 그럴 것입니다. 요구 사항이 다시 변경되었습니다. 아니요, 작성자가 브라우저 기반 웹 애플리케이션을 개발한 후 고객은 다음과 같이 말했습니다. 프로그램에는 내부(없음) 부품이 필요합니다( network) ) 환경... 이것은 Python 환경을 설치할 수 없다는 것을 의미합니다! 누가 우리를 프로그래머라고 부르나요? 그냥 GUI 버전을 개발하는 것은 어떻습니까? 진정할 수 없었습니다... ...고객의 평가에 영향을 주지 않으려면 일주일밖에 시간을 주지 않습니다. GUI를 구상하는 것은 어렵지 않지만 서비스와 대화형 인터페이스를 정리해야 합니다! 그렇지 않다면 GUI를 위한 별도의 인터페이스를 작성해야 하는데, 이는 확실히 시간이 부족합니다. 아니요, 다른 방법을 생각해 봅시다...그렇지 않으면 그냥 웹을 사용할 수도 있습니다.
jsp는 프론트엔드인가요, 백엔드인가요?
Jan 28, 2023 pm 06:23 PM
jsp는 백엔드에 속합니다. jsp의 본질은 서블릿이고, 서블릿은 서버측 자바 애플리케이션이므로 jsp는 백엔드 기술이다. JSP는 네트워크 서버에 배포되며 클라이언트가 보낸 요청에 응답하고 요청 내용을 기반으로 HTML, XML 또는 기타 형식 문서의 웹 페이지를 동적으로 생성한 다음 요청자에게 반환할 수 있습니다. JSP 기술은 Java를 스크립팅 언어로 사용하여 사용자 HTTP 요청에 대한 서비스를 제공하고 서버의 다른 Java 프로그램과 함께 복잡한 비즈니스 요구 사항을 처리할 수 있습니다.
인터페이스라는 단어가 작아지면 어떻게 해야 하나요?
Mar 20, 2024 pm 09:30 PM
컴퓨터를 사용하여 워드 문서를 조작하고 편집할 때 어디를 터치했는지 알 수 없는 경우가 많으며 인터페이스가 갑자기 매우 작아지는 경우가 있습니다. 어떤 사람들은 이러한 문제가 발생하면 컴퓨터가 오작동한다고 생각하여 당황할 수 있습니다. 사실 이는 특정 설정을 접하고 디스플레이를 조정했기 때문일 뿐입니다. 그렇다면 실수로 인터페이스 디스플레이의 크기를 변경한 경우 어떻게 복원하고 조정해야 할까요? 인터페이스라는 단어가 작아지면 어떻게 해야 하나요? 아래에서는 이러한 문제가 발생했을 때 쉽게 해결할 수 있는 몇 가지 방법을 공유하겠습니다. 먼저 Word 문서를 만들어 열고 간단한 편집 작업을 수행하여 단계를 보여줍니다. 아래 그림에서
jsp와 html의 차이점은 무엇입니까
Jan 09, 2024 am 10:46 AM
jsp와 html의 차이점: 1. 운영 메커니즘, 3. Java와의 관계, 5. 백엔드와의 관계, 7. 학습 및 사용의 어려움, 9. 파일 접미사 및 식별 도구 10. 커뮤니티 및 지원 자세한 소개: 1. 작동 메커니즘 HTML은 주로 웹 페이지의 내용을 설명하고 정의하는 데 사용되는 마크업 언어입니다. 클라이언트에서 실행되고 브라우저에서 실행되는 동적 웹 페이지 기술입니다. 서버 측 등이 기다려주세요.
SpringBoot 프로젝트에 JSP를 통합하는 방법
May 12, 2023 pm 07:40 PM
새 springboot 프로젝트가 생성된 후 디렉터리는 다음과 같습니다. 1단계: 프로젝트의 pom 파일에 jsp를 구성하는 데 필요한 jar 패키지 코드를 추가합니다. org.apache.tomcat.embedtomcat-embed-jasperprovided 2단계: 새 디렉터리 생성 webapp을 기본 경로 아래에 만들고, webapp 아래에 새 경로 WEB-INF를 만들고, WEB-INF 아래에 새 경로 jsp를 만든 다음, 이 경로 아래에 사용하려는 jsp 파일을 배치합니다. 3단계: 액세스 경로와 접미사 코드를 구성합니다. 기본 구성 파일의 jsp 파일: spring .mvc.view.prefix=/WEB-INF/jsp/sp
두 명의 중국 Google 연구원이 최초의 순수 시각적인 '모바일 UI 이해' 모델을 출시했습니다. 이는 SOTA를 새로 고치기 위한 4가지 주요 과제입니다.
Apr 12, 2023 pm 04:40 PM
AI의 경우 '휴대전화 가지고 노는 것'은 쉬운 일이 아니다. 단지 다양한 사용자 인터페이스(UI)를 식별하는 것만으로도 큰 문제다. 각 구성 요소의 종류를 식별해야 할 뿐만 아니라, 기능을 결정하기 위해 사용된 기호, 위치도 식별해야 한다. 구성 요소의. 모바일 장치의 UI를 이해하면 UI 자동화와 같은 다양한 인간-컴퓨터 상호 작용 작업을 실현하는 데 도움이 될 수 있습니다. 모바일 UI 모델링에 대한 이전 작업은 일반적으로 화면의 뷰 계층 정보에 의존하고 UI의 구조 데이터를 직접 활용하여 화면 픽셀에서 시작하는 구성 요소를 식별하는 문제를 우회합니다. 그러나 뷰 계층 구조를 모든 시나리오에서 사용할 수 있는 것은 아닙니다. 이 방법은 일반적으로 개체 설명이 누락되거나 위치가 잘못된 구조 정보로 인해 잘못된 결과를 출력하므로
이전 기계 황제는 다시 싸울 수 있습니까? Samsung Galaxy S23 Ultra 실무 경험 공유
Mar 12, 2024 pm 01:58 PM
스마트폰 시장에서 삼성 갤럭시 시리즈는 뛰어난 성능과 혁신적인 디자인으로 늘 주목을 받아왔다. 전 세대 머신왕답게 갤럭시 S23 울트라는 출시 이후 소비자들의 큰 사랑을 받아왔다. 시간이 지남에 따라 새로운 모델이 속속 등장합니다. 그렇다면 이 전직 기계왕이 오늘날에도 여전히 경쟁할 수 있을까요? 다음으로, Samsung Galaxy S23 Ultra를 사용해 본 실제 경험을 공유하고 이 문제에 대해 여러분과 논의하겠습니다. 우선, 외관 디자인 측면에서 갤럭시 S23 울트라는 여전히 삼성의 일관된 정교함과 고급스러움을 유지하고 있다. 독특한 약간 구부러진 화면 디자인은 휴대폰의 전반적인 미학을 향상시킬 뿐만 아니라 사용자에게 더욱 몰입감 있는 시각적 경험을 제공합니다. 매일 사용 중
JSP 페이징 기능 구현 방법
Mar 04, 2024 pm 04:40 PM
구현 단계: 1. JSP 페이지에 JSTL 태그 라이브러리를 도입합니다. 2. 데이터를 페이징합니다. 4. 페이지에 페이징 탐색 표시줄을 표시합니다. 번호와 각 페이지, 페이징 데이터에서 해당 데이터를 가져와 페이지에 표시하면 됩니다.
