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

虚拟屋 2023-08-07 05:33 编辑:admin 297阅读

一、如何布局关于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;} 运行效果: