HTML学习笔记

最新推荐文章于 2024-09-28 16:29:52 发布

斯人已远，尤赖余温

最新推荐文章于 2024-09-28 16:29:52 发布

阅读量93

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/qq_20901663/article/details/80377885

版权

HTML基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一个实战

虽然将课堂上的例子写出来了，却发现花了更多的时间，远远超过了课堂的学习时间太笨了，多年不事件，只觉自己好笨啊，明明一个很简单的实践。

本例子是一个简单的实践，给你一张网页图片，然后去制作一个网页页面，这只是图片的一小部分：

<HTML>
	<head>
		<meta charset="utf-8" />
		<title>中间栏实战</title>
		<link href="css/main.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="center-bar">
			<ul>
				<li>
					<img src="img/icon1.gif">
					<h4>我要营销</h4>
					<p>云道不短完善的营销系统，联合优质媒体资源，集成常用的网络营销模式及终端，以最简单的产品形态，帮助独立城商实现店铺及商品信息在全网以最快的分销。</p>
					<a href="#">我要推广</a>
				</li>
				<li class="atm">
					<img src="img/icon1.gif">
					<h4>我要营销</h4>
					<p>云道不短完善的营销系统，联合优质媒体资源，集成常用的网络营销模式及终端，以最简单的产品形态，帮助独立城商实现店铺及商品信息在全网以最快的分销。</p>
					<a href="#">我要推广</a>
					
				</li>
				<li>
					<img src="img/icon1.gif">
					<h4>我要营销</h4>
					<p>云道不短完善的营销系统，联合优质媒体资源，集成常用的网络营销模式及终端，以最简单的产品形态，帮助独立城商实现店铺及商品信息在全网以最快的分销。</p>
					<a href="#">我要推广</a>
				
				</li>
			</ul>
		</div>
	</body>
</html>

这时HTML文件，下面是CSS的：

body{
	margin:0;
	padding:0;
	background-color:#fefefe;
}
.center-bar{
	margin:0 auto;
	width:1054px;
	height:656px;
	border:1px solid #eee;
}
ul{
	list-style:none;
	padding:0;
}
li{
	display:inline-block;
	width:320px;
	height:510px;
	border:1px solid #ccc;
	border-radius:20px;
	margin:0px;
}
li.atm{
	width:318px;
	margin:0 40px;
}
img{
	margin:32px;
}
h4{
	font-size:20px;
	text-align:center;
	color:#666;
	height:45px;
}
p{
	width:238px;
	margin-left:47px;
	color:#999;
}
a{
	margin:0 auto;
	display:block;
	border:1px solid red;
	width:100px;
	height:30px;
	line-height:30px;
	text-decoration:none;
	color:red;
	background-color:#fff;
	text-align:center;
	border-radius:5px;
	
}
a:hover{
	color:red;
	border:1px solid #fff;
	background-color:#aaa;
	
}

最后的效果还可以一般般，最后还是有一些细节没处理好