1.列表知识:
list-style-position有两个值,分别是inside,outside,分别表示在标签里面和在标签外面。
2.案例:
源代码:
html:
<body>
<div class="bigBox">
<div>在线解答问题</div>
</div>
<ul>
<li>新手前端适合买什么笔记本?</li>
<li>前端面试如何谈高薪?</li>
<li>大厂前端招聘中的内幕</li>
<li>28岁转前端来得及吗?</li>
<li>女生前端好找工作吗?</li>
</ul>
</body>
css:
* {
padding:0;
margin:0;
}
.bigBox {
width: 500px;
height: 310px;
background-color:pink ;
margin-top: 30px;
margin-left: 30px;
}
.bigBox>div {
height: 60px;
font-size: 20px;
color: #ff6347;
border-top: 2px solid #4e6ef2;
border-bottom: 1px solid #4e6ef2;
line-height: 60px;
font-weight: bold;
text-indent: 1em;
}
ul {
list-style: inside;
font-size: 18px;
line-height: 35px;
margin-top: 30px;
}
ul>li:hover {
color:blue;
text-decoration: underline;
}