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/ ...
随机推荐
- OC和C++混编需要注意的问题
文章首发于github.io 2018-12-17 21:01:55 方案一 1. .c文件的identify and type右边栏修改为Objective-C source 2. Built se ...
- 复习笔记——1. C语言基础知识回顾
1. 数据类型 1.1 基本数据类型 整型:int, long,unsigned int,unsigned long,long long-- 字符型:char 浮点型:float, double-- ...
- java的权限控制
java有三个权限的关键字:public.private.protected public:对任何人都可以使用. private:只有类的创建者和内部的方法可以使用,它的导出类也不可以访问. prot ...
- 详细解析kafka之kafka分区和副本
本篇主要介绍kafka的分区和副本,因为这两者是有些关联的,所以就放在一起来讲了,后面顺便会给出一些对应的配置以及具体的实现代码,以供参考~ 1.kafka分区机制 分区机制是kafka实现高吞吐的秘 ...
- 浅谈Java中静态代码块和非静态代码块
静态代码块: static{} 执行优先级高于非静态的初始化块,它会在类初始化(类初始化这个问题改天再详细讨论)的时候执行一次,执行完成便销毁,它仅能初始化类变量,即static修饰的数据成员. 非静 ...
- javaee作业
一.单选题(共5题,50.0分) 1 在SqlSession对象的openSession()方法中,不能作为参数executorType的可选值 的是( ). A. ExecutorTyp ...
- 五分钟学Java：如何学习Java面试必考的JVM虚拟机
原创声明 本文首发于微信公众号[程序员黄小斜] 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 本文思维导图 为什么要学习JVM虚拟机 最近的你有没有参加Java面试呢?你有没有发现,Java ...
- [POI2017]bzoj4726 Sadota?
题目描述 离线题库请 题目描述 某个公司有\(n\)个人, 上下级关系构成了一个有根树.其中有个人是叛徒(这个人不知道是谁).对于一个人, 如果他 下属(直接或者间接, 不包括他自己)中叛徒占的比例超 ...
- HTTP中主要的头字段
HTTP中主要的头字段 头字段类型 含义 备注 通用头:适用于请求和响应消息的头字段 Date 表示请求和响应生成的日期 Pragma 表示数据是否允许缓存的通信选项 Cache-Contro ...
- 【Weiss】【第03章】练习3.6：有序多项式相加
[练习3.6] 编写将两个多项式相加的函数.不要毁坏输入数据.用一个链表实现. 如果这两个多项式分别有M项和N项,那么你程序的时间复杂度是多少? 两个按幂次升序的多项式链表,分别维护一个指针. 幂较小 ...