如何布局关于HTML与CSS布局技巧？

一、如何布局关于HTML与CSS布局技巧？

@误人子弟 谢邀！这个问题范围实在挺广，不同网页整体结构不同，场景不同使用技巧也有不一样的。没想到这类问题还蛮多，等晚上下班了抽时间写一篇这方面的文章，有兴趣的可以先关注我看看！

----修改于2019.3.5，有点长，需要耐心观看

知乎上这类问题还挺多，我认为单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！

下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就是不要慌，先分析，将你认为难的问题拆分成多个问题区块，还解决不了就再拆分，直到变成能解决的小问题，一个个解决那些小问题最终大问题也就搞定了。咱们布局网页前也是一样套路，先分析整体的架构，画出布局图将大块拆分为小块，这样会更加直观看到网页的布局结构。我大致上用线框将网页内容划分为四个区块：顶部导航条区域topnav（蓝色线框）、头部分类导航区域header（绿色线框），主体内容区域main（紫色线框）、网页底部信息区域foot（橘色线框）。

（注意：在初学不知道如何布局时建议使用画图工具做辅助分析。且并非只有这一种区块划分方式，布局有很多种，我只从其中挑一种来写，讲不完=_=||）

这里我是按照整体网页的内容进行区块划分的：（每个线框都为一个标签盒子）

• topnav（顶部导航区域）：从整体布局来看，topnav展示的内容都是小米网站下所有类别的子产品导航，而小米网站的首页主题是商城（直接展示电子类产品），它跟主题不符，所以这块区域单独划分出来。整体区块使用nav标签，考虑兼容性的话就使用div标签。
• header（头部分类信息导航区域）：这块区域主要包含不同商品的分类导航和其他的服务导航，和主题也不太相符。轮播和轮播下方图片因为位置原因，打开该网页第一眼看见的就是这部分区块，即便其中也包含商品，但更多的是具有广告位的性质，这里就单独划分出header区块。整体区块使用header标签，考虑兼容性的话就使用div标签。
• main(主体内容区域)：小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块（实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心），布局的重复性很高。整体区块使用main标签，考虑兼容性的话就使用div标签。
• footer（网页底部信息区域）：这部分几乎没啥好说的，展示的都是网站特色、网站信息，也单独划分一个块。整体区块使用footer标签，考虑兼容性的话就使用div标签。

代码如下：（考虑兼容IE）

<div id="pagewrap">
    <div id="page-topnav"></div> <!--导航区域-->
    <div id="page-header"></div> <!--头部分类信息导航区域-->
    <div id="page-main"></div> <!--主体内容区域-->
    <div id="page-footer"></div> <!--网页底部信息区域-->
</div>

这样咱们就将网页划分为四大块了，看起来难度是不是比之前要小一点了呢？那下一步就是将各个区块看做单个的整体，对它进行分析再拆分。

topnav布局分析

• 红色线框：顶部导航栏区域（）
• 黄色线框：内容盒子
• 蓝绿色线框：左右两块列表区域

如下布局图所示，顶部导航栏区域中，内容盒子宽度在1226px，水平居中，其内部又分为左右两块列表区域和一个div盒子（购物车），都包含着文字链接。

对应标签结构代码：

<div id="page-topnav">
    <div class="container">
        <ul class="topbar">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
        </ul>
        <ul class="info">
            <li><a href="#">登录</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">登录</a></li>
        </ul>
        <div class="cart">
            <a href="#">购物车</a>
        </div>
    </div>
</div>
<!--文字内容我懒的写，复制粘贴的，自己私下练习记得一个个敲-->

标签搭建好结构还需要搭配css来使用，这里顺便把相关的css技巧我也讲一些。 .container（黄色线框）本身就是一个块级元素，不改变元素类型的前提下实现水平居中有以下几种方式：

• 第一种：（当前场景下推荐使用这种居中方式）

#page-topnav .container{       
    width:1226px;      
    margin：0 auto;   
}

使用margin：auto实现自动计算达到水平居中，注意这种居中方式作用对象必须是块级标签，且有固定的宽度才可以实现

• 第二种：

#page-topnav .container{       
   position: relative;       
   left: 50%;       
   width: 1226px;       
   margin-left: -613px;   
}

使用相对定位，通过设置left让.container向右移动50%的相对距离，再利用负左外边距向左移动自身宽度的一半距离，达到水平居中的效果。参考下图：

两个左右ul分别添加左浮动float:left;和右浮动float:right;就能实现左右对齐。

li中的文本实现水平垂直居中的2种方式：

• 第一种：

