修改<hr/>的颜色

最新推荐文章于 2025-03-04 15:05:41 发布
原创 最新推荐文章于 2025-03-04 15:05:41 发布 · 579 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css 

hr{
    border-color: red;
}

或者

hr{
    background: red;
    height: 1px;
    border: none;
}
自定义HTML水平线（＜hr＞）的颜色及编程实现方法
TechProX的博客
10-01 1432
默认情况下，水平线的颜色是由用户代理（浏览器）决定的，但是我们可以使用CSS样式来自定义水平线的颜色。除了直接在HTML文件中使用内联样式，我们还可以将CSS样式定义为外部样式表，然后通过链接引入。元素添加style属性，并使用CSS的border属性来定义边框样式，我们可以改变水平线的颜色。通过使用内联样式或外部CSS样式表，我们可以轻松地改变水平线的颜色，以适应网页的设计需求。在上述代码中，我们通过标签引入了一个名为styles.css的外部CSS样式表。要自定义水平线的颜色，我们可以使用CSS样式。
如何改变hr标签的颜色
u012746918的博客
03-09 6493
<hr style='background-color:blue; height:1px; border:none;''/> hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗； 那是因为hr有默认的border，需要将它的边框去掉，设为border:none 以上三点缺一不可 ...
设置hr元素颜色
热门推荐
Inuyasha1121的专栏
07-15 4万+
说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color, 但是单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px 这样设置完后，在浏览器中可以看到线条变粗了，而且原来的灰色好像还是存在的 其实，hr是有默认的border的，我们需要将它的边框去掉，设为border:none
自定义设置hr的颜色
NINE-NINE的博客
05-14 6071
自定义设置hr的颜色
＜hr＞设置线条颜色
qq_43654065的博客
09-07 1340
hr{ background-color:red; /*设置新线条颜色。 */ height: 1px;/*设置高度会添加新设置的颜色，但hr中本来的灰色还是存在的。 */ border: none;/*去掉hr中本来的边框，即原本的灰色。 */ }
<hr/>修改横线的颜色
最新发布
10-02
<title>修改横线颜色</title> </head> <body> <!-- 赤色分割线 --> <hr class="layui-bg-red"> <!-- 橙色分割线 --> <hr class="layui-bg-orange"> <!-- 墨绿分割线 --> <hr class="layui-bg-green"> <!-- ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生管理系统</title> </head> <body> <h1>学生列表</h1> <a href="{{ url_for('logout') }}">登出</a> <form action="/add" method="post"> 姓名：<input type="text" name="name" required><br> 年龄：<input type="number" name="age" required><br> 地址：<input type="text" name="address" required><br> <button type="submit">添加学生</button> </form> <hr> <table border="1"> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>地址</th> <th>操作</th> </tr> {% for student in students %} <tr> <td>{{ student.id }}</td> <td>{{ student.name }}</td> <td>{{ student.age }}岁</td> <td>{{ student.address }}</td> <td> <a href="{{ url_for('update_student', id=student.id) }}">修改</a> <a href="{{ url_for('delete_student', id=student.id) }}">删除</a> </td> </tr> {% endfor %} </table> </body> </html> 美化一下这个index.html
06-25
<a href="{{ url_for('update_student', id=student.id) }}">修改</a> <a href="{{ url_for('delete_student', id=student.id) }}">删除</a> </td> </tr> {% endfor %} </table> </body> </html> ``` --- ##...
v_html := '<html><body>' || '<table border="1" cellpadding="5">' || '<tr><th>员工编号</th><th>姓名</th><th>工资</th></tr>'; 表头我想设为样式为绿色
05-12
因此，修改表头颜色应该是在现有的<style>部分中添加或修改对应的CSS规则。 可能的步骤包括：在HTML的<style>部分添加th选择器，设置background-color属性为绿色色值，例如#008000或#00FF00。同时，考虑到邮件...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2023610221 诸梦盈</title> <style> header{ width: 1200px; padding: 0; margin: 0 auto; box-sizing: border-box; } header h1{ text-align: center; } hr{ height: 2px; background-color: #aaaaff; border: none; } .gwc{ width: 1200px; margin: auto; } .bt{ width: 1200px; height: 50px; line-height: 50px; color:#aaaaff; font-size: 32px; } .tab{ margin-top: 20px; width: 1200px; border-collapse: collapse; } thead tr th{ height:50px; text-align: left; background-color: #aaaaff; padding-left: 10px; } thead tr th:nth-of-type(1){ width: 80px; } img{ width: 60px; height: 60px; } td{ height: 80px; padding-left: 10px; border-bottom: 2px solid #aaaaff; } .btn1{ background-color:#aaaaff; border: none; width: 20px; height: 20px; } input{ width: 18px; } .sc{ background-color: crimson; width: 50px; height: 30px; border: 0; color: white; } #yhq,#jsxx{ width: 1200px; height: 50px; line-height: 50px; color:#aaaaff; font-size: 32px; padding: 10px 0px; } .yhzc{ display: flex; flex-wrap: wrap; padding-right: 20px; margin:auto; width: 1200px; } .yhqbh { background-color: blue; color: white; } #yhq1,#yhq2,#yhq3{ width: 380px; height: 100px; margin:auto; background-color: #aaaaff; border: 2px dotted #aa55ff; color: white; text-align: center; } .js{ width: 1200px; } .jswz{ height: 50px; background-color: #aaaaff; } .js-title{ margin: 5px; padding-right: 5px; font-size: 15px; } #zongshu,#zongjia,#shuliang,#manjian,#yinfu{ float: right; padding: 5px; } .yfje{ font-size: 20px; color: blueviolet; } #yinfu{ font-size: 20px; color: blueviolet; } #jsbtn{ margin-top: 10px; background-color: #aaaaff; width: 50px; height: 30px; color: white; float: right; } /* 弹窗 (background) */ .tc { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; } #jsxq{ font-size: 32px; font-weight: bold; padding-bottom: 20px; } .close{ float: right; font-size: 32px; } .close:hover{ color:red; } /* 弹窗内容 */ .tc-content { position: relative; background-color: #fefefe; margin:auto; border: 1px solid #888; width: 600px; } </style> </head> <body> <header> <h1>学生文具购物车</h1> <hr /> </header> <section class="gwc"> <div class="bt"> <span>已选商品</span> <hr /> </div> <table class="tab"> <thead> <tr> <th>图片</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr id="product1"> <td> <img src="img/pic1.jpg"/> </div> </td> <td> <div class="ms-name">2B铅笔（12支笔）</div> <div class="ms1">优质木质拖拽，书写顺畅，不粘附</div> </td> <td > <span class="original-price">¥15.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(1, -1)">-</button> <input type="text" class="quantity-input" id="qty1" value="1" readonly> <button class="btn1" onclick="updateQuantity(1, 1)">+</button> </td> <td > <div class="jg" id="jg1">¥15</div> </td> <td > <button class="sc" onclick="removeProduct(1)"> 删除 </button> </td> </tr> <tr id="product2"> <td> <img src="img/pic2.jpg"/> </div> </td> <td> <div class="ms-name">A5笔记本</div> <div class="ms1">优质纸张，方格设计，适合日常记录<div> </td> <td > <span class="original-price">¥12</span> </td> <td > <button class="btn1" onclick="updateQuantity(2, -1)">-</button> <input type="text" class="quantity-input" id="qty2" value="1" readonly> <button class="btn1" onclick="updateQuantity(2, 1)">+</button> </td> <td > <div class="jg" id="jg2">¥12</div> </td> <td > <button class="sc" onclick="removeProduct(2)"> 删除 </button> </td> </tr> <tr id="product3"> <td> <img src="img/pic3.jpg"/> </div> </td> <td> <div class="ms-name">彩色荧光笔（5色）</div> <div class="ms1">多彩荧光标记笔，不易洇染</div> </td> <td > <span class="original-price">¥18.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(3, -1)">-</button> <input type="text" class="quantity-input" id="qty3" value="1" readonly> <button class="btn1" onclick="updateQuantity(3, 1)">+</button> </td> <td > <div class="jg" id="jg3">¥18</div> </td> <td > <button class="sc" onclick="removeProduct(3)"> 删除 </button> </td> </tr> <tr id="product4"> <td> <img src="img/pic4.jpg"/> </div> </td> <td> <div class="ms-name">橡皮擦（3块装）</div> <div class="ms1">高效擦除，不留痕迹，不易碎</div> </td> <td > <span class="original-price">¥6.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(4, -1)">-</button> <input type="text" class="quantity-input" id="qty4" value="1" readonly> <button class="btn1" onclick="updateQuantity(4, 1)">+</button> </td> <td > <div class="jg" id="jg4">¥6</div> </td> <td > <button class="sc" onclick="removeProduct(4)"> 删除 </button> </td> </tr> <tr id="product5"> <td> <img src="img/pic5.jpg"/> </div> </td> <td> <div class="ms-name">直尺30cm</div> <div class="ms1">透明刻度清晰，耐用防折断</div> </td> <td > <span class="original-price">¥5</span> </td> <td > <button class="btn1" onclick="updateQuantity(5, -1)">-</button> <input type="text" class="quantity-input" id="qty5" value="1" readonly> <button class="btn1" onclick="updateQuantity(5, 1)">+</button> </td> <td > <div class="jg" id="jg5">¥5</div> </td> <td > <button class="sc" onclick="removeProduct(5)"> 删除 </button> </td> </tr> <tr id="product6"> <td> <img src="img/pic6.jpg"/> </div> </td> <td> <div class="ms-name">圆规</div> <div class="ms1">精密绘图工具，金属材质耐用</div> </td> <td > <span class="original-price">¥8</span> </td> <td > <button class="btn1" onclick="updateQuantity(6, -1)">-</button> <input type="text" class="quantity-input" id="qty6" value="1" readonly> <button class="btn1" onclick="updateQuantity(6, 1)">+</button> </td> <td > <div class="jg" id="jg6">¥8</div> </td> <td > <button class="sc" onclick="removeProduct(6)"> 删除 </button> </td> </tr> <tr id="product7"> <td> <img src="img/pic7.jpg"/> </div> </td> <td> <div class="ms-name">钢笔</div> <div class="ms1">经典款式，流畅书写，赠送墨囊</div> </td> <td > <span class="original-price">¥20.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(7, -1)">-</button> <input type="text" class="quantity-input" id="qty7" value="1" readonly> <button class="btn1" onclick="updateQuantity(7,1)">+</button> </td> <td > <div class="jg" id="jg7">¥20</div> </td> <td > <button class="sc" onclick="removeProduct(7)"> 删除 </button> </td> </tr> <tr id="product8"> <td> <img src="img/pic8.jpg"/> </div> </td> <td> <div class="ms-name">文件夹</div> <div class="ms1">A4尺寸，可装30页纸，多色可选</div> </td> <td > <span class="original-price">¥16.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(8, -1)">-</button> <input type="text" class="quantity-input" id="qty8" value="1" readonly> <button class="btn1" onclick="updateQuantity(8, 1)">+</button> </td> <td > <div class="jg" id="jg8">¥16</div> </td> <td > <button class="sc" onclick="removeProduct(8)"> 删除 </button> </td> </tr> <tr id="product9"> <td> <img src="img/pic9.jpg"/> </div> </td> <td> <div class="ms-name">修正带</div> <div class="ms1">5mm宽度，8m长，修正精确无残留</div> </td> <td > <span class="original-price">¥10.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(9, -1)">-</button> <input type="text" class="quantity-input" id="qty9" value="1" readonly> <button class="btn1" onclick="updateQuantity(9, 1)">+</button> </td> <td > <div class="jg" id="jg9">¥10</div> </td> <td > <button class="sc" onclick="removeProduct(9)"> 删除 </button> </td> </tr> <tr id="product10"> <td> <img src="img/pic10.jpg"/> </div> </td> <td> <div class="ms-name">便利贴套装</div> <div class="ms1">多色组合，3种尺寸，便于标记归类</div> </td> <td > <span class="original-price">¥14.00</span> </td> <td > <button class="btn1" onclick="updateQuantity(10, -1)">-</button> <input type="text" class="quantity-input" id="qty10" value="1" readonly> <button class="btn1" onclick="updateQuantity(10, 1)">+</button> </td> <td > <div class="jg" id="jg10">¥14</div> </td> <td > <button class="sc" onclick="removeProduct(10)"> 删除 </button> </td> </tr> </tbody> </table> <div class="yh"> <div id="yhq">优惠券</div> <hr /> <div class="yhzc"> <div class="yhqbh" id="yhq1"> <p>满100减10元</p> <h3>有效使用</h3> </div> <div class="yhqbh" id="yhq2"> <p>满200减30元</p> <h3>有效使用</h3> </div> <div class="yhqbh" id="yhq3"> <p>满500减90元</p> <h3>有效使用</h3> </div> </div> </div> <div class="js"> <div id="jsxx">结算信息</div> <hr /> <div class="jsxx1"> <div class="jswz"> <span class="js-title">商品总额</span> <span id="zongjia">￥236.00</span> </div> <div class="jswz"> <span class="js-title">数量折扣</span> <span id="shuliang">-￥28.00</span> </div> <div class="jswz"> <span class="js-title">满减优惠</span> <span id="manjian">-￥30.00</span> </div> <div class="jswz"> <span class="yfje">应付金额</span> <span id="yinfu">￥178.00</span> </div> <button id="jsbtn">结算</button> </div> </div> <!-- 弹窗 --> <div id="tc" class="tc"> <!-- 弹窗内容 --> <div class="tc-content"> <span id=jsxq>结算详情</span> <span class="close">×</span> <div id="nr"> <div class="jswz"> <span class="js-title">商品总数</span> <span id="zongshu">20</span> </div> <div class="jswz"> <span class="js-title">商品总额</span> <span id="zongjia">￥236.00</span> </div> <div class="jswz"> <span class="js-title">数量折扣</span> <span id="shuliang">-￥28.00</span> </div> <div class="jswz"> <span class="js-title">满减优惠</span> <span id="manjian">-￥30.00</span> </div> <div class="jswz"> <span class="yfje">应付金额</span> <span id="yinfu">￥178.00</span> </div> </div> </div> </div> <script> // 打开弹窗的按钮对象 var btn = document.getElementById("jsbtn"); // 获取 <span> 元素，用于关闭弹窗 var span = document.querySelector('.close'); // 点击按钮打开弹窗 btn.onclick = function() { tc.style.display = "block"; } // 点击 <span> (x), 关闭弹窗 span.onclick = function() { tc.style.display = "none"; } // 删除商品 function removeProduct(productId) { const productRow = document.getElementById(`product${productId}`); productRow.style.display = 'none'; // 重置数量为0 const quantityInput = document.getElementById(`qty${productId}`); quantityInput.value = 0; // 重新计算总价 calculateTotal(); } // 更新商品数量 function updateQuantity(productId, change) { // 获取商品行 var productRow = document.getElementById('product' + productId); if (!productRow) return; // 获取数量输入框 var qtyInput = productRow.querySelector('.quantity-input'); if (!qtyInput) return; // 获取当前数量 var currentQty = parseInt(qtyInput.value); // 更新数量（不能小于0） var newQty = currentQty + change; if (newQty < 0) newQty = 0; // 更新页面显示 qtyInput.value = newQty; // 更新小计 updateSubtotal(productId); // 重新计算总价 calculateTotal(); } // 更新商品小计 function updateSubtotal(productId) { // 获取商品行 var productRow = document.getElementById('product' + productId); if (!productRow) return; // 获取价格元素 var priceElement = productRow.querySelector('.original-price'); if (!priceElement) return; // 获取价格（去掉¥符号） var price = parseFloat(priceElement.textContent.replace('¥', '')); // 获取数量输入框 var qtyInput = productRow.querySelector('.quantity-input'); if (!qtyInput) return; // 获取当前数量 var quantity = parseInt(qtyInput.value); // 计算折扣（2件9折，3件及以上8折） var discount = 1.0; if (quantity >= 3) { discount = 0.8; // 3件及以上8折 } else if (quantity === 2) { discount = 0.9; // 2件9折 } // 计算小计 var subtotal = price * quantity * discount; // 更新小计显示 var subtotalElement = productRow.querySelector('.jg'); if (subtotalElement) { subtotalElement.textContent = '¥' + subtotal.toFixed(2); } } // 计算总价和应用优惠券 function calculateTotal() { // 商品总额 var total = 0; // 数量折扣总额 var quantityDiscount = 0; // 商品总数 var totalItems = 0; // 遍历所有商品行（1到10） for (var i = 1; i <= 10; i++) { var productRow = document.getElementById('product' + i); // 如果商品行不存在（已被删除），跳过 if (!productRow) continue; // 获取价格元素 var priceElement = productRow.querySelector('.original-price'); if (!priceElement) continue; // 获取价格（去掉¥符号） var price = parseFloat(priceElement.textContent.replace('¥', '')); // 获取数量输入框 var qtyInput = productRow.querySelector('.quantity-input'); if (!qtyInput) continue; // 获取当前数量 var quantity = parseInt(qtyInput.value); // 计算折扣（2件9折，3件及以上8折） var discount = 1.0; if (quantity >= 3) { discount = 0.8; } else if (quantity === 2) { discount = 0.9; } // 计算原价小计 var originalSubtotal = price * quantity; // 计算折扣后小计 var discountedSubtotal = originalSubtotal * discount; // 累加到总额 total += discountedSubtotal; // 累加数量折扣 quantityDiscount += (originalSubtotal - discountedSubtotal); // 累加商品总数 totalItems += quantity; } // 应用优惠券 var couponDiscount = 0; // 按阈值从大到小检查优惠券 if (total >= 500) { couponDiscount = 90; // 满500减90 highlightCoupon(3); } else if (total >= 200) { couponDiscount = 30; // 满200减30 highlightCoupon(2); } else if (total >= 100) { couponDiscount = 10; // 满100减10 highlightCoupon(1); } else { // 没有适用的优惠券，重置所有优惠券高亮 resetCouponHighlights(); } // 计算应付金额 var payable = total - couponDiscount; // 更新结算信息 document.getElementById('zongjia').textContent = '¥' + total.toFixed(2); document.getElementById('shuliang').textContent = '-¥' + quantityDiscount.toFixed(2); document.getElementById('manjian').textContent = '-¥' + couponDiscount.toFixed(2); document.getElementById('yinfu').textContent = '¥' + payable.toFixed(2); document.querySelector('#tc #zongjia').textContent = '¥' + total.toFixed(2); document.querySelector('#tc #shuliang').textContent = '-¥' + quantityDiscount.toFixed(2); document.querySelector('#tc #manjian').textContent = '-¥' + couponDiscount.toFixed(2); document.querySelector('#tc #yinfu').textContent = '¥' + payable.toFixed(2); // 更新弹窗中的商品总数 document.getElementById('zongshu').textContent = totalItems; } // 修改后的 highlightCoupon 函数 function highlightCoupon(yhqId) { // 重置所有优惠券高亮 resetCouponHighlights(); // 高亮指定优惠券 var xs = document.getElementById('yhq' + yhqId); if (xs) { xs.classList.add('active-coupon'); // 添加新的高亮类 } } // 修改后的 resetCouponHighlights 函数 function resetCouponHighlights() { // 移除所有优惠券的高亮效果 for (var i = 1; i <= 3; i++) { var xs = document.getElementById('yhq' + i); if (xs) { xs.classList.remove('active-coupon'); // 移除高亮类 } } } </script> </body> </html> 请把优惠券变化改为变色及变字，代码基础化
06-19
<p>满100减10元</p> <h3>有效使用</h3> </div> <div class="yhqbh" id="yhq2"> <p>满200减30元</p> <h3>有效使用</h3> </div> <div class="yhqbh" id="yhq3"> <p>满500减90元</p> <h3>有效使用</h3> </...
<table cellspacing="4" style="padding: 0; table-layout: fixed;" class="inputs searchinput"> <colgroup> <col width="60px" /> <col width="210px" /> <col width="60px" /> <col width="230px" /> <col width="40px" /> <col width="200px" /> <col width="200px" /> <col /> </colgroup> <tbody> <tr> <%--<td>领域： </td> <td> <input type="text" maxlength="20" name="KnowledgeCatalog2" class="txt im" /> </td>--%> <td>时间范围： </td> <td> <input type="text" style="width: 100px" maxlength="15" name="StartTime" class="txt im Wdate" readonly="readonly" /> <%-- - <input type="text" style="width: 100px" maxlength="15" name="SearchContent2" class="txt im Wdate" readonly="readonly" />--%> </td> <%--<td>部门： </td> <td> <input id="txtDepartment" name="DeptID" value="0" type="text" class="txt im" /> </td>--%> <%-- <td> <label style="vertical-align: middle;"> <input type="checkbox" name="isinclude" checked="checked" value="1" style="vertical-align: sub;" /> 包含子部门 </label> </td>--%> <td> <input type="button" value=" 搜索 " name="search" class="bbtn bg-blue" /> </td> <td> <input type="reset" value=" 重置 " name="reset" class="bbtn2 bg-hui" /> </td> <td> <input type="hidden" name="PageIndex" value="1" /> <input type="hidden" name="PageSize" value="30" /> </td> </tr> <%--<tr>--%> <%--<td>任务名称： </td> <td> <input type="text" maxlength="20" name="SearchContent" class="txt im" /> </td>--%> <%--<td>结束时间： </td> <td> <input type="text" style="width: 100px" maxlength="15" name="EndTime" class="txt im Wdate" readonly="readonly" />--%> <%-- - <input type="text" style="width: 100px" maxlength="15" name="SearchContent3" class="txt im Wdate" readonly="readonly" />--%> <%--</td>--%> <%--<td>状态： </td> <td> <select name="Status" class="sel"> <option value="0">全部</option> <option value="1">未开始</option> <option value="2">进行中</option> <option value="3">已完成</option> </select> </td>--%> <%--</tr>--%> </tbody> </table> </form> <table class="tlist" cellspacing="1" cellpadding="1"> <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="80" /> <col width="80" /> </colgroup> <thead> <tr> <th colspan="2"></th> <th colspan="3">月度</th> <th colspan="3">年度</th> <th colspan="3">总计</th> <th colspan="2">同比</th> </tr> <tr> <th class="e">序号</th> <th>行销大类（三级目录）</th> <th>开发个数</th> <th>奖励金额</th> <th>优秀知识数量</th> <th>开发个数</th> <th>奖励金额</th> <th>优秀知识数量</th> <th>开发个数</th> <th>奖励金额</th> <th>优秀知识数量</th> <th>开发个数</th> <th>奖励金额</th> </tr> </thead> 每一列加上分割线 怎么写
08-23
使用<hr>标签：但是引用[4]提到在表格中使用<hr>标签可能会出现分割线聚在一起的问题，所以不推荐。 4. 使用背景颜色或渐变：通过设置背景颜色来模拟分割线，但引用[1]提到背景颜色加在tr标签后可能会导致分割线不...
css如何改变横线＜hr/＞标签的颜色
S筱潇S四维Smile
03-17 2777
<hr style='background-color:blue; height:1px; border:none;''/> hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗； 那是因为hr有默认的border，需要将它的边框去掉，设为border:none 以上三点缺一不可 ...
hr标签---中心线：设置颜色
ld395353765的博客
06-14 8383
可以看到默认的hr是一条灰色的一个像素的，通栏的实线。我要把它的颜色变成蓝色的。 说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color, 但是单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px 这样设置完后，在浏览器中可以看到线条变...
更改hr元素的颜色
p15097962069的博客
12-31 2217
我想使用CSS更改hr标签的颜色。 我在下面尝试过的代码似乎不起作用： hr { color: #123455; }
前端初学3| hr标签的扩展及部分特殊符号的表示
printfbaozw的博客
12-04 4199
hr标签的扩展及部分特殊符号的表示
<hr>标签如何设置水平线颜色
孤独行者
04-23 1万+
首先来介绍一下标签 标签就是在页面插入一条水平线达到分隔页面的效果 属性:本身的属性见下表,不幸的是全部不被赞成使用 所以设置的颜色可以用下面的方法 顺便说一下color属性一般是设置字体颜色的
＜hr＞标签颜色
threedeformity的博客
03-04 505
不加height颜色不生效，不加border会有黑色横线。
修改hr标签的颜色
Smile_Monica的博客
06-28 6189
之前的时候遇到线条的颜色都是直接使用div，然后使用padding属性让它和它里面的内容区分出来。今天在写的时候突然觉得如果每次都是这样的话，hr标签就会浪费掉了。于是在网上搜了一下，发现可以进行如下设置：1）不要再使用color这个属性了，而是使用background-color属性。2）因为hr标签是块级标签，所以它是有边框的，我们需要设置它自身的边框为0。3）然后定义自己的hr的高度和颜色。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值