两个：
<!DOCTYPE HTML>
<html>
<style type="text/css">
div{
background:red;
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
}
#d1{
width:150px;
margin: -25px 0px 0px -75px;
}
#d2{
height:150px;
margin: -75px 0px 0px -25px;
}
</style>
<body>
<!-- 用两个div实现十字架 -->
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
三个：
<!DOCTYPE HTML>
<html>
<style type="text/css">
div{
background:red;
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
}
#d1{
margin: -75px 0px 0px -25px;
}
#d2{
width:150px;
margin: -25px 0px 0px -75px;
}
#d3{
margin: 25px 0px 0px -25px;
}
</style>
<body>
<!-- 用三个div实现十字架 -->
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
五个：
<!DOCTYPE HTML>
<html>
<style type="text/css">
div{
background:red;
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
}
#d1{
margin: -75px 0px 0px -25px;
}
[id ^= d2]{
margin: -25px 0px 0px -25px;
}
#d2_1{
margin-left:-75px;
}
#d2_3
{
margin-left:25px;
}
#d3{
margin: 25px 0px 0px -25px;
}
</style>
<body>
<!-- 用五个div实现十字架 -->
<div id="d1"></div>
<div id="d2_1"></div>
<div id="d2_2"></div>
<div id="d2_3"></div>
<div id="d3"></div>
</body>
</html>
分享到：
相关推荐
Web前端开发工程师笔试题-CSS+Javascript 本资源提供了Web前端开发工程师笔试题，涵盖了CSS和Javascript相关知识点，总共22道题，涵盖了CSS样式表、HTML标签、Javascript语法、Document对象、CSS选择符、CSS样式...
前端开发的笔试题目及答案，用于筛选前端初级、中级、高级人才。 目前用于筛选初、中级。 正在找工作或者面试的前端开发，可以练习学习一下。 正在招前端开发的leader，可以参考，用于招聘。 陆续每年更新不同的题目...
【标题】"Web前端初级---模拟题-5套.zip"所涵盖的知识点主要集中在Web前端开发的初级阶段，包括HTML、CSS、JavaScript等基础技术，以及网页布局、响应式设计和基本交互效果的实现。这个压缩包可能包含了五套完整的...
5、CSS3动画知道吗，实现过哪些css3动画 6、html页面渲染方式和流程 阅读建议：此资源覆盖了前端技术栈中Html+css全部知识点，知识点较多，所以在背题的过程要结合这些内容一起来实践，并调试对应的代码
5. **集成与扩展**：尽管 Semantic UI CSS 不包含 JavaScript，但原始的 Semantic UI 项目提供了完整的 JavaScript 插件，可以与 CSS 版本结合使用，实现更丰富的交互功能。此外，由于其开源性质，开发者还可以根据...
CSS也可以使用滤镜来实现一些特殊的效果，例如将图片变成黑白色： ```css img { filter:gray; } ``` 本笔记涵盖了DIV+CSS的基本概念和应用，包括DIV的介绍、CSS的基本语法、CSS的分类、使用CSS统一网站风格、使用...
总之，`typed-css-modules-loader` 是一个强大的工具，它提升了前端开发中的CSS模块化体验，尤其是在使用TypeScript的项目中。通过整合Webpack和TypeScript，它促进了前端代码的整洁性和可维护性，是现代Web开发中的...
HTML5/CSS3 面试题及答案 - CSS 篇 本文档提供了 HTML5/CSS3 面试题及答案，涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面。 CSS3 的新特性 * 实现圆角（border-radius） * 阴影（box-shadow）...
2. CSS3样式：如选择器的使用，布局方式（Flexbox或Grid），动画和过渡效果等。 3. JavaScript编程：包括基本语法，DOM操作，事件处理，异步编程（Promise或async/await）等。 4. 响应式设计：如何根据不同的设备...
本项目名为"前端项目-css-loader"，其核心是利用CSS Loader实现一个只使用一个DIV和纯CSS的Web应用程序的简单加载程序。 首先，我们要理解什么是webpack。Webpack是一个现代JavaScript应用程序的静态模块打包工具。...
### HTML5与CSS3 Web前端开发技术习题答案解析 #### 第一章 ##### 1.1 简答题 **（1）HTML5与HTML4比较，主要解决了哪些问题？** HTML5作为HTML4的升级版，在Web前端开发方面解决了一系列关键问题，主要体现在...
【百度前端招聘专场笔试题】是2012年5月份百度公司针对前端开发者进行的一次专业笔试，旨在考察应聘者的前端技术基础和实际问题解决能力。以下将详细解析题目内容，帮助理解这些核心知识点： 一、-moz-opacity, -...
《前端开源库-CSS-Find-Assets：洞察CSS资源的宝藏探索》 在现代Web开发中，CSS（层叠样式表）扮演着至关重要的角色，它负责赋予网页以美观的外观和交互效果。然而，随着项目规模的扩大，CSS文件往往会包含大量链接...
根据提供的前端笔试题内容，我们可以总结出一系列重要的前端知识点，涉及HTML、CSS以及JavaScript的基础概念和技术要点。下面是对这些知识点的详细解释： ### 1. 块级元素与内联元素 - **块级元素**（Block ...
这是一份关于Web前端工程师的笔试题目，主要涵盖了图形推理、CSS属性理解、JavaScript操作、URL解析、数据结构以及二进制数据处理等多个知识点。 1. 图形推理题：这是典型的逻辑推理题，考察的是观察力和规律识别...
- 字符串类笔试题 - JS笔试题 - 如何应对HR⾯ - 如何应对项⽬⾯ - 如何写简历 从前端基础，到网络协议，再到浏览器原理，前端工程化，前端流行框架，前端安全处理，工程化，算法相关，简历优化 适合人群： - 前端...
6. **动画效果**：如果需要动态显示大括号，可以使用CSS3的`transition`或`animation`属性来创建平滑的过渡或动画效果。 在提供的压缩包中，`css+div实现大括号.html`很可能是包含示例代码的HTML文件，它演示了如何...
本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例，特别是3D按钮和层模拟窗口移动的效果，这些都是现代网页设计中非常流行和实用的元素。 首先，3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置，并介绍CSS3中的背景渐变。 首先，我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值，每个值可以是 `none...