两个:
<!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.doc
5、CSS3动画知道吗,实现过哪些css3动画 6、html页面渲染方式和流程 阅读建议:此资源覆盖了前端技术栈中Html+css全部知识点,知识点较多,所以在背题的过程要结合这些内容一起来实践,并调试对应的代码
HTML+CSS笔试题-答案.docx
这里将收集我做过的所有的前端面试笔试题,并根据自己的理解提供解答,以及一些关于前端找工作方面的经验等。 前端笔试面试题部分 试题链接 原题概述 标签分类 1.md CSS部分 CSS 2.md HTML部分 HTML 3.md FEX ...
前端项目-css3-animate-it,css3/jquery插件,用于在元素进入视图时对其进行动画处理
前端开源库-postcss-css-variablespostcss css变量,postcss插件,用于将css自定义属性(css变量)语法转换为静态表示形式
前端开源库-postcss-px-to-viewportpostss px to viewport,一种将px转换为viewport单位(vw、vh、vmin、vmax)的CSS后置处理器。
前端开源库-postcss-px-to-viewport.zip
html5css3面试题及答案,前端面试题及答案-CSS篇.docx
前端开源库-postcss-variablespostss变量,postss插件,用于将变量转换为css
前端开源库-typed-css-modules-loader类型化CSS模块加载器,类型化CSS模块的Webpack加载器
- 字符串类笔试题 - JS笔试题 - 如何应对HR⾯ - 如何应对项⽬⾯ - 如何写简历 从前端基础,到网络协议,再到浏览器原理,前端工程化,前端流行框架,前端安全处理,工程化,算法相关,简历优化 适合人群: - 前端...
最新大厂前端面试题-面试指南css篇面试题.docx
前端开源库-css-sprite-loaderCSS Sprite加载器,一个将png转换为sprite图像的Webpack加载器
前端开源库-css-background-videoCSS背景视频,一个支持背景视频作为CSS属性的HTML5填充程序
前端开源库-css-to-radiumcss to radium,radium migration cli,将css转换为与radium兼容的js对象
网页前端开发笔试题含html、css、javascript。内含答案地址
前端开源库-css-color-converterCSS颜色转换器,将CSS颜色从一种表示形式转换为另一种表示形式
前端开源库-semantic-ui-css语义用户界面CSS,仅CSS分布的语义用户界面
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 第三天:定义语言编码 第四天:调用样式表 第五天:HEAD区的其他设置 第六天:XHTML代码规范 第七天:CSS入门 ...