<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; } 但是到了移动端,如果写百分比布局的话,高度不好确定,所以弹窗居中就会变得困难,今天遇到这个问题,百度了一下,看到这位朋友的资料,(http://www.shejida…
常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:flex(Webkit内核的浏览器,必须加上-webkit前缀.) 5. 响应式布局:媒体查询,如 &:hover 6. 定位布局:position 弹性布局: 概念:用Flex布局的元素,称为Flex容器,他所有的子元素自动成为成员,成为Flex项目 例举作用: · 可以通过设置项目(flex容器中…
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:margin: 0 auto element { margin: 0 auto; } 2:负边距+绝对定位 .outside { width:500px; height:200px; background-color: red; margin:100px auto; position: relative;…
我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使用浮动(float).定位(position).显示模式(display)相关属性结合使用,以达到预期效果. 一 文档流 文档流就是HTML文档内所有元素按照一定规律排列并显示的形式. CSS文档流大致可以分为3种:标准流,浮动流,定位流. 1,标准流 默认情况下,HTML元素都在标准流中呈现和展示…
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高…
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative 相对 absolute 绝对 fixed 固定 1.1 静态定位 静态定位意味着"元素默认显示文档流的位置".没有任何变化. 1.2 相对定位 relative 1.特征: 给一个标准文档流下的盒子单纯的设置相对定位,与普通的盒子没有任何区别 留"坑",会影响页面布局…
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单布局</title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } .header{ width: 1000px; height: 100p…
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有任何思路的情况下,可以参考大量同类型的网站,了解一下大致结构.我们将要做的网站是一个旅行社的企业网站.经过大量参考,首页上,我们选择了最基本的四个模块. 四个基本模块:nav 导航.header头部.section首页主体.footer尾部 <!DOCTYPE html> <html lan…
按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"> <title>Docum…