随笔分类 -  【009】网站布局

三栏布局的5种方案
摘要：题目： 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应的设置方案有几种？ 这里考察的是你对CSS的理解 首先初始化样式 body{ margin:0; padding:0; } HTML编写 由于三栏布局HTML代码几乎差不多，下面就不过多重复编写了。 <body> <s 阅读全文
posted @ 2020-02-28 19:40 给时光以生命 阅读(455) 评论(0) 推荐(0)
页面布局之三栏布局的5种方案
摘要：题目： 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应的设置方案有几种？ 这里考察的是你对CSS的理解 首先初始化样式 HTML编写 由于三栏布局HTML代码几乎差不多，下面就不过多重复编写了。 注： 浮动解决方案需要将 的类标签与 类互换即可。 下面我们将通过修改 样式 阅读全文
posted @ 2020-01-11 20:17 给时光以生命 阅读(839) 评论(0) 推荐(1)
网页布局——Flex弹性框布局
摘要：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 需要安卓4.4及以上版本可以使用display:-webkit-flex;，安卓4.4以下使用display:-webkit-box 阅读全文
posted @ 2019-10-30 19:12 给时光以生命 阅读(580) 评论(0) 推荐(0)
网页布局——grid语法属性详解
摘要：grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie9,10宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人员必备的布局技能。 属性介绍 1.父元素上的属性 2.设置子元素上的属性 阅读全文
posted @ 2019-09-18 09:29 给时光以生命 阅读(1255) 评论(0) 推荐(0)
css3——box-sizing属性
摘要：很多朋友们可能会疑惑，不知道box-sizing属性是有什么作用，自己也很少会用到，但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px，5个子元素左浮动设置宽高均是100px都设置有边框。为什么第五个元素被挤下到第二排呢？ 例子1： 效果如下： 此时你可 阅读全文
posted @ 2019-09-14 22:37 给时光以生命 阅读(2246) 评论(1) 推荐(0)
网站布局——文档流
摘要：一、什么是文档流？将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。 二、什么是脱离文档流？元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态 阅读全文
posted @ 2019-09-09 11:47 给时光以生命 阅读(448) 评论(0) 推荐(0)
display——table-cell属性
摘要：display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 当两个或者两个以上标签一起使用显示在同一行时，以前常用的是float、position进行布局，在高版本的浏览器可以使用flex、grid进行布局。无意中发现使用display: 阅读全文
posted @ 2019-07-19 02:03 给时光以生命 阅读(34040) 评论(0) 推荐(4)
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
摘要：准确的说，float浮动属于半脱离文档流，1、float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会顺序排列。可以参考设置 阅读全文
posted @ 2019-06-13 03:39 给时光以生命 阅读(19340) 评论(0) 推荐(0)
企业网站首页设计常见的6种布局方式
摘要：看到太多的网页设计师发布企业站的个人作品，设计中总是摆脱不了大框套小框的设计布局思路，不加思索的跳入单一的网页布局形式中，于是就有了把企业站常用的页面布局方式总结一下的想法，让大家包括我自己全面的了解一下企业站的常见布局方式，做到对此种类型的网站布局心中有数，跳出狭隘、单一的设计思路，于是就有了这篇 阅读全文
posted @ 2019-06-07 22:11 给时光以生命 阅读(6146) 评论(0) 推荐(1)
网页布局——双飞翼布局
摘要：圣杯布局与双飞翼布局的区别： 圣杯布局（两边定宽，中间自适应的另一种实现方式，这两种方式在结构的书写上还是有不一样的），主要是用相对定位与浮动和padding实现。 实现两边定宽，中间自适应，主要是通过浮动与margin实现，代码如下： 效果如下： 阅读全文
posted @ 2019-06-07 19:06 给时光以生命 阅读(888) 评论(0) 推荐(0)
网页布局——圣杯布局
摘要：圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 圣杯布局也可以做成以下几种布局方式： 1.固定宽度布局：为网页设置一个固定的宽度 阅读全文
posted @ 2019-06-07 18:40 给时光以生命 阅读(2226) 评论(0) 推荐(0)
网页布局——Box盒子
摘要：在移动端开发的时候，圣杯布局，弹性盒，是我们经常会用得到的，W3C很久以前就有一个display:box属性 在移动端开发的时候，圣杯布局，弹性盒，是我们经常会用得到的，W3C很久以前就有一个display:box属性 flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全 阅读全文
posted @ 2019-06-07 12:40 给时光以生命 阅读(3069) 评论(0) 推荐(0)
网页布局——grid弹性网格布局
摘要：网格布局（Grid）是最强大的 CSS 布局方案。 Flexbox 是为一维布局设计的，而 Grid 是为二维布局设计。 grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie9,10宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人 阅读全文
posted @ 2019-06-07 10:48 给时光以生命 阅读(910) 评论(0) 推荐(1)
网页布局——响应式布局
摘要：响应式布局是一个网站能够兼容多个终端 而不是为每个终端做一个特定的版本 @media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) and|not|only(三个关键字可以选) 1.meta 标签 最简单的处理方式是加上一个 meta 标签设置屏幕按1：1尺寸 阅读全文
posted @ 2019-06-07 02:13 给时光以生命 阅读(2689) 评论(0) 推荐(0)
网页布局——float浮动布局
摘要：我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂，这里详细讲一下 首先，什么是浮动？ 浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。 阅读全文
posted @ 2019-06-06 23:38 给时光以生命 阅读(15819) 评论(0) 推荐(2)
网页布局——table布局
摘要：table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式 而且也加入了 display：table;dispaly:table-cell 来支持 teble 布局。 但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成 阅读全文
posted @ 2019-06-06 12:59 给时光以生命 阅读(1693) 评论(0) 推荐(0)
Flex 布局——语法属性详解
摘要：前言 Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度 阅读全文
posted @ 2019-06-06 02:31 给时光以生命 阅读(5947) 评论(0) 推荐(1)
css浮动产生和清除浮动的几种方式
摘要：浮动的语法：float:left/right; 浮动float的原本设计了作用初衷是为了实现文字环绕效果 浮动产生负作用： 1、背景不能显示 2、边框不能撑开父元素 3、margin padding设置值不能正确显示 浮动之后会使父元素内的子元素漂浮在父元素上方，造成父元素边框重叠。所以需要清除浮动 阅读全文
posted @ 2019-05-30 16:20 给时光以生命 阅读(3115) 评论(0) 推荐(1)