如何布局关于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高度不固定。所以当前场景下推荐第一种方式

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

二、css布局不需要html标签吗？

答案是必须要html标签，原因有以下几点：

第一点：因为css是一种描述html文档样式的语言，是个文本类型的文件，不能够被浏览器识别

第二点：html是一种超文本语言，只有他能够被浏览器识别，才能以数据的形式展现在人们眼中。

所以综上所述，css只有作用在html标签的元素上面才能发挥它真正的特效。

三、淘宝首页如何布局管理设置？

你好：

布局管理这里是没有保存按钮的。

你弄好布局后，在页面的右上方点：发布站点。

四、css布局网页不需要html标签吗？

需要，html为各种设备提供页面的结构，为CSS提供（视觉和听觉的）布局。HTML代表结构，CSS代表样式。HTML和CSS相辅相成缺一不可。

五、淘宝店铺pc端首页怎么设计？店铺首页布局思路？

1.店铺页头

店招：店铺的招牌

导航：店铺顶部的引导栏

店招的作用：展示店铺形象、推广促销活动和增加产品曝光

导航的作用：产品导航、活动

2.促销优惠展示

活动海报：展示店铺促销活动的海报

产品海报：展示主推产品的海报

活动海报的作用：促销活动推荐

产品海报的作用：主推产品推荐

3.促销优惠展示

优惠券：可以抵扣现金的卡券

优惠券的作用：让顾客感觉占便宜，促进成交转化

4.自定义活动页：具有自定义编辑功能的模块

自定义活动页的作用：利用跳转，呈现更多活动内容

5.促销优惠展示

活动专区（特价专区）：集中展示推荐宝贝的模块

活动专区的作用：增加推荐宝贝的曝光量和点击量

6.产品展示

主推品与次推品：展示主推宝贝的模块

主推品与次推品的作用：主次分明的呈现推荐宝贝

7.分类导航

图文导航：通过图文展示宝贝分类的模块

图文导航的作用：对首页流量进行快速引导

8.店铺公告：展示店铺公告的模块

店铺公告的作用：对重大事项进行首页公示提醒

9.页尾说明：店铺底部的说明栏模块

短视频：店铺首页的视频展示模块

页尾说明的作用：树立店铺（品牌）形象与减少买家沟通负担

短视频的作用：立体生动的传达品牌或产品信息

六、首页index.html中如何调用CSS系统和引用标签？

1.打开Dreamweaver 8，分别新建html和css格式的文件，分别存放在桌面web文件夹中的根目录和CSS文件夹中。

