div中间十字线

最新推荐文章于 2022-07-18 12:00:21 发布
转载 最新推荐文章于 2022-07-18 12:00:21 发布 · 2.2k 阅读 · 1

本文介绍了一种使用CSS实现商品列表无缝布局的方法。通过调整元素的边界和间距，使得列表中的每个商品项紧密排列，同时保持良好的视觉效果。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>1</title>
       <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            overflow: hidden;
            width: 160px;
            margin: 50px;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            height: 100px;
            width: 50px;       
            border-left:1px solid red;          /*设置左边框*/
            border-bottom: 1px solid red;         /*设置下边框*/
            margin-left: -1px;
            /*-1后在父容器下面了，所以看不到*/
            margin-bottom: -1px;   
        }
    </style>
    </head>
<body>


    <div>
        <ul>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
            <li>商品</li>
        </ul>
    </div>

</script>

</body>
</html>
两个div实现十字架
monkindey的专栏
03-15 5468
先不用说什么，直接上效果图 好像是医院的标志似的。 那这个是怎么做出来的呢？我先讲讲我的思路吧！首先只用了两个div的话，我们只能把这个十字架分成两部分，那是哪两部分呢？ 一个是横的，一个是竖的。 先说横的div要具备的属性，首先高度为50px 、宽度为150px 、背景颜色为红色 而对于竖的呢，高度为150px 、宽度为50px 、背景颜色为红色。 那我们就先来做个雏形吧
图像处理------＞十字补线
xyzhouhh的博客
09-22 1161
图像处理------＞十字补线
WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字
FengInYe的博客
11-06 963
看到一道面试题，如题，试着来做做，采用两种方法：法一，设几个DIV，再调；法二，按照参考书上的做法。 法一：(方法不一定好，欢迎多多交流。) 法二： 具体思想为：两个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并；三个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并，然后在外面包一个空的DIV盒
html用div做十字架,腾讯面试题：用一个div创建一个十字架
weixin_29147347的博客
06-16 1696
去腾讯面试了一趟，做了一套css的笔试题，其中有一道印象深刻：用一个div做出红色十字架。思路遇到这种题保持冷静不要慌，想想什么能用上。一开始我想的是把一个正方形的四个角挖掉(用四个白色正方形遮盖住四个角)，后来发现还是不太好实现，接着想想其实可以用after和before伪类。这道题的难点在于捋清思路，要想到利用伪类为自己创造条件。原理原理是利用伪类before和after创造出两条直线，利用绝...
通过css切割隐藏外边框，实现十字架或者网格效果
weixin_39150852的博客
09-29 1538
实现代码： &amp;lt;style type=&quot;text/css&quot;&amp;gt; div{ margin: 40px; width: 320px; height: 300px; overflow: hidden;/*超出部分隐藏,切割掉下边框和右边框*/ } div ul{ /*一个li元素宽度为81px,width大小只要大于（81 x...
2个DIV制作十字架
zhu1988renhui的专栏
05-04 4788
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd 十字架制作 body { margin:0; height:100%; width:100%; } #h { width:100%; heig
``` <!DOCTYPE html> <html> <head> <title></title> <style> body { background-color: #000; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; } #centerCrosshair { position: absolute; width: 20px; /* 十字线宽度 */ height: 20px; /* 十字线高度 */ top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 使用伪元素创建水平和垂直线 */ #centerCrosshair::before, #centerCrosshair::after { content: ''; position: absolute; background-color: red; } /* 水平线 */ #centerCrosshair::before { width: 100px; /* 水平线长度 */ height: 3px; /* 水平线粗细 */ left: 50%; transform: translateX(-55%); } /* 垂直线 */ #centerCrosshair::after { width: 3px; /* 垂直线粗细 */ height: 100px; /* 垂直线长度 */ top: 50%; transform: translateY(-55%); } #movableCrosshair { position: absolute; width: 0; /* 容器尺寸清零 */ height: 0; transform: translate(-50%, -50%); /* 中心点对齐 */ top: calc(50% + 20px); /* 初始位置 */ left: calc(50% + 20px); } /* 水平线 */ #movableCrosshair::before { content: ''; position: absolute; width: 100px; /* 十字线水平长度 */ height: 2px; /* 线粗 */ background: #00f7ff; transform: translateX(-45%); /* 向左偏移一半宽度 */ } /* 垂直线 */ #movableCrosshair::after { content: ''; position: absolute; width: 2px; /* 线粗 */ height: 100px; /* 十字线垂直长度 */ background: #00f7ff; transform: translateY(-45%); /* 向上偏移一半高度 */ } </style> </head> <body> <div id="centerCrosshair"></div> <div id="movableCrosshair"></div> <script> document.addEventListener('keydown', function(event){ const crosshair = document.getElementById('movableCrosshair'); let style = window.getComputedStyle(crosshair); let topValue = parseInt(style.getPropertyValue('top')); let leftValue = parseInt(style.getPropertyValue('left')); switch (event.key) { case 'ArrowUp': crosshair.style.top = `${topValue - 1}px`; break; case 'ArrowDown': crosshair.style.top = `${topValue + 1}px`; break; case 'ArrowLeft': crosshair.style.left = `${leftValue - 1}px`; break; case 'ArrowRight': crosshair.style.left = `${leftValue + 1}px`; break; } }); </script> </body> </html>```给movableCrosshair十字线加上刻度，将优化后的代码直接整体输出
03-09
好的，我需要帮用户给movableCrosshair十字线加上刻度，并优化代码。首先，我得理解现有的代码结构和十字线的实现方式。 用户提供的代码中，movableCrosshair使用伪元素::before和::after来创建水平和垂直的线。...
``` <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; } #centerCrosshair, #movableCrosshair { position: absolute; width: 100px; /* 可调整 */ height: 5px; /* 可调整 */ background-color: red; } #centerCrosshair { top: 50%; left: 50%; transform: translate(-50%, -50%); } #movableCrosshair { top: calc(50% + 20px); /* 初始偏移量 */ left: calc(50% + 20px); } </style> </head> <body> <div id="centerCrosshair"></div> <div id="movableCrosshair"></div> <script> document.addEventListener('keydown', function(event){ const crosshair = document.getElementById('movableCrosshair'); let style = window.getComputedStyle(crosshair); let topValue = parseInt(style.getPropertyValue('top')); let leftValue = parseInt(style.getPropertyValue('left')); switch (event.key) { case 'ArrowUp': crosshair.style.top = `${topValue - 1}px`; break; case 'ArrowDown': crosshair.style.top = `${topValue + 1}px`; break; case 'ArrowLeft': crosshair.style.left = `${leftValue - 1}px`; break; case 'ArrowRight': crosshair.style.left = `${leftValue + 1}px`; break; } }); </script> </body> </html>```你可以把movableCrosshair的样式修改成瞄准十字线么
03-09
所以，回到原来的代码，movableCrosshair是一个div，现在需要将其样式改为十字线。原来的样式是宽度100px，高度5px，红色，绝对定位。 要改为十字线，可以这样做： 将movableCrosshair的宽度和高度设为更小的值，...
linear-gradient渐变从中间向周边
最新发布
08-08
具体来说，我们可以使用四个线性渐变，分别从中心向上、下、左、右四个方向渐变，组合成一个十字形，然后通过设置背景的位置和大小，让它们叠加在一起，形成从中心向四周的渐变。 但是，这种方法比较复杂，而且...
用HTML+CSS+Jquery做一个大屏数据可视化模板,要求科技感,要求:中间一个圆,圆里有个长方形写标题,圆的周围有5个长方形,用来展示百分比数据.要求ie10可以正常打开,
07-16
我们要求中间一个圆，圆里面有一个长方形（实际可以是div）写标题，周围有5个长方形（div）展示百分比数据，并且兼容IE10。 由于IE10对CSS3的支持有限，我们需要避免使用一些高级特性，或者使用兼容性写法。 设计...
使用div实现progress进度条
 我的博客
11-07 465
在百度上搜了很多方法去修改HTML5 progress的样式，然而并没有实现。 所以自己用div实现了一个。 简单粗暴(*＾-＾*) 可以在CSS里改样式，可以JS里改进度。 [img]http://dl2.iteye.com/upload/attachment/0121/0690/7ed605e1-ab38-3145-a91d-bbc6b32c7c36.png[/img] [c...
用css来实现十字的布局
weixin_30588675的博客
06-06 450
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><m...
前端小练——CSS如何做十字图样
m0_45293340的博客
07-18 1805
CSS如何做十字图样
html在div中加分割线,[CSS]几种实现分割线的方法
weixin_29133959的博客
06-04 5512
HTML结构小小分隔线 单标签实现小小分隔线 巧用色实现小小分隔线 inline-block实现小小分隔线 浮动来实现———————————小小分隔线 字符来实现————————————对应的CSS.demo{width:600px}.line_01{padding:0 20px 0;margin:20px 0;line-height:1px;border-left:200px solid #dd...
html图片十字形,在CSS中创建十字形
weixin_39973416的博客
06-04 766
您可以使用只有伪元素的方式来实现：#cross {width: 100px;height: 100px;position: relative;}#cross:before,#cross:after {content: "";position: absolute;z-index: -1;background: #d00;}#cross:before {left: 50%;width: 30%;mar...
练习：红色十字架
weixin_42077503的博客
03-09 1210
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。 十字架 要求： 1.使用2个div完成 2.使用3个div完成 3.使用5个div完成 答案： 1个div： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
CSS实现表格无外边框效果（只有内十字）
greystar的专栏
09-04 1万+
效果如下：代码如下：                                                 table{                 margin:auto;                 width:300px;                border-collapse:collapse;             }             th,
HTML在两个div标签中间画一条竖线
热门推荐
李丑的博客
10-10 6万+
小弟我是新手。近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。   往常我们画一条横线直接用标签即可，当画一条竖线的时候发现找不到标签。在网上查找了一下资料，大致推荐用js来做。小弟比较偏执想用纯css来做，最终找到了解决方法，下面我就来分享一下我的做法。     在两个子div中加
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值