CSS选择器小案例——商城主页

最新推荐文章于 2023-03-10 15:40:35 发布

codeLiuhy

最新推荐文章于 2023-03-10 15:40:35 发布

阅读量308

点赞数

分类专栏： h5基础篇文章标签： css html

本文链接：https://blog.csdn.net/qq_42000660/article/details/118654409

版权

h5基础篇专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、实现如下效果：

1、分析页面层次

1).页面架构可分为三部分，banner，nav和bottom

banner：主要嵌套了图片，宽度占据页面100%

nav：由多个超链接构成，分布在一行，且上下左右都有一定的间距

bottom:文字居中，设置背景色

二、实现代码

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{
				margin: 0px;
			}
			body{
				margin: 0px;
				background-color: #ddd;
			}
			#banner img{
				width: 100%;
			}
			#navigation{
				text-align: center;
				height: 60px;
				line-height: 60px;
				background-color: #fff;
			}
			.nav{
				text-decoration: none;
				margin: 0px 30px;
				color: #333;
			}
			#bottom{
				color: #666;
				text-align: center;
				height: 40px;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<img src="img/banner.jpg">
		</div>
		<div id="navigation">
			<a class="nav" href="#">首页</a>
			<a class="nav" href="#">购物车</a>
			<a class="nav" href="#">电竞</a>
			<a class="nav" href="#">服饰</a>
			<a class="nav" href="#">洗护</a>
			<a class="nav" href="#">美食</a>
		</div>
		<div id="bottom">
			版权归codeLiuhy所有@sdf
		</div>
	</body>
</html>

三、代码解读

在样式标签style中设置某个元素的样式可以分为以下方式：

方式	形式	作用范围
id	#id{}	唯一id，指定某一个标签的样式
class	.class{}	多个class,指定多个class名称一致的标签
标签名	a{}	页面中所有的和该标签名一样的元素

如果某个元素包含多个相同的元素，若要设置子元素的方式，可以通过以下方式：

<div id="navigation">
	<a href="#">首页</a>
	<a href="#">购物车</a>
	<a href="#">电竞</a>
	<a href="#">服饰</a>
	<a href="#">洗护</a>
	<a href="#">美食</a>
</div>

style样式：

#navigation a{

text-decoration: none;
margin: 0px 30px;
color: #333;

}

codeLiuhy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器小案例——商城主页

一、实现如下效果：1、分析页面层次1).页面架构可分为三部分，banner，nav和bottombanner：主要嵌套了图片，宽度占据页面100%nav：由多个超链接构成，分布在一行，且上下左右都有一定的间距bottom:文字居中，设置背景色二、实现代码<html> <head> <meta charset="utf-8"> <title></title> <style> html{
复制链接

扫一扫