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

编程入门 行业动态 更新时间:2024-10-14 04:27:41

HTML学习记录:使用HTML与CSS模仿<a href=https://www.elefans.com/category/jswz/34/944797.html style=新浪网页面"/>

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模仿新浪网页面

本文发布于:2024-03-09 17:22:49,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1725587.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:新浪网   页面   HTML   CSS

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!