行动中的选择器1

最新推荐文章于 2024-04-30 16:17:31 发布

wx13269317296

最新推荐文章于 2024-04-30 16:17:31 发布

阅读量128

点赞数

分类专栏：前端文章标签：前端 html 选择器

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一步是为每个主要内容区域创建

元素 - “banner”，“nav”，“more”，“content”和“footer”。每个

都将使用ID进行样式设置，因为它们是页面上的每个实例。ID的名称基于功能而非外观。

还将有三个非内容<div>元素，用于添加图像并强制页面以特定方式运行。

容器将如下所示：

HTML CODE

<body>
<div id="banner"></div>
<div id="container">
	<div id="container2">
		<div id="navigation"></div>
		<div id="more"></div>
		<div id="content"></div>
		<div id="cleardiv"></div>
	</div>
</div>
<div id="footer"></div>
</body>

第2步 - 删除内容
下一步是将内容添加到五个<div>元素中。有些浏览器或设备可以以原始形式查看您的页面 - 没有任何样式。因此，内容应使用正确的HTML元素进行样式设置，因此它对这些用户有意义。

这意味着主标题应为<h1>。导航项应该是列表，内容应放在容器中，例如<p>元素。HTML代码现在看起来像这样：

HTML CODE
		
<body>
<div id="banner">
	<h1>Site name</h1>
</div>
<div id="container">
	<div id="container2">
		<div id="navigation">
			<ul>
				<li><a href="#">Nav item 1</a></li>
				<li><a href="#">Nav item 2</a></li>
				<li><a href="#">Nav item 3</a></li>
			</ul>
		</div>
		<div id="more">
			<h3>Find out more</h3>
			<p>Lorem ipsum.. </p>
		</div>
		<div id="content">
			<h2>Heading here</h2>
			<p>Lorem ipsum..</p>
		</div>
		<div id="cleardiv"></div>
	</div>
</div>
<div id="footer">
	<ul>
		<li><a href="#">Footer item 1</a></li>
		<li><a href="#">Footer item 2</a></li>
		<li><a href="#">Footer item 3</a></li>
		<li><a href="#">Copyright &copy; sitename</a></li>
	</ul>
</div>
</body>

wx13269317296

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行动中的选择器1

第一步是为每个主要内容区域创建元素 - “banner”，“nav”，“more”，“content”和“footer”。每个都将使用ID进行样式设置，因为它们是页面上的每个实例。ID的名称基于功能而非外观。还将有三个非内容<div>元素，用于添加图像并强制页面以特定方式运行。容器将如下所示：HTML CODE<body><div id="banner"&...
复制链接

扫一扫