.container .topbar li{       
   height: 40px; /*盒子高度*/       
   line-height: 40px; /*行高*/       
   font-size: 14px; /*文字大小*/       
   text-align: center; /*盒子内的文本水平居中*/   
}

将文本的行高与li盒子高度设为一致，达到文本垂直居中效果。

• 第二种：

.container .topbar li{       
   padding: 10px;   
}

给li添加内边距，实现文本上下左右居中效果，但会造成li高度不固定。所以当前场景下推荐第一种方式

----先分享出来，希望帮到你，有问题可以扣我！临时有事写不完了，后续再更新----

二、html5和css3与html和css的区别？

　　HTML5是HTML的最新标准版本，而css3则是css的最新标准版本。平时大家说HTML5+CSS3，其实指的就是利用这二者的新特性来开发项目。　　HTML5相对于以前的HTML4版本，主要朝着语义化、现代化的方向发展，去掉了一些纯表现形式的标签，增加了一些语义化的标签和多媒体标签，更加符合现代开发需要。而CSS3呢，基本上是向下兼容以前的标准，在以前的基础上添加了不少新特性。利用HTML5+CSS3组合，可能简单几行代码就能够实现以前需要很多代码配合js才能实现的功能。

三、html+css+js小案例（项目源码）？

这么多要求。又不要这 又不要那的。本来我有很多代码。但是怕不符合你要求，还是不提供给你为好。

四、html css全称？

css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS是一种层叠样式表，用来表示html样式的一种编程语言，目前css的最新版本是css3，css是可以做到网页和内容进行分离的一种样式语言。

五、css如何美化html？

css美化网页的方法：

1.首先准备需要修饰的html代码；

2.然后设置div的width限制整体的大小，设置margin:0 auto让它居中显示；

3.最后把子元素设置成左右浮动，并在父标签里取消浮动即可。

以上只是个人见解，提供材料供参考，具体可查询相关资料。

六、html如何创建css？

使用内嵌式创建

内嵌css样式就是把css代码放在特定页面的<head>部分中。类和ID可用于引用CSS代码，但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式，这样可以提高加载速度。在某些情况下使用内嵌样式表很有用，比如：向某人发送页面模板， 因为一切都在一个页面中，所以看到预览要容易得多。内嵌CSS要放在<style></style>标签之间。

七、html与css经典网页实例

在现代互联网时代，与CSS是构建网页的两个基础技术。HTML是超文本标记语言（HyperText Markup Language）的简称，用于结构化网页内容。CSS是层叠样式表（Cascading Style Sheets）的简称，用于定义网页的样式和布局。HTML与CSS的结合可以创建出美观、功能丰富的网页。

本文将介绍一些经典的HTML与CSS网页实例，帮助初学者更好地理解和应用这两个技术。

1. 静态个人简历页面

一个个人简历页面是展示个人经历、技能和作品的理想方式。通过HTML与CSS，我们可以创建一个简洁、易于阅读的个人简历页面。

以下是一个静态个人简历页面的HTML与CSS示例：

八、css怎么放在html上？

css是样式层级结构的缩写，是页面控件，布局的样式集合。html是超文本传输协议的缩写。包含所有静态的页面控件和布局标签。他们是要配合使用的，单独一者意义不大的。css是在hrml标签控件中，作为标签属性被引用的。使用起来非常方便。可以实现很多绚烂的效果。

九、css怎么写在html中？

HTML5中使用CSS3的方法

●行内样式

行内样式方法直接在HTML标记中style属性

●内嵌样式

将CSS样式代号添加到<head>与</head>，并且用<style>和</style>标记进行声明

●链接样式

指在外部定义CSS样式表并形成以.css为扩展名的文件，在页面中通过<link>标记链接到页面中。注:该<link>标记必须放在页面的<head>标记区！

●导入样式

指在内嵌样式表的<style>标记中，使用@import导入一个外部的CSS文件

十、html和css怎么关联？

html关联css的方法如下：

一、行内式

使用style属性在特定的HTML标记内设置CSS样式。

建议不要使用内联CSS，因为每个HTML标记都需要单独设置样式，如果您只使用内联CSS，管理网站可能会变得十分困难。但是，它在某些情况下很有用。

二、内嵌式

内嵌css样式就是把css代码放在特定页面的<head>部分中。内嵌CSS需要放在<style></style>标签之间。

类和ID可用于引用CSS代码，但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式，这样可以提高加载速度。

在某些情况下使用内嵌样式表很有用，比如：向某人发送页面模板， 因为一切都在一个页面中，所以看到预览要容易得多。

三、外联式

外联式就是使用link标签元素将外部CSS文件（.css文件）引用到HTML页面中，引用需要放在页面的<head>部分中。