标签：02 17 color height padding 2021 10px li margin
CSS练习1
1. 京东图片列表
效果截图
代码部分
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东图片列表</title>
<style>
li{
list-style: none;
}
body{
background-color: antiquewhite;
}
.box{
width: 190px;
height: auto;
/* 溢出隐藏 */
overflow: hidden;
background-color: rgba(244, 244, 244, 1);
/* 水平居中 */
margin: 10px auto;
}
.box img{
width: 100%;
}
.box li:not(:last-child){
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<li>
<a href=""><img src="./img/01/1.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./img/01/2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="./img/01/3.jpg" alt=""></a>
</li>
</div>
</body>
</html>
2.
效果截图
代码部分
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东左侧导航条</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: floralwhite;
}
.box {
margin: 10px 10px;
padding: 10px 0;
width: 190px;
height: 450px;
background-color: #fefefe;
}
span{
padding: 0 2px;
font-size:12px;
}
li {
list-style: none;
padding-left: 10px;
/* 垂直居中 */
height: 25px;
line-height: 25px;
}
li:hover {
background-color: silver;
}
a {
color: black;
font-size: 14px;
/* 去除下划线 */
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div class="box">
<li>
<a href="">家用电器</a>
</li>
<li>
<a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
</li>
<li>
<a href="">电脑</a><span>/</span><a href="">办公</a>
</li>
<li>
<a href="">家具</a><span>/</span><a href="">家具</a><span>/</span><a href="">家装</a><span>/</span><a href="">厨具</a>
</li>
<li>
<a href="">男装</a><span>/</span><a href="">女装</a><span>/</span><a href="">童装</a><span>/</span><a href="">内衣</a>
</li>
<li>
<a href="">美妆</a><span>/</span><a href="">个护清洁</a><span>/</span><a href="">宠物</a>
</li>
<li>
<a href="">女鞋</a><span>/</span><a href="">箱包</a><span>/</span><a href="">钟表</a><span>/</span><a href="">珠宝</a>
</li>
<li>
<a href="">男鞋</a><span>/</span><a href="">运动</a><span>/</span><a href="">户外</a>
</li>
<li>
<a href="">房产</a><span>/</span><a href="">汽车</a><span>/</span><a href="">汽车用品</a>
</li>
<li>
<a href="">母婴</a><span>/</span><a href="">玩具乐器</a>
</li>
<li>
<a href="">食品</a><span>/</span><a href="">酒类</a><span>/</span><a href="">生鲜</a><span>/</span><a href="">特产</a>
</li>
<li>
<a href="">艺术</a><span>/</span><a href="">礼品鲜花</a><span>/</span><a href="">农资绿植</a>
</li>
<li>
<a href="">医药保健</a><span>/</span><a href="">计生情趣</a>
</li>
<li>
<a href="">图书</a><span>/</span><a href="">文娱</a><span>/</span><a href="">教育</a><span>/</span><a href="">电子书</a>
</li>
<li>
<a href="">机票</a><span>/</span><a href="">酒店</a><span>/</span><a href="">旅游</a><span>/</span><a href="">生活</a>
</li>
<li>
<a href="">理财</a><span>/</span><a href="">众筹</a><span>/</span><a href="">白条</a><span>/</span><a href="">保险</a>
</li>
<li>
<a href="">安装</a><span>/</span><a href="">维修</a><span>/</span><a href="">清洗</a><span>/</span><a href="">二手</a>
</li>
<li>
<a href="">工业品</a>
</li>
</div>
</body>
</html>
3.
效果截图
代码部分
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易新闻列表</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 360px;
margin: 10px auto;
border-top: 1px solid #ddd;
}
h2 {
font-size: 20px;
/* 将h2设置为行内块元素 */
display: inline-block;
border-top: 1px solid red;
/* 将上边框向上移一个像素，覆盖在box上边框上 */
margin-top: -1px;
padding: 10px 0;
}
a {
text-decoration: none;
color: rgb(83, 81, 81);
}
a:hover {
color: red;
}
.list{
margin-top: 20px;
margin-bottom: 20px;
}
.list li{
list-style: none;
font-size: 14px;
padding: 5px 0px;
height: 20px;
line-height: 20px;
}
.list li::before{
content: "■";
color: rgb(184, 179, 184);
font-size: 10px;
margin-right: 5px;
}
.item {
width: 300px;
height: 150px;
}
.item .bgf {
color: white;
margin-top: -30px;
padding-left: 40px;
}
</style>
</head>
<body>
<div class="box">
<h2>
<a href="">体育</a>
</h2>
<div class="item">
<a href="">
<img src="./img/03/1.jpg" style="display:inline; opacity:1; " alt="当年讨厌科比的人，也会怀念他吗？">
<h4 class="bgf">
当年讨厌科比的人，也会怀念他吗？
</h4>
</a>
</div>
<div class="list">
<li>
<a href="">“科比，我们是一辈子的兄弟了！”</a>
</li>
<li>
<a href="">最伟大的射手库里,如果你只认为他准,那就错</a>
</li>
<li>
<a href="">足坛第一硬汉！场边刮骨疗毒 眼都不眨</a>
</li>
<li>
<a href="">当年的香港飞龙队，CBA史上第一奇葩</a>
</li>
</div>
</div>
</body>
</html>
标签：02,17,color,height,padding,2021,10px,li,margin 来源： https://blog.csdn.net/weixin_46840701/article/details/113833866
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。