网页设计基础内容总结（五）

最新推荐文章于 2024-10-11 23:02:16 发布

勤奋的喜羊羊

最新推荐文章于 2024-10-11 23:02:16 发布

阅读量283

点赞数

分类专栏：学习笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_67859413/article/details/127882862

版权

学习笔记专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的标准流布局，包括盒子模型的概念、尺寸计算方式以及IE盒子模型的区别。通过一个实际案例展示了如何制作网页的页头，包括logo、导航菜单、banner和页面路径的布局。强调了不同浏览器对盒子模型的理解差异，提醒开发者注意兼容性问题。

摘要由CSDN通过智能技术生成

前言

前言：。。。

一、CSS标准流布局

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

对部分标签的解释。

header——页头；

content ——正文；

footer——页尾；

外部样式的插入操作示例（链接式）

对这个CSS标准流布局的设计步骤，我就只挑重点的来讲讲。

步骤1.设置<header>和<footer>标签的公共样式。（使用并集选择器），具体代码如下：

header,footer{    /*并集选择器*/
    width:960px;    /*设置主体页面的宽度*/
    margin:0 auto;    /*设置主体页面左右居中显示*/
    background-color:#FFF;    /*设置背景颜色*/
}

步骤2.设置页面底部<footer>标签的样式。具体代码如下：

footer{
    text-align:center;
    background-color:#b2a695;
    line-height:25px;
    padding-top:20px;
}
/*该<footer>块的实际高度为line-height×2+padding-top=50px+20px=70px*/

盒子模型的概念

一个标准的W3C盒子模型由content（内容）、padding（填充，也称内边距）、border（边框）和margin（外边框）4个属性组成。content就是盒子里装的东西，我们使用width和height属性为盒子设置宽度和高度时，不是盒子的实际大小。border是盒子的边框，它是有border-style（边框线型）、border-width（边框宽度）、border-color（边框颜色）属性；padding是content与border之间的距离，margin是盒子与其它盒子之间的距离。

盒子尺寸的计算方式

实际width：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right。

实际height：height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom。

IE盒子模型

与标准的W3C盒子模型不同的是IE盒子模型的width和height部分包含了border和padding，当cont超出盒子设定的width和height时，盒子会随着content的内容变大。在不考虑content内容超出设定的width和height的情况下，IE盒子本身的大小就是为盒子的width和height设定的值·，border和padding包含在里面。如果不加DOCTYPE声明，那么每个浏览器就会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释盒子，而Firebox（火狐）浏览器会采用标准的W3C盒子模型去解释，因此使得网页在不同的浏览器中会显示的不一样。

二、案例一

一、制作页头部分。

下面开始制作新闻显示页面的页头，整个页头主要包括4大部分：Logo、导航菜单menu、banner图像、页面路径lujing。

步骤1:在<header></header>标签对中添加网页的logo部分内容，只需插入logo图像即可。相关代码如下：

<body>
<header>
    <img id="logo" src="images/logo.gif" width="230" height="54" class="left">
    /*这里的img标签的class属性牵涉到了JS的部分内容，有兴趣的同学可以去了解一下。它其实就是设置类的一个属性，用于批量设置CSS样式或是JS脚本的调用*/
</header>
<div id="content">
<footer>版权信息：&copy青花大学.计算机系所有<br>1911-2022</footer>
</div>
</body>

步骤2：添加网站导航菜单内容。导航菜单的代码如下：

<header>
<img id="logo" src="images/logo.gif" width="230" height="54" class="left">
<nav id="menu">
    <a href="#">首&nbsp&nbsp页</a>
    <a href="#">集团概况</a>
    <a href="#">新闻中心</a>
    <a href="#">产品服务</a>
    <a href="#">企业文化</a>
    <a href="#">综合业务</a>
    <a href="#">品牌建设</a>
    <a href="#">人力资源</a>
    <a href="#">国际合作</a>
</nav>
</header>

步骤3：添加页面banner的内容。直接在步骤2插入的id名为menu的<nav>标签对的后面插入即可，代码省略不写。（“banner”是横幅的意思）

步骤4：添加页面路径内容。代码如下：

<header>
<img id="logo" src="images/logo.gif" width="230" height="54" class="left">
<nav id="menu">
    <a href="#">首&nbsp&nbsp页</a>
    <a href="#">集团概况</a>
    <a href="#" class="selected">新闻中心</a>
    <a href="#">产品服务</a>
    <a href="#">企业文化</a>
    <a href="#">综合业务</a>
    <a href="#">品牌建设</a>
    <a href="#">人力资源</a>
    <a href="#">国际合作</a>
</nav>
<img src="images/zbanner.gif" height="186">
<section id="lujing">□您目前的位置：<a href="#">首页</a>&gt;&gt;<a href="#">新闻中心</a>
&gt;&gt;<a href="#">集团要闻</a></section>
</header>
/*"&gt"是大于号（＞），不会有细狗不知道吧*/