新浪网页面"/>
HTML学习记录:使用HTML与CSS模仿新浪网页面
上次我们使用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
更多推荐
HTML学习记录:使用HTML与CSS模仿新浪网页面
发布评论