div怎么固定布局

div布局可以说是时下前端最流行的一种布局,那么怎么固定这个布局呢?通过本文,相信你会有所了解

操作方法

  • 01

    首先,先建立一个html文件,并在sublime中打开。

  • 02

    接下来定义三个div分别为first、second、third,并分别给这三个div一个尺寸。

  • 03

    可以看到second、third两个div不在一行上,如果我们要让他们在一行上该怎么做呢? 很简单,再定义一个div为middle,限制住他们两个。并给second、third两个div设置浮动。

  • 04

    接下来,框的尺寸定好了,我们来确定它们之间的相对位置。定位置的方式有两种,一种是通过比例来确定位置,一种则是通过像素来确定位置,但由于现在电脑屏幕的尺寸不尽相同,所以通过比例来确定位置兼容性比较好。 设置first div距左端15%,middle也是。

  • 05

    x方向的位置定好了,我们来定y方向上的位置,设置middle距first为20个像素。这几个div的位置就被固定好啦!

  • 06

    最后,我们做一些修饰。

(0)

相关推荐

  • DIV+CSS 网页布局常用的书写规范

    DIV+CSS 网页布局常用的书写规范 文件命名规范: 01 全局样式:global.css :框架布局:layout.css :字体样式:font.css :链接样式:link.css :打印样式: ...

  • div+css怎么布局

    div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率. 操作方法 01 div 所谓<div>标签我们可以理解为一个盒子. 例如:<div class=" ...

  • div+css经典布局教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  • div+css浮动布局怎么用

    Div+css布局在网页设计中很常见,而布局中也经常会用到浮动(float)这个属性,那么div+css怎样浮动布局呢?一起来学习一下吧! 操作方法 01 首先,在一个新的HTML文件里面书写一个id ...

  • Dreamweaver 怎么网页布局 div css布局

    div+css布局已经成为当前网页布局的潮流,通过盒子模型和浮动.定位来控制页面布局比以前的表格布局容易控制多了.如何用Dreamweaver实现div+css网页布局呢.小编为你分享我的. 操作方法 ...

  • 响应式网页设计布局

    响应式网页设计是目前流行的一种WEB设计形式,主要特色是页面布局能根据不同设备(平板电脑.台式电脑.智能手机)下能让内容适应性的展示,从而让用户在不同设备都能够友好的浏览网页内容,响应式有点像自适应的 ...

  • 如何制作简易DIV悬浮框

    我们在进行网页设计时,经常会遇到想设定一个悬浮DIV,却不知道怎么做的情况,下面我将告诉大家怎样制作一个简单的DIV悬浮框. 操作方法 01 使用Dreamweaver软件,打开一个已经编辑完成的ht ...

  • 新手学div+css的基础步骤

    本文主要介绍本人学习div+css网页布局的一种思路 软件工具 01 网页三剑客 步骤/方法 01 从局部出发:从一个小的部分的样式写起,目的是让你熟悉css样式的元素有哪些,那些元素都有一些什么作用 ...

  • 【CSS】怎么解决浏览器兼容性问题

    undefined 操作方法 01 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padd ...