PC端布局注意事项

1、vertical-align只对inline-block或table-cell有效；

2、一个定宽的没定高的div，高度会自动自适应，但是若是一个英文单词过长则会溢出div，此时需要使用word-wrap或者word-break(单词会被切断)；

3、两端定宽，中间自适应：

a.table-layout:fixed;　　b.flex;　　c.双飞翼布局。

原文地址：https://www.cnblogs.com/JIEJIANG/p/9769991.html

时间： 2024-10-07 18:17:37

PC端布局注意事项的相关文章

移动端布局注意事项及解决

1.winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 1.关闭iOS键盘首字母自动大写 <input type="text" autocapitalize="off" /> 2.禁止文本缩放 html {-webkit-text-size-adjust: 100%;}

移动端布局注意事项学习之一

0.winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 1.关闭iOS键盘首字母自动大写 <input type="text" autocapitalize="off" /> 2.禁止文本缩放 html { -webkit-text-size-adjust: 100%;}

移动端布局注意事项与less

用Koala实现less的实时编译 1.下载Koala(Koala可以实现实时编译) 2.把CSS文件夹(如index.css,index.less)拖到Koala中 3.点击到需要编译的index.css,如: 4.点击Compile即可实现实时编译.Koala会在底部最小化运行. less的语法 1.less可以定义变量,便且可以实现计算如:[若是UI给的图是750,则@r=750/script代码适配的时候随意除的数:@r也=根字体大小*2(这个根字体大小是指的设计图的尺寸/2的手机下看

精通移动端布局 - 实践篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念物理像素设备独立像素 CSS 像素 PPI的概念 DPR的概念缩放的概念 viewPort 的概念 viewport 渲染流程 Meta 标签说明移动端布局实践混合方式 REM 方式响应式 JS自动换

第 31 章项目实战-PC 端固定布局[4]

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w

第31章项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现. 一．准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

将PC端的网站转化成手机端网站需要增加以下这段代码即可，再布局一下界面即可

第 31 章项目实战-PC 端固定布局[5]

学习要点: 1.底部区域 2.说明区域 3.版权及证件区主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游 FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号. //底部区域父元素 <footer id="footer"> ... </footer> //底

PC端固定布局1

<!doctype html> <html lang="zh-cn"> <link rel="stylesheet" href="弹性伸缩布局.css" type="text/css"> <head> <meta charset="UTF-8"> <title>PC端固定布局</title> </head> &l