Html,css构建一个对话框,练习201911281028
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css"> #identity1{
position: relative;
left: 0px;
top: 0px;
width: 0px;
height: 0px;
border-left: 34px solid transparent;
border-right: 34px solid #96BBFF;
border-bottom: 23px solid transparent;
z-index: 0;
} #identity1:after{
content: '';
position: absolute;
left: -30px;
top: 1px;
border-left: 34px solid transparent;
border-right: 34px solid #FFFFFF;
border-bottom: 23px solid transparent;
z-index: 1;
} .clazz3{
position: relative;
left: 68px;
top: -23px;
width: 745px;
height: 95px;
border-top: 1px solid #96BBFF;
border-right: 1px solid #96BBFF;
border-bottom: 1px solid #96BBFF;
} .clazz4{
position: relative;
left: -32px;
top: -98px;
width: 100px;
height: 74px;
border-right: 1px solid #96BBFF;
} .contentClazz{
width: 1000px;
height: 155px;
border: 1px solid lime;
} </style>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
</head>
<body> <div id="contentList"> </div>
<div id="content" style="display: none;">
<div class="contentClazz">
<table>
<tr>
<td style="padding-left: 35px;">
<span id="receiptTime">2019-11-28 09:43</span>
会员卡号:<span id="vipNumber">123</span>
电话号码:<span id="phone">456</span>
</td>
</tr>
<tr>
<td>
<div id="identity1" class=""></div>
<div id="identity2" class="clazz3"></div>
<div id="identity3" class="clazz4"></div>
<div class="detailsItem"></div>
</td>
</tr>
</table>
</div>
</div> <!--<table class="detailsItem" style="display: none;">
<tr>
<td> </td>
</tr>
</table>--> <div class="detailsItem detailsItem1" style="display: none;">
<table>
<tr>
<td>
<table>
<tr>
<td>
1:
</td>
</tr>
<tr>
<td>
2:
</td>
</tr>
<tr>
<td>
3:
</td>
</tr>
</table>
</td>
</tr>
</table>
</div> <div class="detailsItem detailsItem2" style="display: none;">
<table>
<tr>
<td>
<table>
<tr>
<td>
图片
</td>
<td>
<a href="javascript: void(0);">(4)</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div> <div class="detailsItem detailsItem3" style="display: none;">
<table>
<tr>
<td>
<table>
<tr>
<td>
5.docx
</td>
</tr>
<tr>
<td>
<a href="javascript: void(0);">(6)</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div> <script type="text/javascript"> $(function(){ var contentListHtml = "<table>";
var html = $("#content").html();
for(var i = 0; i < 3; i++){
contentListHtml += "<tr>"
+ "<td>"
+ html
+ "</td>"
+ "</tr>";
}
contentListHtml += "</table>";
$("#contentList").html(contentListHtml);
var cssObj = {};
cssObj.marginLeft = "100px";
contentStyle(cssObj);
var cssArr = [];
$("#contentList .contentClazz .clazz3").each(function(){
// alert($(this).css("position"));
// alert($(this).css("left"));
// alert($(this).css("top"));
// alert($(this).offset().left);
// alert($(this).offset().top);
var cssObj = {};
cssObj.left = $(this).offset().left;
cssObj.top = $(this).offset().top;
cssArr.push(cssObj);
});
/*for(var i = 0; i < contentList.length; i++){
alert(contentList[0].children("div:eq(1)").css("left"));
}*/
var detailsItemHtml = null;
var i = 0;
$("#contentList .contentClazz").each(function(){
if(i % 3 == 0){
detailsItemHtml = $(".detailsItem1").html();
}else if(i % 3 == 1){
detailsItemHtml = $(".detailsItem2").html();
}else if(i % 3 == 2){
detailsItemHtml = $(".detailsItem3").html();
}
$(this).children("table:eq(0)").children("tbody")
.children("tr:eq(1)").children("td:eq(0)")
.children("div:eq(3)").html(detailsItemHtml);
$(this).find(".detailsItem").css({
"padding-top": "10px",
"position": "absolute",
"left": cssArr[i].left + "px",
"top": cssArr[i].top + "px"
});
i++;
});
}); function contentStyle(cssObj){
if(cssObj){
var marginLeft = cssObj.marginLeft;
if(marginLeft){
$(".contentClazz").css({"padding-top": "-100px"});
}
}
} </script> </body>
</html>
效果图:
因为马赛克导致线断开了,实际上是没问题的,公司需求,不能随便上传,只能先这样了.
Html,css构建一个对话框,练习201911281028的更多相关文章
- 从实体框架核心开始:构建一个ASP。NET Core应用程序与Web API和代码优先开发
下载StudentApplication.Web.zip - 599.5 KB 下载StudentApplication.API.zip - 11.5 KB 介绍 在上一篇文章中,我们了解了实体框架的 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- 构建一个用于产品介绍的WEB应用
为了让用户更好地了解您的产品功能,您在发布新产品或者升级产品功能的时候,不妨使用一个产品介绍的向导,引导用户熟悉产品功能和流程.本文将给您介绍一款优秀的用于产品介绍的WEB应用. 就像微博或邮箱这类W ...
- 从零开始构建一个的asp.net Core 项目
最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程. 首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5).我们会在页面上看到"He ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
- 快速构建一个使用axios的vue应用程序（转）
英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...
随机推荐
- 关于CSS居中问题的一些总结
前端页面开发中关于内容居中的需求应用概率很大,自己搜集一些资料和总结关于css里的几种居中效果实现 第一常用text-align:center先将子元素将块级元素改为行内元素,即display:inl ...
- localstorage浏览器储存
需求 a.html页面生成订单信息,b.html中调用. 通过不操作数据库,直接在浏览器自带的数据库中进行操作,当然主要是对Json数据的操作. a.html代码部分: <!--html--&g ...
- 使用java短信验证
package cn.geekss.util; import java.io.BufferedReader;import java.io.InputStreamReader;import java.i ...
- Kubernetes Jenkins动态创建Slave
目录 0.前言 1.Jenkins部署 2.配置jenkins动态slave 3.dubbo服务构建 3.1.制作dubbo镜像底包 3.2.制作slave基础镜像 3.2.1.Maven镜像 3.2 ...
- 2020ubuntu1804server编译安装redis5笔记（二）配置redis
前一篇笔记记录了ubuntu1804server编译安装redis5,接下来要配置redis5了 网址:https://www.cnblogs.com/qumogu/p/12435694.html 第 ...
- 编译 openwrt 及初始配置
主机为 ubuntu 14 x64 硬件: 优酷土豆宝 cpuMT7620A,内存128M,flash 32M有2个源,用哪个也可以git clone https://github.com/openw ...
- docker 编译开发代码做镜像
文件目录 Dockerfile 是docker制作镜像的文件,docker_run.sh是sh文件,gin_test是go编译之后的linux可执行程序,gintest.env是配置文件夹 首先写一个 ...
- etcdctl的使用
etcdctl是一个提供简洁命令的etcd客户端,使用etcdctl可以直接和etcd服务打交道,对etcd中的键值对进行增删改查. 安装etcdctl 下载etcdctl工具 下载地址:etcdct ...
- Linux监控系统相关资源和运行状态命令整理
#前言:Linux系统自带了些实时查看监控系统运行状态的相关命令,接下来我们就来了解一下. #首先我们先来了解一下什么是进程 #进程:是Linux用来表示正在运行的程序的一种抽象概念,Linux系统上 ...
- Core + Vue 后台管理基础框架4——前端授权
1.前言 上篇,我们讲了后端的授权.与后端不同,前端主要是通过功能入口如菜单.按钮的显隐来控制授权的.具体来讲,就是根据指定用户的制定权限来加载对应侧边栏菜单和页面内的功能按钮.我们一个个来讲. 2. ...