HTML5+CSS3 制作简单图文广告

最新推荐文章于 2024-01-22 16:40:13 发布

晚晚昨晚吃晚饭很晚睡说晚

最新推荐文章于 2024-01-22 16:40:13 发布

阅读量678

点赞数 1

分类专栏：学习打卡 HTML5+CSS3 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/qq_55786319/article/details/121015067

版权

本文介绍如何利用HTML5和CSS3制作简单的图文广告，重点在于超链接和列表的运用。通过学习，可以掌握行内块级元素、vertical-align属性，以及超链接和列表的基本使用方法。

摘要由CSDN通过智能技术生成

超链接+列表的简单运用

1.今日份的h5课堂作业

效果图片：
在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>家居网</title>
</head>
<style>
	*{
     
		margin: 0;
	}
	#box1{
     
		height:50px;
		background-color: #404042;
		text-indent: 5em;
	}
	.liebiao li{
     
		display: inline-block;
		font-size: 20px;
		padding-top: 12px;
	}
	.liebiao li a{
     
		text-decoration: none;color:white;
		padding: 15px 20px 15px 20px;/*内边距撑开超链接的盒子*/
	}
	.a2{
     
		background-color:#ff5151;
	}
	.a1:hover{
     
		background-color:#ff5151;
	}
	.liebiao2 li{
     
		display: inline-block;
		border-width:1px 0 1px 1px;
		border-color: #cecece;
		border-style: solid;
		padding: 30px 10px 20px 15px;
	}
	#special