两个：
<!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样式...
web前端笔试题（含答案） 这个文件包含了多个 web 前端相关的知识点，涵盖了 HTML、CSS、JavaScript、AngularJS、Vue.js 等领域。下面是对每个知识点的详细解释： 1. 前端页面有哪三层构成？ 答：结构层（Html）、...
前端开发的笔试题目及答案，用于筛选前端初级、中级、高级人才。 目前用于筛选初、中级。 正在找工作或者面试的前端开发，可以练习学习一下。 正在招前端开发的leader，可以参考，用于招聘。 陆续每年更新不同的题目...
【标题】"Web前端初级---模拟题-5套.zip"所涵盖的知识点主要集中在Web前端开发的初级阶段，包括HTML、CSS、JavaScript等基础技术，以及网页布局、响应式设计和基本交互效果的实现。这个压缩包可能包含了五套完整的...
5、CSS3动画知道吗，实现过哪些css3动画 6、html页面渲染方式和流程 阅读建议：此资源覆盖了前端技术栈中Html+css全部知识点，知识点较多，所以在背题的过程要结合这些内容一起来实践，并调试对应的代码
这里将收集我做过的所有的前端面试笔试题，并根据自己的理解提供解答，以及一些关于前端找工作方面的经验等。 前端笔试面试题部分 试题链接 原题概述 标签分类 1.md CSS部分 CSS 2.md HTML部分 HTML 3.md FEX ...
5. **集成与扩展**：尽管 Semantic UI CSS 不包含 JavaScript，但原始的 Semantic UI 项目提供了完整的 JavaScript 插件，可以与 CSS 版本结合使用，实现更丰富的交互功能。此外，由于其开源性质，开发者还可以根据...
4. **Web前端笔试题与面试题** - 常见的前端面试问题可能涉及HTML5新特性、CSS布局、JavaScript基础、ES6语法、Promise和async/await等。 - Vue面试题可能涵盖Vue的组件通信、生命周期、状态管理、性能优化等。 ...
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, -...
根据提供的前端笔试题内容，我们可以总结出一系列重要的前端知识点，涉及HTML、CSS以及JavaScript的基础概念和技术要点。下面是对这些知识点的详细解释： ### 1. 块级元素与内联元素 - **块级元素**（Block ...
在前端开发领域，笔试题是评估开发者技能的重要方式，尤其对于腾讯、网易、去哪儿等知名公司来说，这些公司的笔试环节通常包含了一系列具有挑战性的题目，旨在测试候选人的基础理论知识、编程能力、问题解决和实际...
6. **动画效果**：如果需要动态显示大括号，可以使用CSS3的`transition`或`animation`属性来创建平滑的过渡或动画效果。 在提供的压缩包中，`css+div实现大括号.html`很可能是包含示例代码的HTML文件，它演示了如何...
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置，并介绍CSS3中的背景渐变。 首先，我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值，每个值可以是 `none...
【标题】"前端项目-css-element-queries.zip" 提供了一个前端开发中的创新解决方案，它涉及到CSS元素查询（Element Queries）这一概念。元素查询是CSS的一个潜在扩展，允许我们根据元素自身的尺寸来应用样式，而不...
"前端项目-css-spinning-spinners.zip" 是一个专门针对这一需求的资源包，它提供了一系列仅使用CSS实现的加载微调器（也称为加载指示器或加载动画）。这些微调器在网页内容加载过程中显示，为用户提供视觉反馈，让...
### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...