li4这种方式是否正确 如果不正确 应该怎么解决
来源：2-6 编程练习
慕粉2340524060
2020-11-18 20:35:30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
li {
width: 200px;
height: 50px;
}
/*补充代码*/
.li1{
border-top:1px solid red;
}
.li2{
border-right:2px dashed green;
}
.li3{
border-right:2px dashed transparent;
}
.li4{
border:3px dashed blue;
}
.li4{
border-left-style:solid;
border-left-color:purple;
border-bottom-color:transparent;
border-right-color:transparent;
}
</style>
</head>
<body>
<ul>
<li class="li1">第一个li</li>
<li class="li2">第二个li</li>
<li class="li3">第三个li</li>
<li class="li4">第四个li</li>
</ul>
</body>
</html>
1回答
-
同学你好，li4这种实现方法不正确，代码写的有些复杂，可以参考老师的建议进行修改，建议如下：
1、第一个li标签，设置2px素的上边框，参考下图：
2、给第三个li标签设置2px的蓝色虚线底边框，参考下图：
3、第四个li设置3px的紫色实线左边框，参考下图：
修改后的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边框</title> <style> li { width: 200px; height: 50px; } .li1 { border-top: 2px solid red; } .li2 { border-right: 2px dashed green; } .li3 { border-bottom: 2px dashed blue; } .li4 { border-left: 3px solid purple; } </style> </head> <body> <ul> <li class="li1">第一个li</li> <li class="li2">第二个li</li> <li class="li3">第三个li</li> <li class="li4">第四个li</li> </ul> </body> </html>祝学习愉快！
0
相似问题