这个算实现效果么，虚线边框怎么实现啊？
来源：4-11 编程练习
weixin_慕前端0009281
2020-08-02 10:46:11
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
.pic{
border:1px solid black;
float:left;
padding: 0;
margin-left:1.2em;
list-style-type:none;
}
p{
line-height=1em;
margin-top:0em;
margin-left:0.3em;
margin-bottom:0.1em;
}
#0{
border:1px solid black;
background-color:red;
width:810px;
height:470px;
/*float:left;*/
}
ul{
float:left;
margin-top:0.3em;
margin-left:0.3em;
width: 50%;
/*padding: 0;*/
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id=0>
<ul>
<li class="pic" id=1>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class= "pic" id=2>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class="pic" id=3>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
<ul>
<li class="pic" id=4>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class="pic" id=5>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class="pic" id=6>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
</div>
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
.pic{
border:1px solid black;
float:left;
padding: 0;
margin-left:1.2em;
list-style-type:none;
}
p{
line-height=1em;
margin-top:0em;
margin-left:0.3em;
margin-bottom:0.1em;
}
#0{
border:1px solid black;
background-color:red;
width:810px;
height:470px;
/*float:left;*/
}
ul{
float:left;
margin-top:0.3em;
margin-left:0.3em;
width: 50%;
/*padding: 0;*/
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id=0>
<ul>
<li class="pic" id=1>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class= "pic" id=2>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class="pic" id=3>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
<ul>
<li class="pic" id=4>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class="pic" id=5>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li class="pic" id=6>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
</div>
</body>
</html>
1回答
-
时间，
2020-08-02
同学，你好。
1、同学可以将li放在一个ul中，并去掉ul设置的width和float样式
2、给div的id选择器重新命名，设置border为dashaed虚线，并适当调整宽高，使一行显示三个
3、设置每个li的margin-top值
4、设置css样式时应该是冒号
如果我的回答解决了您的疑惑，请采纳！祝学习愉快~~~~
0
相似问题