整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
篇文章主要给大家介绍一下如何使用html+css完成新闻列表以及图片列表的制作。
首先呢一个通用的新闻列表页面一般是有左侧的一个图片缩略图，右侧有新闻的标题和简介，有的呢还包含有新闻发布的时间等，我们具体来看一下下面这张图片
从上边图片不难看出，整个新闻列表的布局就是由新闻图片、标题、简介以及时间组成。这个列表页的主要涵盖了以下几个知识点：
1）浮动元素float（图片要使用 float:left; 进行左对齐，而日期要使用 float:right; 进行右对齐）；
小技巧：使用float:right;的元素要放到元素内容的最左侧，这样元素可以避免内容过多导致右浮动元素换行的问题。
2）标题以及简介元素配置（合理的使用css代码来调整标题以及简介元素，使主题结构清晰明了，这里要注意文字内容超出隐藏的问题）
具体的实现html代码以及css代码就如下图所示：
图片列表跟新闻列表比较类似，一般也是由一张图片以及一个标题文字组成，我们具体来看一下下面这张图片
由此图片列表可以看出，本图片列表包含了一个图片的缩略图，还有一行文字，半透明的黑色背景并且浮动在图片的底部。这个图片列表页的主要涵盖了以下几个知识点：
1）浮动元素float（图片列表要使用 float:left; 进行左排列对齐）；
2）标题元素的绝对定位（首先设置子元素position:relative;，然后设置标题绝对定位position:absolute;让其位于图片的底部）
3）背景半透明（使用css3的新属性background:rgba(0,0,0,0.5);最后一位0.5为元素的透明度，区间（0-1））
具体的实现html代码以及css代码就如下图所示：
为什么给大家放图片而不直接放源代码，就是为了想要让大家锻炼自己动手写的能力，只有自己能够熟练的运用才是王道。
好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以举一反三看能写出其它的类似页面，如果有不理解或者有需要源码的可以直接私信我即可。
每日金句：人生不要被过去所控制，决定你前行的是未来，人生不要被安逸所控制，决定你成功的是奋斗。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
作者：极客小俊」
「 把逻辑思维转变为代码的技术博主」
咱们废话不多说直接上代码案例素材!
首先准备图片素材 放入到你的demo案例下的img文件夹
当然图片你也可以用其他类似的图来代替也是可以的!
如图
<div id="big">
<div class="box">
<div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
<div class="mask">
<h2>三用小巧思波士顿包</h2>
<p>印花波士顿包 复古波士顿包，手提单肩斜挎多用，印花PVC</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全场2折起 印花波士顿包 专柜终身保养</h2>
<h3 class="sl"><i></i><span>抢全场2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退货赔运费</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">抢!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
<div class="mask">
<h2>猪年纪念款经典牛皮水桶包</h2>
<p>猪年纪念款 经典牛皮水桶包，自带强大气场</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全场2折起 印花波士顿包 专柜终身保养</h2>
<h3 class="sl"><i></i><span>抢全场2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退货赔运费</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">抢!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
<div class="mask">
<h2>一包四用蜜蜂系列迷你小方包</h2>
<p>四用方盒包 一包四用蜜蜂系列迷你链条小方包</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全场2折起 印花波士顿包 专柜终身保养</h2>
<h3 class="sl"><i></i><span>抢全场2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退货赔运费</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">抢!</div>
</div>
</div>
</div>
</div>*{
padding:0px;
margin:0px;
}
body{
font-family: '微软雅黑';
}
.sl{
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
}
#big{
width:950px;
height:416px;
margin:10px auto;
overflow: hidden;
}
#big>.box{
width:298px;
height:410px;
float: left;
position: relative;
overflow: hidden;
border:1px solid #ccc;
margin-left:19px;
}
#big>.box:first-child{
margin-left:0px;
}
#big>.box>.pic{
width:298px;
height:300px;
overflow: hidden;
}
#big>.box>.pic>img{
transition: all 500ms;
}
#big>.box:hover>.pic>img{
transform: scale(1.5);
}
#big>.box>.mask{
height:300px;
width:298px;
position: absolute;
left:-298px;
top:0px;
background:rgba(0,0,0,0.3);
transition: all 600ms;
color:#fff;
}
#big>.box>.mask>h2{
font-size: 18px;
margin:80px 0px 10px 10px;
}
#big>.box>.mask>p{
font-size: 12px;
margin:0px 0px 10px 10px;
}
#big>.box:hover>.mask{
left:0px;
}
#big>.box>.title>h2{
margin:10px auto;
width:288px;
height:20px;
line-height: 20px;
font-size: 14px;
color:#333;
overflow: hidden;
font-weight: normal;
}
#big>.box>.title>h2>span{
display: inline-block;
width:31px;
height:16px;
vertical-align: middle;
background: url('img/tu.png') no-repeat;
background-size:cover;
margin-right:5px;
}
#big>.box>.title>h3{
width:288px;
height:20px;
margin:0px auto;
font-size: 12px;
color:#666;
font-weight: 400;
}
#big>.box>.title>h3>i{
width:12px;
height:16px;
display: inline-block;
background:url('img/tu1.jpg') no-repeat;
vertical-align: middle;
}
#big>.box>.title>h3>span{
color:#f00;
margin:0 5px 0 5px;
}
#big>.box>.title>.price{
width:298px;
height:50px;
background:#e61414;
}
#big>.box>.title>.price>.zx_pr>span{
font-size: 20px;
}
#big>.box>.title>.price>.zx_pr{
width:83px;
height:50px;
line-height: 50px;
float: left;
margin-left:2px;
vertical-align: bottom;
font-size:38px;
color:#fff;
}
#big>.box>.title>.price>.buy{
width:56px;
height:50px;
line-height: 50px;
text-align: center;
background:url('img/tu3.png') no-repeat;
float:right;
color:#f00;
}
#big>.box>.title>.price>.xl_yp{
width:145px;
height:41px;
float: left;
margin:4px 0 0 8px;
font-size: 12px;
color:#fff;
}
#big>.box>.title>.price>.xl_yp>p>span{
margin-left:4px;
width:72px;
height:17px;
display: inline-block;
line-height: 17px;
text-align: center;
border-radius: 10px;
background:#ffb369;
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2){
width:80px;
height:20px;
line-height: 20px;
text-align: center;
border-radius: 1px;
margin-top:5px;
background:rgba(0,0,0,0.2);
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
margin-right: 5px;
font-size: 14px;
}如图
"点赞" "✍️评论" "收藏"
大家的支持就是我坚持创作下去的动力!
如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️
家有没有好奇过，为什么网页中的图片都是按顺序排放的，或者说有时候网页的内容的排版非常有序。其实大多数网页的这种效果都要依赖于列表标签。
在HTML中，列表分为有序列表和无序列表。
有序列表：
<ol type="">(type属性不写默认为0,1,2......)
<li>内容</li>
<li>内容</li>
。。。。。
</ol>
ol标签的type属性只有五种类型，分别为：
“1”：用阿拉伯数字排列。
“A”：用大写字母排列。
“a”：用小写字母排列。
“i”：用罗马数字排列。
“Ⅰ”：用大写罗马数字排列。
ol还有两个属性：reversed和start。
<ol reversed=""reversed>倒叙排列。
<ol start="(数字)"从第几个开始排列。
我们说完有序列表自然要说他的好兄弟——无序列表，在我们真正的研发中，无序列表才是应用最广泛的，
<ul>
<li>内容</li>
<li>内容</li>
。。。。。
</ul>
ul标签也有type属性，
“disc”效果是个圆点（是默认值）。
"square"效果是个实心方块。
“circle”效果是个空心圆。
在我们真实的编程中一般都是用不上这些type效果的，所以我们可以通过CSS将其解决掉：<style>
list-style:none;(此代码可以去掉列表的样式)
</style>
好啦，今天接到这里，有什么问题可以评论区留言或者私聊我呦，制作不易，希望多多转发多多关注[比心][比心][比心]
*请认真填写需求信息，我们会在24小时内与您取得联系。
