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/ ...
随机推荐
- 必备技能二、es6
一.ES6模块 ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量. ES6 的模块化分为导出(export) @与导入(import)两个模块. 特点 ES6 的 ...
- Resource interpreted as Stylesheet but transferred with MIME type text/html： css失效
异常信息: Resource interpreted as Stylesheet but transferred with MIME type text/html: 可能原因 过滤器或者某个地方对所有 ...
- C++ STL迭代器原理和简单实现
1. 迭代器简介 为了提高C++编程的效率,STL(Standard Template Library)中提供了许多容器,包括vector.list.map.set等.然而有些容器(vector)可以 ...
- ggplot2（1） 简介
1.1 简介 ggplot2是一个用来绘制统计图形(数据图形)的R软件包,与其他大多数的图形软件包不同,ggplot2是由其背后的一套图形语法所支持的.ggplot2可以绘制出很多美观度的图形,同时能 ...
- AspNetCore3.1_Middleware源码解析_3_HttpsRedirection
概述 上文提到3.1版本默认没有使用Hsts,但是使用了这个中间件.看名字就很好理解,https跳转,顾名思义,就是跳转到 https地址. 使用场景,当用户使用http访问网站时,自动跳转到http ...
- css中：link和@import的区别
两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...
- 代码备份 | 博客侧边栏公告（支持HTML代码）（支持JS代码）
博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...
- 动态表单数据验证 vue
idCard: [{ validator: (rule, value, callback) => { if (this.idCardVif === 'idCard') { this.valida ...
- mysql事务原理及MVCC
mysql事务原理及MVCC 事务是数据库最为重要的机制之一,凡是使用过数据库的人,都了解数据库的事务机制,也对ACID四个 基本特性如数家珍.但是聊起事务或者ACID的底层实现原理,往往言之不详,不 ...
- layui radio 单选框 效果 显示不来 解决方法
$("input[name=sex][value=女]").attr("checked", data.data.adminInfoEntity.adminInf ...