html使用图片、列表和CSS实现图文横排_具有滚动效果

最新推荐文章于 2024-05-14 17:19:58 发布

A.木易

最新推荐文章于 2024-05-14 17:19:58 发布

阅读量2.7k

点赞数 6

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_45099830/article/details/134313799

版权

这是大学网页设计与制作（html5+csss3+js）课程中使用图片、列表和CSS实现图文横排_具有滚动效果。

效果图如下：
在这里插入图片描述
效果图如上图，想要做成这样，具体代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用列表和CSS实现图文横排</title>
<style>
body {
   font-size: 12px;
   font-family: "微软雅黑";
   text-align: center;
}
img{
	width: 192px;
	height: 120px;
}
#pic {
	width: 680px;
	margin: 0 auto;/* 实现 div 内容在浏览器窗口中水平居中 */ 
}
#pic ul {
   padding: 20px 0 10px;/*ul的左内边距默认为40px*/
   margin: 0;/*ul默认的上、下边距为12px*/
   background: #eee;
   list-style: none;/* 取消列表项前面的标记符号 */
}
#pic ul li {
   margin: 5px 10px;
   display: inline-block;/* 将块级元素的li修改为行内块元素 */ 
}

</style>
</head>
<body>
	      <!--第一行-->
  <div>
   <div id="pic">
   <!--利用列表实现图片排列效果-->
    <ul>
		<li> 
		<div><img src="images/sanya.jpg"/><div><p>三亚</p></div></div>
		<div> <img src="images/jiuzhaigou.jpg"/><div><p>九寨沟</p></div><div>
		<div><img src="images/tianhu.jpg"/><div><p>天湖</p></div><div>
		</li>
		
		<li>
		<div><img src="images/zhangjiajie.jpg"/><div><p>张家界</p></div></div>
		<div> <img src="images/hulunbeier.jpg"/><div><p>呼伦贝尔大草原</p></div><div>
		<div><img src="images/aersan.jpg"/><div><p>阿尔山</p></div><div>
		</li>
		
		<li>
		<div><img src="images/bailisan.jpg"/><div><p>百里山</p></div></div>
		<div> <img src="images/gelinhaoqi.jpg"/><div><p>格林好奇</p></div><div>
		<div><img src="images/qinghaihu.jpg"/><div><p>青海湖</p></div><div>
		</li>
	</ul>

   </div>
  </div>

</body>
</html>

A.木易

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
2
评论
html使用图片、列表和CSS实现图文横排_具有滚动效果

这是大学网页设计与制作（html5+csss3+js）课程中使用图片、列表和CSS实现图文横排_具有滚动效果。/* 实现 div 内容在浏览器窗口中水平居中 *//* 将块级元素的li修改为行内块元素 *//*ul默认的上、下边距为12px*//*ul的左内边距默认为40px*//* 取消列表项前面的标记符号 */
复制链接

扫一扫