HTML学习记录：使用HTML与CSS模仿新浪网页面

最新推荐文章于 2022-11-12 16:31:53 发布

玩具玩具遥控车

最新推荐文章于 2022-11-12 16:31:53 发布

阅读量3.4k

点赞数 11

文章标签： html css html5 web

本文链接：https://blog.csdn.net/toytoytelecar/article/details/110579844

版权

上次我们使用HTML对新浪页面的导航栏进行了模仿，这一次我们打算更进一步，模仿整个页面。

由于新浪的页面创建的比较早，所以仅仅用静态的CSS样式和HTML就可以全部实现；

我们要模仿的界面如图：

此网页我们可以分为三部分：

1.头部

2.内容

3.尾页

所以为了系统的把控全局页面，我们先写出大致的轮廓，并且在每一个部分加上边框方便观看：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--先勾勒出整个网页的结构-->
	<style>
		*{										/*通配符选择器清除默认值*/
			margin: 0px;
			padding: 0px;
		}
		#header,#container,#footer{				/*加上边框方便观看大致网页框架*/
			border: 1px solid red;
		}
	</style>
	<body>
		
		<div id="header">头部</div>
		<div id="container">中部</div>
		<div id="footer">底部</div>
	</body>
</html>

执行出来的效果是这样的：

这就类似于一个草图，下面我们在这个草图上添加内容即可。

1.head头部部分

我们可以分析一下头部部分的组成：

1.可以看出头部部分宽度并非填满整个浏览器界面，所以我们首先要设置宽度；

2.整个head部分由左边的logo和右边的超链接组成

分析完头部部分的组成后，我们就可以逐步开始写了。

1.设置头部宽度：

我扒了扒源代码，看到了头部部分的宽度是1200px，且头部部分是居中的，我们就在HTML中添加CSS样式设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--先勾勒出整个网页的结构-->
	<style>
		*{										/*通配符选择器清除默认值*/
			margin: 0px;
			padding: 0px;
		}
		#header,#container,#footer{				/*加上边框方便观看大致网页框架*/
			border: 1px solid red;
		}
			#header{
			width: 1200px;
			margin: 0 auto;					/*居中*/
		}
	</style>
	<body>
		
		<div id="header">头部</div>
		<div id="container">中部</div>
		<div id="footer">底部</div>
	</body>
</html>

执行效果：

可以看到头部已经全部居中、宽度也已经设置好了；

然而我们发现，我们执行的效果和原效果依然不太一样，我再次翻了翻源代码，发现我们还需要在头部设置一个padding宽度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--先勾勒出整个网页的结构-->
	<style>
		*{										/*通配符选择器清除默认值*/
			margin: 0px;
			padding: 0px;
		}
		#header,#container,#footer{				/*加上边框方便观看大致网页框架*/
			border: 1px solid red;
		}
			#header{
			width: 1200px;
			margin: 0 auto;					/*居中*/
			padding-top: 20px;
			padding-bottom: 26px;
			padding-left: 0px;
			padding-right: 0px;
		}
	</style>
	<body>
		
		<div id="header">头部</div>
		<div id="container">中部</div>
		<div id="footer">底部</div>
	</body>
</html>

执行效果：

这样头部的基本样式就设置好了。

2.向head中插入内容

整个head由左边的logo和右边的超链接组成；我们不妨分析一下它是怎么实现的：

我分析，首先需要在head的<div>中加入两个子div分别代表logo和超链接，然后使用左右浮动的方式让他们分别分布在head的左右侧，最后消除浮动，使他们不脱离文档流，方便执行接下来的代码；

我们不妨在head的div中添加以下内容：

		<div id="header">
			
			<div id="logo">logo</div>
			<div id="interna">中英转换</div>
		</div>

然后在<style>里设置其左右浮动，最后在补一个空的div消除浮动；

全部代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--先勾勒出整个网页的结构-->
	<style>
		*{										/*通配符选择器清除默认值*/
			margin: 0px;
			padding: 0px;
		}
		#header,#container,#footer{				/*加上边框方便观看大致网页框架*/
			border: 1px solid red;
		}
			#header

最低0.47元/天解锁文章

玩具玩具遥控车

关注

11
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
HTML学习记录：使用HTML与CSS模仿新浪网页面

上次我们使用HTML对新浪页面的导航栏进行了模仿，这一次我们打算更进一步，模仿整个页面。由于新浪的页面创建的比较早，所以仅仅用静态的CSS样式和HTML就可以全部实现；我们要模仿的界面如图：此网页我们可以分为三部分：1.头部2.内容3.尾页所以为了系统的把控全局页面，我们先写出大致的轮廓，并且在每一个部分加上边框方便观看：<!DOCTYPE html><html> <head> <meta ...
复制链接

扫一扫