html学习笔记，图片点线框操作仪表盘
文章目录
- 1，效果展示
- 2，代码干货
- 3，图片元素
1，效果展示
2，代码干货
<html>
<head>
<meta charset="utf-8">
<title>demotitle>
<style>
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
font-family:"MicroSoft YaHei", "SimSun";
}
ul{
padding:0;
margin:0;
}
ul li{
list-style:none;
}
.main-area{
position:absolute;
width:40%;
top:0;
bottom:10px;
left:30%;
border:solid 1px black;
}
.main-area .process-area{
position:absolute;
top:1px;
bottom:1px;
left:1px;
right:1px;
border:solid 1px black;
overflow-y:auto;
overflow-x:hidden;
}
.main-area .process-area ul{
//width:100%;
left:0;
right:0;
height:100%;
}
.main-area .process-area ul li{
position:absolute;
left:0;
right:0;
border:solid 1px black;
margin:2px;
overflow-y:auto;
overflow-x:hidden;
}
.main-area .process-area ul .input-point-line label{
height:20px;
margin:2px 0 2px 1px;
}
.main-area .process-area ul .draw-style{
position:absolute;
display:block;
height:20px;
width:170px;
border:solid 1px black;
margin:2px 2px 0px 2px;
}
.main-area .process-area ul .draw-style input{
height:100%;
width:40%;
padding:0;
border:none;
display:inline-block;
}
.main-area .process-area ul .input-point-line .draw-type{
position:absolute;
height:20px;
top:50px;
left:0px;
right:0px;
margin:0;
}
.main-area .process-area ul .input-point-line .draw-type ul{
width:170px;
height:100%;
display:inline-block;
border:solid 1px black;
margin:0px 0px 0px 2px;
}
.main-area .process-area ul .input-point-line .draw-type ul li{
width:40px;
border:0;
height:20px;
font-size:15px;
line-height:20px;
margin:0;
}
.main-area .process-area ul .input-point-line .draw-type button{
width:40px;
font-size:10px;
display:inline-block;
float:right;
margin:2px 5px 0px 2px;
border-radius:3px;
//border-style:none;
}
.main-area .process-area ul .input-point-line .point-list{
position:absolute;
display:block;
left:0px;
right:0px;
top:73px;
bottom:3px;
//height:100px;
border:solid 1px black;
margin:2px 2px 0px 2px;
overflow:hidden;
}
.main-area .process-area ul .input-point-line .point-list ul{
position:absolute;
left:0px;
right:0px;
top:0;
bottom:0;
margin:0;
overflow-y:auto;
overflow-x:hidden;
}
.main-area .process-area ul .input-point-line .point-list ul li{
position:absolute;
display:block;
height:20px;
left:0;
right:0;
margin:2px;
background-color:gray;
border:none;
overflow:hidden;
}
.main-area .process-area ul .input-point-line .point-list ul li span{
position:absolute;
display:inline-block;
width:10px;
background-color:
white;color:pink;
}
.main-area .process-area ul .input-point-line .point-list ul li .point-input{
position:absolute;
width:80%;
height:100%;
line-height:15px;
}
.main-area .process-area ul .input-point-line .point-list ul li .point-input input{
position:absolute;
width:30%;
height:16px;
border:1px;
margin-top:1px;
left:11px;
}
.main-area .process-area ul .input-point-line .point-list ul li button{
display:inline-block;
width:20px;
float:right;
height:18px;
font-size:10px;
font-weight:bold;
margin:0px 0px 0px 3px;
border-radius:3px;
//border-style:none;
}
.main-area .process-area ul .input-rect .rect-list{
position:absolute;
display:block;
left:0;
right:0;
//float:left;
top:20px;
//bottom:0;
height:170px;
border:solid 1px black;
margin:2px 2px 2px 2px;
overflow:hidden;
}
.main-area .process-area ul .input-rect .rect-list ul{
position:absolute;
display:block;
//width:100%;
left:0px;
right:0px;
height:100%;
//background-color:pink;
//overflow-y:hidden;
overflow-x:auto;
}
.main-area .process-area ul .input-rect .rect-list ul li{
position:absolute;
display:inline-block;
width:115px;
float:left;
height:145px;
border:solid 1px black;
margin:2px 2px 2px 2px;
overflow:hidden;
}
.main-area .process-area ul .input-rect .rect-list ul li .draw-style{
position:absolute;
display:block;
height:20px;
width:95%;
border:solid 1px black;
margin:2px 2px 0px 2px;
}
.main-area .process-area ul .input-rect .rect-list ul li .draw-style input{
position:absolute;
height:100%;
padding:0;
border:none;
display:inline-block;
}
.main-area .process-area ul .input-rect .rect-list ul li .rect-element{
position:absolute;
display:block;
top:26px;
height:95px;
width:98%;
overflow:hidden;
//background-color:white;
}
.main-area .process-area ul .input-rect .rect-list ul li .rect-element li{
position:absolute;
display:block;
height:20px;
width:96%;
overflow:hidden;
}
.main-area .process-area ul .input-rect .rect-list ul li .rect-element li input{
position:absolute;
width:81%;
left:12px;
height:13px;
text-align:center;
margin:0.5px 0px 0px 0px;
}
.main-area .process-area ul .input-rect .rect-list ul li .rect-draw{
position:absolute;
display:block;
top:122px;
height:20px;
left:0;
width:112px;
//background-color:white;
margin:0px 2px 0px 1px;
}
.main-area .process-area ul .input-rect .rect-list ul li .rect-draw .button{
//position:absolute;
display:inline-block;
width:20px;
float:right;
height:18px;
margin:1px 0px 0px 3px;
font-size:10px;
font-weight:bold;
text-align:center;
//border-style:none;
}
.main-area .process-area ul .draw-text-input .draw-type{
position:absolute;
height:20px;
top:22px;
left:0px;
right:0px;
margin:0;
}
.main-area .process-area ul .draw-text-input .draw-type ul{
width:180px;
height:100%;
display:inline-block;
border:solid 1px black;
margin:0px 0px 0px 2px;
}
.main-area .process-area ul .draw-text-input .draw-type ul li{
width:40px;
border:0;
height:20px;
font-size:15px;
line-height:20px;
margin:0;
}
.main-area .process-area ul .draw-text-input .draw-type .text-template{
position:absolute;
display:inline-block;
width:22px;
height:20px;
background-image:url(pic/setting.png);
background-repeat:no-repeat;
background-position: center left;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 20px;
//margin:2px 5px 2px 2px;
border-radius:3px;
//padding:1px 3px 1px 3px;
}
.main-area .process-area ul .draw-text-input .draw-type button{
width:40px;
font-size:10px;
display:inline-block;
float:right;
margin:2px 5px 0px 2px;
border-radius:3px;
//border-style:none;
}
.main-area .process-area ul .draw-text-input .text-input{
position:absolute;
display:block;
left:0px;
right:0px;
top:45px;
//bottom:2px;
height:50px;
border:solid 1px black;
margin:2px 2px 0px 2px;
overflow:hidden;
}
.main-area .process-area ul .draw-text-input .text-input textarea{
position:absolute;
//display:block;
width:99%;
height:100%;
margin:0px 0px 0px 0px;
overflow-y:auto;
}
.main-area .process-area ul .output-area label{
height:20px;
margin:2px 0 2px 1px;
}
.main-area .process-area ul .output-area .draw-operate button{
width:38px;
font-size:8px;
display:inline-block;
float:right;
margin:2px 5px 0px 2px;
border-radius:3px;
padding:1px 3px 1px 3px;
//border-style:none;
}
.main-area .process-area ul .output-area .draw-type{
position:absolute;
height:20px;
top:50px;
left:0px;
right:0px;
margin:0;
}
.main-area .process-area ul .output-area .draw-type ul{
position:absolute;
display:inline-block;
width:240px;
height:21px;
border:solid 1px black;
margin:0px 0px 0px 2px;
}
.main-area .process-area ul .output-area .draw-type ul li{
position:absolute;
display:inline-block;
width:28px;
border:0;
height:17px;
float:right;
background-repeat:no-repeat;
background-position: center left;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 15px;
margin:0px;
padding:2px;
background-color:white;
}
.main-area .process-area ul .output-area .draw-type ul li input{
position:absolute;
width:10px;
left:17px;
border:0;
height:17px;
margin:0;
padding:2px;
}
.main-area .process-area ul .output-area .draw-type .text-template{
position:absolute;
display:inline-block;
width:22px;
height:20px;
background-image:url(pic/setting.png);
background-repeat:no-repeat;
background-position: center left;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 20px;
margin:2px 5px 2px 2px;
border-radius:3px;
//padding:0px 3px 1px 3px;
}
.main-area .process-area ul .output-area .draw-list{
position:absolute;
display:block;
display:inline-block;
top:75px;
height:60px;
left:0px;
right:0px;
margin:0;
}
.main-area .process-area ul .output-area .draw-list ul{
position:absolute;
height:75px;
left:0;
right:62px;
margin:1px 0px 0px 2px;
border:solid 1px black;
overflow-y:auto;
}
.main-area .process-area ul .output-area .draw-list ul li{
position:absolute;
display:inline-block;
width:35px;
top:0;
height:50px;
margin:2px 0px 0px 2px;
}
.main-area .process-area ul .output-area .draw-list ul li .graphics-identify{
position:absolute;
display:inline-block;
left:0;
right:0;
height:19px;
top:0;
}
.main-area .process-area ul .output-area .draw-list ul li .graphics-identify label{
position:absolute;
display:inline-block;
left:0;
right:16px;
height:18px;
float:left;
font-size:10px;
line-height:18px;
text-align:center;
border:solid 1px black;
margin:0;
}
.main-area .process-area ul .output-area .draw-list ul li .graphics-identify button{
//position:absolute;
display:inline-block;
width:10px;
height:20px;
float:right;
background-image:url(pic/delete.png);
background-repeat:no-repeat;
background-position: bottom right;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 13px;
}
.main-area .process-area ul .output-area .draw-list ul li .graphics-type{
position:absolute;
display:inline-block;
left:0;
right:0;
height:30px;
bottom:0;
background-repeat:no-repeat;
background-position: center center;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 20px;
}
.main-area .process-area ul .output-area .draw-list .draw-button{
width:50px;
height:75px;
display:inline-block;
float:right;
margin:1px 2px 0px 0px;
padding:0px;
border:solid 1px black;
}
.main-area .process-area ul .output-area .draw-list .draw-button .button{
width:40px;
height:20px;
display:inline-block;
margin:2.5px 2.5px 2px 5px;
padding:0px;
}
.main-area .process-area ul .output-area .rect-text-input{
position:absolute;
display:block;
left:0px;
right:0px;
top:155px;
bottom:2px;
border:solid 1px black;
margin:2px 2px 0px 2px;
overflow:hidden;
}
.main-area .process-area ul .output-area .rect-text-input textarea{
position:absolute;
//display:block;
width:99%;
height:100%;
margin:0px 0px 0px 0px;
overflow-y:auto;
}
style>
head>
<body>
<div class="main-area">
<div class="process-area">
<ul>
<li class="input-point-line" style="background-color:#f7f0f1;height:180px;top:0;">
<label>点-线-框 绘制label>
<div class="draw-style">
<input type="color" style="position:absolute;">
<input type="range" style="margin:0 0 0 45%;">
div>
<div class="draw-type">
<ul>
<li style="left:4px;">点<input type="radio" name="point-draw-type">li>
<li style="left:44px;">线<input type="radio" name="point-draw-type">li>
<li style="left:84px;">框<input type="radio" name="point-draw-type">li>
ul>
<button class="button">绘制button>
<button class="button">清除button>
div>
<div class="point-list">
<ul>
<li style="top:0px">
<span>1span>
<div class="point-input" style="left:3%;">x<input>input>div>
<div class="point-input" style="left:33%;">y<input>input>div>
<button>-button>
<button>+button>
<button>cbutton>
li>
<li style="top:22px">
<span>2span>
<div class="point-input" style="left:3%;">x<input>input>div>
<div class="point-input" style="left:33%;">y<input>input>div>
<button>-button>
<button>+button>
<button>cbutton>
li>
ul>
div>
li>
<li class="input-rect" style="background-color:#f7f0f1;height:195px;top:187px;">
<label>矩形框 绘制label>
<div class="rect-list">
<ul>
<li style="left:0;">
<div class="draw-style">
<input type="color" style="width:25%;">
<input type="range" style="margin:0 0 0 30%;width:65%;">
div>
<ul class="rect-element">
<li style="top:00px;">x<input>input>li>
<li style="top:23px;">y<input>input>li>
<li style="top:46px;">w<input>input>li>
<li style="top:69px;">h<input>input>li>
ul>
<div class="rect-draw">
<button class="button">cbutton>
<button class="button">+button>
<button class="button">-button>
<button class="button">dbutton>
div>
li>
<li style="left:125px;">
<div class="draw-style">
<input type="color" style="position:absolute;width:25%;">
<input type="range" style="margin:0 0 0 30%;width:65%;">
div>
<ul class="rect-element">
<li style="top:00px;">x<input>input>li>
<li style="top:23px;">y<input>input>li>
<li style="top:46px;">w<input>input>li>
<li style="top:69px;">h<input>input>li>
ul>
<div class="rect-draw">
<button class="button">cbutton>
<button class="button">+button>
<button class="button">-button>
<button class="button">dbutton>
div>
li>
<li style="left:250px;">
<div class="draw-style">
<input type="color" style="position:absolute;width:25%;">
<input type="range" style="margin:0 0 0 30%;width:65%;">
div>
<ul class="rect-element">
<li style="top:00px;">x<input>input>li>
<li style="top:23px;">y<input>input>li>
<li style="top:46px;">w<input>input>li>
<li style="top:69px;">h<input>input>li>
ul>
<div class="rect-draw">
<button class="button">cbutton>
<button class="button">+button>
<button class="button">-button>
<button class="button">dbutton>
div>
li>
ul>
div>
li>
<li class="draw-text-input" style="background-color:#f7f0f1;height:100px;top:389px;">
<label>文本解析 绘制label>
<div class="draw-type">
<ul>
<li style="left:4px;">点<input type="radio" name="text-draw-type">li>
<li style="left:44px;">线<input type="radio" name="text-draw-type">li>
<li style="left:84px;">框<input type="radio" name="text-draw-type">li>
<li style="left:124px;width:80px;">混合<input type="radio" name="text-draw-type">li>
ul>
<div class="text-template" style="left:194px;">div>
<button class="button">绘制button>
<button class="button">清除button>
div>
<div class="text-input">
<textarea cols="40" rows="8" id="id-draw-text-input">textarea>
div>
li>
<li class="output-area" style="background-color:#f7f0f1;height:205px;top:497px;">
<label>点-线-框 输出label>
<div class="draw-style">
<input type="color" style="position:absolute;">
<input type="range" style="margin:0 0 0 45%;">
div>
<div class="draw-operate">
<button class="button">提取button>
<button class="button">绘制button>
div>
<div class="draw-type">
<ul>
<li style="left:0px;background-image:url('pic/point.png');"><input type="radio" name="out-shape-type">li>
<li style="left:35px;background-image:url('pic/horizontalLine.png');"><input type="radio" name="out-shape-type">li>
<li style="left:70px;background-image:url('pic/verticalLine.png');"><input type="radio" name="out-shape-type">li>
<li style="left:105px;background-image:url('pic/obliqueLine.png');"><input type="radio" name="out-shape-type">li>
<li style="left:140px;background-image:url('pic/brokenLine.png');"><input type="radio" name="out-shape-type">li>
<li style="left:175px;background-image:url('pic/polygon.png');"><input type="radio" name="out-shape-type">li>
<li style="left:205px;background-image:url('pic/rectangle.png');"><input type="radio" name="out-shape-type">li>
ul>
<div class="text-template" style="left:254px;">div>
div>
<div class="draw-list">
<ul>
<li style="left:0px;">
<div class="graphics-identify">
<label>33label>
<button>button>
div>
<div class="graphics-type" style="background-image:url('pic/brokenLine.png');background-color:#ababab;">
div>
li>
<li style="left:40px;">li>
ul>
<div class="draw-button">
<button class="button">清除button>
<button class="button">输出button>
div>
div>
<div class="rect-text-input">
<textarea cols="40" rows="8" id="id-rect-text-input">textarea>
div>
li>
ul>
div>
div>
body>
html>
3，图片元素
