2个DIV制作十字架

最新推荐文章于 2023-10-10 16:43:47 发布
最新推荐文章于 2023-10-10 16:43:47 发布
阅读量4.7k 收藏 2
点赞数
分类专栏： HTML/CSS 文章标签： div html ie 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu1988renhui/article/details/7536123
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>十字架制作</title>
<style type+"text/css">
body
{
    margin:0;
    height:100%;
    width:100%;
}   
#h
{	
    width:100%;
    height:50px;
    background:red;
    position:absolute;
    top:50%;
    margin-top:-25px;	
}
#v
{
    width:50px;
    height:100%;    
    position:absolute;
    left:50%;
    margin-left:-25px;
    background:red;
}
</style>
</head>
<body>
    <div id="h"></div>
    <div id="v"></div>
</body>
</html>

刚测试时发现在IE下水平居中的DIV无法显示高度，原来IE6下的body不是100%的默认高度
joannazhu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用1个标签，2个标签，3个标签，5个标签实现一个十字架
fendouzhe123的专栏
12-19 1101
2、请使用1个标签，2个标签，3个标签，5个标签实现一个如下图的水平、垂直都居中短边为50px，长边为150px的在界面垂直和水平居中红色十字架。（网上已经很多答案，你还能想到哪些方法，不限浏览器） 实现代码如下： /**包裹div样式*/ div.container{ width: 150px; height:150px; float:left;
两个div实现十字架
monkindey的专栏
03-15 5321
先不用说什么，直接上效果图 好像是医院的标志似的。 那这个是怎么做出来的呢？我先讲讲我的思路吧！首先只用了两个div的话，我们只能把这个十字架分成两部分，那是哪两部分呢？ 一个是横的，一个是竖的。 先说横的div要具备的属性，首先高度为50px 、宽度为150px 、背景颜色为红色 而对于竖的呢，高度为150px 、宽度为50px 、背景颜色为红色。 那我们就先来做个雏形吧
html用div做十字架,腾讯面试题：用一个div创建一个十字架
weixin_29147347的博客
06-16 1573
去腾讯面试了一趟，做了一套css的笔试题，其中有一道印象深刻：用一个div做出红色十字架。思路遇到这种题保持冷静不要慌，想想什么能用上。一开始我想的是把一个正方形的四个角挖掉(用四个白色正方形遮盖住四个角)，后来发现还是不太好实现，接着想想其实可以用after和before伪类。这道题的难点在于捋清思路，要想到利用伪类为自己创造条件。原理原理是利用伪类before和after创造出两条直线，利用绝...
css前端笔试题--分别用2、3、5个div实现十字架效果
airshine的专栏
10-13 902
两个： [code="html"] div{ background:red; position:absolute; top:50%; left:50%; width:50px; height:50px; } #d1{ width:150px; margin: -25px 0px 0px -75px; } #d2{ height:150p...
html图片十字形,CSS3 十字架
weixin_36012215的博客
06-04 688
CSS语言：CSSSCSS确定body {background-color: #222;}.cross {height: 400px;width: 300px;background-color: #111;position: relative;margin: 0 auto;box-shadow: 0px 0px 30px #111, inset 0px 0px 10px #000;margin-t...
怎么用一个元素实现十字架
Wonder
10-12 884
先上最终效果图： 利用:before和:after伪类实现 css代码： 总结：就是给一个宽50px，高150px的div前后加了两个宽高都为50px的正方形。
html制作十字架,使用重构的方式制作出一个红色十字架
weixin_35307279的博客
06-10 1300
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架使用2个div完成#heng,#shu{left:50%;top:50%;position:absolute;background-color:#f00;}#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}#heng{width...
CSS定位“十字架”之水平垂直居中
12-13
可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。 看实现代码： XML/HTML Code复制内容到剪贴板 <html>  <head>  <title></...
通过float实现两个div不换行
09-25
实现两个div不换行最常用的方法莫过于使用css的float属性，下面有个小示例，大家可以参考下
div和css制作斜线示例分享
12-13
2、DIV在 IE6 中默认是有高度的。 上图右边是我们要实现的效果，代码如下： 复制代码代码如下:<div id=”box”></div> <p><style type=”text/css”>#box{width:0px; height:0px;border:40px solid #000;...
让两个Div并排显示的多种方法
09-25
让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本
前端小练——CSS如何做十字图样
m0_45293340的博客
07-18 1534
CSS如何做十字图样
css画十字架和靶心图标
程序媛的博客
10-10 603
css画十字架和靶心
HTML+CSS大风车及十字架的实现
记录编程生活
08-31 5391
说起大风车勾起了多少人的回忆， 我们今天就利用CSS做一个大风车并且让它转起来。 首先还是老规矩——先上效果图： 一................ 不是说好了转起来的吗？怎么在哪
div中间十字线
weixin_42388503的博客
06-29 2193
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;1&lt;/title&gt;       &lt;style&gt;        *{            padding: 0;            marg
css3 实现十字光标和光标外圆圈环绕
现在学习也不晚
07-18 3789
实现十字光标其实很简单，用更原始的方法也可以实现，本例使用伪类：after和：before来进行定位实现。 第二个案例鼠标悬停，所有的外圆的一圈点会跟随着一个一个的变动颜色， 在鼠标悬停上后，会一个一个的变成蓝色。这个也只是用到了css3的过渡，其实，也没有什么难度。只要基础打的好，都可以写出来，里面的dom和css样式，都是通过js循环生成的，因为样式都一样，只是数值有区别。
CSS 实现十字架代码
weixin_34228662的博客
09-05 1836
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { ...
前端进阶---制作一个由5个100*100DIV组成的十字架---
奔跑的小小牛
03-09 1727
前端进阶—制作一个由5个100*100DIV组成的十字架—制作一个由5个100*100DIV组成的十字架（如➕），中间放一张icon（自己喜欢的64*64的小图片）在DIV里垂直水平居中，每一个DIV要有边框阴影尽量的让其漂亮。easyicon 可在此寻找对应的图片。* { padding: 0; margin: 0; }.content { width: 300px;
flex十字架网页制作
最新发布
11-14
以下是使用flex布局制作十字架网页的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Flex Cross Layout</title> <style type="text/css"> body { margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } header, footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } main { display: flex; flex: 1; } aside { background-color: #f2f2f2; padding: 10px; flex-basis: 200px; } section { flex: 1; display: flex; flex-direction: column; } section > div { flex: 1; display: flex; flex-direction: row; } section > div > div { flex: 1; padding: 10px; } #left-top { background-color: #f2f2f2; } #left-bottom { background-color: #d9d9d9; } #right { background-color: #e6e6e6; } </style> </head> <body> <header> <h1>Header</h1> </header> <main> <aside> <h2>Aside</h2> <p>Some content here</p> </aside> <section> <div> <div id="left-top"> <h2>Left Top</h2> <p>Some content here</p> </div> <div id="right"> <h2>Right</h2> <p>Some content here</p> </div> </div> <div> <div id="left-bottom"> <h2>Left Bottom</h2> <p>Some content here</p> </div> <div id="right"> <h2>Right</h2> <p>Some content here</p> </div> </div> </section> </main> <footer> <h3>Footer</h3> </footer> </body> </html> ``` 这个示例代码使用了flex布局来实现一个十字架网页，其中header和footer分别是顶部和底部的导航栏，main是整个页面的主体部分，包括aside和section两个部分。aside是左侧的导航栏，section是右侧的内容区域，包括两个div，每个div又包括左右两个子div。这个布局可以根据实际需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值