【静态页面架构】HTML之布局

imtianx 发布于2019-08-02 11:21 / 3293人阅读

摘要：一布局水平居中第一种居中方式以属性设置父级元素和设置行内块级元素将属性设置父级元素设置文本内容水平方向居中设置行内块级元素爱新觉罗呼延觉罗第二种居中方式以设置块级元素和外边距特性来设置外边距实现水

一.布局； 1.水平居中 第一种居中方式；

以text-align属性设置父级元素和设置行内块级元素





    爱新觉罗

呼延觉罗

第二种居中方式；

以设置块级元素和外边距特性来设置

 



    爱新觉罗

爱新觉罗

第三种居中方式；

以设置绝对定位和trannsform属性值来实现居中





    爱新觉罗
    

爱新觉罗

第四种居中方式；

以设置相对定位和trannsform属性值(translateX)

 



    爱新觉罗
    

爱新觉罗

2.垂直居中； 第一种居中方式；

以设置父级元素为单元格，垂直方向居中





    爱新觉罗
    

爱新觉罗

第二种居中方式；

以设置子级相对定位和transform属性值(translateY)





    爱新觉罗
    

爱新觉罗

第三种居中方式；

以设置子级元素相对定位和transform属性值(translateY)

 



    爱新觉罗
    

爱新觉罗

3.居中布局； 第一种居中布局；

以设置父级相对定位和子级绝对定位；transform属性值translate;

第二种居中布局；

以设置父级单元格和外边距特性

4.两列布局； 第一种两列布局；

设置左浮动和外左边距




这是作为左边的定宽

第二种两列布局；

以设置左浮动和开启BFC模式来设置

 


这是作为左边的定宽

第三种两列布局；

以右浮动和外左边距来设置




这是作为左边的定宽

第四种两列布局；

以设置父级为display属性值(table)





    这是作为左边的定宽

云服务器 GPU云服务器 html页面布局 html块页面布局 html页面布局命令 html5页面布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52926.html

【静态页面架构】CSS之表格

摘要：架构表格元素表格的基本结构以元素建立表格元素是表格行，元素是表示表格单元格表格以行和列表示容器元素属性默认的表格和单元格都有边框表格默认是有宽度的单元格之和决定元素表示表格中的单元格单元格默认宽度由内容决定姓名年龄职业桐人 CSS架构表格: 1.元素: 表格的基本结构；以table元素建立表格tr元素是表格行，td元素是表示表格单元格 ...

instein 2019-08-29 16:32 评论0 收藏0
webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

摘要：回到纯静态页面开发阶段，让页面不需要后端渲染也能跑起来。改造开始本文着重介绍如何将静态页面改造成后端渲染需要的模板。总结在后端渲染的项目里使用多页应用架构是绝对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000820338...

dinfer 2019-07-01 12:21 评论0 收藏0
webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

摘要：回到纯静态页面开发阶段，让页面不需要后端渲染也能跑起来。改造开始本文着重介绍如何将静态页面改造成后端渲染需要的模板。总结在后端渲染的项目里使用多页应用架构是绝对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000820338...

dingda 2019-08-20 13:57 评论0 收藏0
webpack多页应用架构系列（十三）：构建一个简单的模板布局系统

摘要：原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上文多页应用架构系列十二利用生成普通网页页面模板我们基本上已经搞清楚如何利用来生成普通网页页面模板，本文将以我的脚手架项目介绍如何在这基础上搭建一套简单的模板布局系统。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 评论0 收藏0
设计架构

摘要：先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案，希望具有参考价值。，和都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式。如何无痛降低 if else 面条代码复杂度相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没...

graf 2019-06-24 17:56 评论0 收藏0