2.在首页index.html中为系统标签，因此在index.css文件中定义，语句表达方式为：body{ background:#4B7E9B; padding:0; margin:0;}，body标签与其它标签类似，其内部编程方式为：命令（如background），参数（如#4B7E9B（颜色代码）），上述语句的释义为：首页的背景颜色为#4B7E9B，填充为0，间距为0。

首页index.html文件中调用刚才定义好的body标签，语句表达方式为：<link rel="stylesheet" type="text/css" />

3.其它自己定义标签名称的标签为引用标签，它们的定义和调用方式与系统标签不同。某个引用标签语句表达方式为： .TOP1{ width:960px; height:30px; background:url(file:///D|/Users/ZhangZhaoJian/Desktop/web/images/topbg.gif) left repeat; float:left;}，

特别注意，TOP1为你自己定义的标签名称，为引用标签，为了与系统标签区别，在TOP1的前面有个 . 或 # ，在这里为 .TOP1。而标签内的语句编程方式与系统标签相同，上述语句的释义为：导航条的宽度为960像素，高度为30像素，背景是图片链接，向左填充。

4.首页index.html文件中调用刚才定义好的.TOP1标签，语句表达方式为：<div > </div>

七、学了html和css，但是自己做静态网页布局的能力很差不知道怎么提升？

建议详细读下CSS2.1标准，以下内容是在阿里实习期间，主管给的团队分享任务，选了CSS2.1标准这个方向，经过两周多细致研读，对CSS传统布局的粗糙理解，随意而写，多有疏漏，凑合着看。

CSS2.0/2.1传统布局围绕display/position/float三个属性

理解CSS传统布局首先要有『普通流』和『脱离普通流』的概念。

普通流遵循块元素从上到下，行内/行内块元素从左到右布局(direction默认模式下)。

display所有属性都属于『普通流』，父元素靠子元素撑起，其高度靠子元素高度递归计算得到，所以『普通流』中子元素继承没有明确指定高度的父元素会导致计算死循环(父依赖子，子继承父)，通常有人不管父元素有没有高度，子元素就去100%继承，是对这块理解不够深刻。

题主问的img属于『普通流』中的内联格式化上下文的布局规则，行内布局遵循baseline对齐规则，而且由于代码格式化编辑会导致HTML标签间充斥着空白字符，例如空格、tab、回车、换行等，这些空白字符会受字体渲染具有一定宽度，因此行内元素不仅距下有一定距离，行内元素之间也有一定的间距，而这些间距的大小受font-size和line-height影响。

『普通流』块元素之间的布局，又会导致相邻（上下相邻兄弟，相邻父子）元素外边距折叠计算(margin collapse)。

因此，普通流的布局无非是『垒砖块，盖房子』。

而position非static会形成层叠上下文，供absolute/fixed元素定位参考，非标准（低版本IE），对层叠上下文有不同定义，例如对无明确指定z-index只指定position非static属性的元素也形成层叠上下文，会导致一些BUG。

float非none会『脱离普通流』，浮动到包含容器的左右边界，造成文字环绕，标准里称之为『浮动会挤掉普通流中行框的宽度』，BFC可解决此类问题。

而float由于『脱离普通流』，会导致父元素高度『塌陷』，因此需要『闭合浮动』。

又由于float具有『挤掉普通流中行框的宽度』这一特性，非常适合做多列自适应布局，当然，新标准的flex和grid更合适。

CSS标准中会有很多『上下文』的概念，元素属于某个上下文，就要遵循『上下文』中定义的规则。

例如

层叠上下文中，可以通过z-index指定元素的层叠顺序。

块级格式化上下文（BFC）中元素要遵循外边距折叠计算的规则。

内联格式化上下文（IFC）中元素要遵循从左到右，baseline对齐，的计算等规则。

而表格也有其上下文，包含BFC、IFC以及一些自己的自动计算规则等等。

所有的这些，标准里都有清晰而详细的描述，花个一两周，认真钻研下CSS2.1标准的8、9、10章，相信你对传统布局会有全新的认识。当然，前提是要有一定基础。

八、怎么提高用html+css写静态页面能力,布局有哪些重点需要掌握的，哪里可以找到模板，如何切图？

主要靠实践和分析，并且布局很多种，总的来说就是你得熟悉布局规范后才能应对不同结构的网页。白天有知友邀请回答“如何规范布局网页结构”的问题，知乎上这类问题还挺多，我认为单就深入了解布局规范都足够说上一个月的，我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！

下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就是不要慌，先分析，将你认为难的问题拆分成多个问题区块，还解决不了就再拆分，直到变成能解决的小问题，一个个解决那些小问题最终大问题也就搞定了。咱们布局网页前也是一样套路，先分析整体的架构，画出布局图将大块拆分为小块，这样会更加直观看到网页的布局结构。我大致上用线框将网页内容划分为四个区块：顶部导航条区域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高度不固定。所以当前场景下推荐第一种方式

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

九、CSS是利用什么标记构建网页布局我们想要在HTML文档中加入图像，可以使用什么标记？

css是利用什么XHTML标记构建网页布局？

css是利用

的XHTML标记构建网页布局。

XHTML是相对HTML来说的，比html更严格，指的是网页结构规范等；而css用来美化各部分结构。

html利用div标签实现整体的网页布局，利用css实现网页的显示效果。

在网页前端布局中首先利用div对网页进行整体的结构布局，再利用css对内容的控制，利用javascript实现表现的分离！

十、请问html，css文本框里面的默认字体是灰色的，写上去是黑色的，求解。就像淘宝上的搜索框？

css设置文本框输入字体颜色： 直接设置placeholder的字体颜色为红色就行可以了。比如：input{color:#fff;}input::-webkit-input-placeholder{color:#fff;} 运行效果：