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>