使用CSS中常用的样式属性制作简单的静态广告页面

最新推荐文章于 2022-04-11 08:41:18 发布

小扬同学的笔记

最新推荐文章于 2022-04-11 08:41:18 发布

阅读量619

点赞数 1

分类专栏： HTML5 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/aibai666/article/details/121721313

版权

HTML5 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

如图就是最终的效果，在制作之前首先分析整体结构。先搭建好整体的结构体系，然后去添加样式。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		
		/*设置整体样式 所有的字体类型为微软雅黑*/
			.container{
				font-family: "微软雅黑";
				width: 1100px;/*设置整体的宽度 达到居中的效果*/
			}
			
		/*设置标题样式*/
		.container h1{
			color: red;
			text-align: center;
			letter-spacing: 10px;/*设置字符间距为10px*/
		}
		
		/*设置超链接默认字体样式*/
		.container .tdstyle a{
			color: red;
			letter-spacing: 1px;
			font-size: 12px;
			text-decoration: none;/*取消下划线的显示*/
		}
		
		/*设置超链接鼠标悬浮事件*/
		.tdstyle a:hover{
			color: blue;/*鼠标悬浮的时候颜色为蓝色*/
			text-decoration: underline;/*显示下划线 underline方法*/
		}
		
		/*设置大字体样式*/
		.container .max{
			font-size: 30px;
			color: red;
		}
		
		/*设置小字体样式*/
		.container .min{
			text-decoration: line-through red;/*设置下划线*/
		}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>麻辣小龙虾</h1>
			<table>
				<tr>
					<td><img src="img/shrimp_1.jpg"></td>
					<td><img src="img/shrimp_2.jpg"></td>
					<td><img src="img/shrimp_3.jpg"></td>
					<td><img src="img/shrimp_4.jpg"></td>
				</tr>
				<tr>
					<td class="tdstyle"><a href="#">洪湖食客 小龙虾生鲜熟食 麻辣4-6袋</a></td>
					<td class="tdstyle"><a href="#">红功夫 麻辣小龙虾 4-6袋 1kg</a></td>
					<td class="tdstyle"><a href="#">品鲜猫 潜江麻辣小龙虾1000g</a></td>
					<td class="tdstyle"><a href="#">红功夫 麻辣小龙虾6-8袋 750g</a></td>
				</tr>
				<tr>
					<td>
						<span class="max">￥108</span>
						<span class="min">￥128</span>
					</td>
					<td>
						<span class="max">￥109</span>
						<span class="min">￥118</span>
					</td>
					<td>
						<span class="max">￥98</span>
						<span class="min">￥138</span>
					</td>
					<td>
						<span class="max">￥108</span>
						<span class="min">￥138</span>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

小扬同学的笔记

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用CSS中常用的样式属性制作简单的静态广告页面

如图就是最终的效果，在制作之前首先分析整体结构。先搭建好整体的结构体系，然后去添加样式。代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*设置整体样式所有的字体类型为微软雅黑*/ .container{ font-fam...
复制链接

扫一扫