网页设计inline_在网页设计中display:inline-block

1、网页设计中,属于常用布局的块状结构是什么

块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。
一.结构化块状元素
这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术（如JavaScript）都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。
主要的结构化块状元素
* <ol>
* <ul>
* <dl>
* <table>
支持结构化的元素
* <li>
* <dt>
* <dd>
* <caption>
* <thead>
* <tbody>
* <tfoot>
* <colgroup>
* <col>
二.终端块状元素
这类元素用于从结构转向内容，它们拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。
终端块状元素
* <h1>...<h6>
* <p>
* <blockquote>
* <dt>
* <address>
* <caption>
三.多目标块状元素
所谓多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。
多目标块状元素既可以包含块状元素，也可以包含内容（文本与行级元素的组合为内容），但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素，受HTML校验器的限制，目前还没办法检验出此种情况，但是应该避免。
多目标块状元素
* <div>
* <li>
* <dd>
* <td>
* <form>
* <noscript>
在谈论CSS布局时，我们需要提前知道一些东西。对于html各种标签/元素，可以从块的层面做一个分类：要么是block(块元素)，要么是inline(内联元素)：
block元素的特点：
* 总是另起一行开始；
* 高度，行高以及顶、底边距都可控制；
* 宽度缺省是它所在容器的100%，除非设定一个宽度。
inline元素的特点：
* 和其它元素都在一行上；
* 高度，行高以及顶、底边距不可改变；
* 宽度就是它所容纳的文字或图片的宽度，不可改变。
下面对它们的性质及应用做进一步说明：
◎块元素(block element) 通常作为其它元素的容器，它可以容纳内联元素和其它块元素。
我们知道默认情况下，块元素会顺序以每次另起一行的方式往下排，而通过CSS控制其样式，我们可以改变这种默认布局模式，把块元素摆放到你想要的位置上去。需要指出的是，table标签也是块元素的一种，基于table表格和基于CSS+DIV的布局，在使用者看来除了页面载入速度的差别（table在所有内容元素加载完成后才显示），没有其它的差别。但是从页面的源代码来看，这种差异就非常大了。基于良好结构理念设计的CSS布局源码，至少能让没有 web开发经验的用户很容易找到连续的页面内容。从这个角度来说，CSS layout code应该有更好的美学体验。
我们可以把模块化的DIV想象成一个个box，然后把它们按自己的意愿排列组成完整的内容，网页布局设计就是遵循了同样的模式。
块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单（只能用来容纳其它块元素）
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
◎内联元素(inline element) 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。
为了比较明确的表现出 block 与 inline 的区别，我们可以利用它们各自的代表元素div和span的演示进行说明：
XXXXXXXXX
This's a DIV layout
XXXXXXXXX
div另起一行，它的形状不受内部文字的影响
XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行，span刚好包容文字
内联元素(inline element) HTML标签分类明细
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
◎可变元素是基于以上两者随环境而变化的，它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别，它就遵循块元素或者内联元素的规则限制。
可变元素 HTML标签分类明细
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
但是通过CSS，我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。例如，我们可以对块元素[ ul ]标签加上 display:inline 属性，让原本垂直的列表水平显示，这在我们设置Blog导航条时得到了广泛应用；我们也完全可以把内联元素[ cite ]加上 display:block 这样的属性，让它也有每次都从新行开始的属性。

2、网页设计中,span标签是什么东西啊?

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
提示：事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>

CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
说的简单点就是给一些文字图片加一个定义！然后改变文字和图片的样式

3、网页设计中如何解决浏览器兼容问题？

1. 目标不居中；
一般新手都爱出现这个问题，主要原因是对盒子模型不够理解，如果发现你的页面没有居中，基本上有两种情况：
a. 如果是在浏览器中没有居中，就是没盒子，就是要用一个大DIV把所有需要居中元素装起来，然后给盒子一个css样式margin:0 auto;
b. 如果想要盒子内的元素居中，必须定义盒子的绝对宽度,然后给盒子一个CSS样式text-align:center;

2. 目标在不同浏览器上的位置不同；
a. 首先不要去急着找hack,先看一下自己的代码有没有错误，DW里有一个“检查浏览器兼容性”功能特别实用；
b. 然后，尽量让目标的位置初始化，使之在所有浏览器都处在同一个位置，这个条件的前提是，不写hack，最后再一个方位一个方位调整。

3. 目标与目标之间距离在各个浏览器上的区别；
a. 给其中一个目标加背景颜色；
b. 观察背景色与另外一个目标的距离，查看是不是这个目标造成的距离问题
c. 如果不是上一个目标，那就给另外一个目标也加上背景颜色。
d. 这样很容易判断出那个目标造成的原因，就针对那个目标进行修改。

4. IE6兼容问题最多的一个，浮动问题。
a. flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，解决方法：
只需要给这个DIV加一个样式：display:inline;
b. 布局的时候经常会遇到这种情况：发现有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现。
解决的办法：清除浮动，在设置过浮动的那个DIV下面加一个DIV，给个样式clear:both;如下
<div style="float:left;height:100px; width:500px;"> <div style="clear:both;"> <div style="height:100px; width=300px">

5. IE8兼容问题
ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" />

6. 背景兼容问题
有的时候明明给一个DIV加了背景颜色或背景图片，但是却显示不出来或者显示不全。
解决办法：首先，有可能是DIV没有设置绝对高度。如果设置了宽度和高度还没有效果，那么给DIV一个样式display:block；（通常a:hover加背景的时候经常遇到）。
另外，如果高度必须要设置成自动的话，那么就给DIV一个样式overflow:hidden;

7. IE7和Firefox兼容问题
很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好使，就是FF下有问题。
解决方法：height:100px;/*FF下显示100的高*/ +height:120px;/*IE678下显示120高*/
原理：FF不识别加过符号的属性，而IE识别。

4、网页设计中，怎么用CSS让不同行的字显示在一行，例如图所示，上面怎么变成下面这种？

可以通过浮动来设置，让不同行的两行一个左浮动，一个右浮动，这样，它们就显示专在一行了。属
还有一种方法是所有元素都左浮动，然后指定宽度，让宽度正好是两列的值，那么到两行的时候，它会自动折行。
通过决定定位，分别对没一行文字进行绝对定位，因为是绝对定位，所以可以指定它们到任意位置。position:absolute可以解决这个问题。

5、设计自己的网页

初级前端

主要学习三个部分：HTML，CSS，JavaScript

一、html + css部分：这部分特别简单，到网上搜资料，书籍视频非常多。css中盒子模型，流动，block，inline，层叠，样式优先级等这些自学起来也是非常容易。最后再深入了解下浏览器差异性，ie9以下兼容简单了解就行了，ie9以下浏览器被淘汰掉是趋势，低版本没必要浪费大量时间去学习兼容主流浏览器，google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多，建议在实践中多多积累。

二、JavaScript部分。1.基础学习：难点，也是重点，要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，有很多比较抽象的概念，必须要深入理解，比如闭包、原型、面向对象、封装等，要理解透彻。看书是必不可少的，找一本优秀的js书从头到尾，反复研究学习，第一遍可以快速翻阅，大体知道了解概念即可，第二三遍就需要深入学习了。另外，js面向对象编程必须要学习，非常重要，个人推荐一本书， Stoyan Stefanov著，凌杰译的《javascript面向对象指南》。边学边练，实践出真知。

针对那些有条件的人来说，很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的，为了让想学习的人可以更好的学习，给大家推荐一个裙，前面是6 1 1，中间是肆二 8，最后面就是壹四二，这里有很多想学习的人和你一起交流，也有大牛每天晚上免费教学，想要学习的人都可以加入我们，但是我们只欢迎想学习的人，不是来学习，随便看看的就不要进了。

2.jQuery学习：这些基础知识掌握好之后，还需要学jQuery，这是一个非常优秀的Javascript库，大型开发必备。它简化了Javascript的复杂操作，消除了Javascript跨平台兼容问题，提供了大量实用方法，有良好的文档和帮助手册，是一个非常成熟的Javascript库。慕课网学习视频幕课网。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。

大概流程就是这样，如下图所示：3.进阶学习：有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：易维护，可测试，高性能，低流量（移动端）。

中高级前端

1.工具学习习：大型项目中，前端代码构建已经不是简单的压缩一下了，依赖管理、模块合并、各种编译步步不可缺少，需要学会使用grunt、gulp等前端构建工具，要学习的还有：包管理器bower、npm，代码优化CSS Lint、JSHint、JSLint，CSS预处理器less、sass,代码管理及版本控制svn、Git，web框架/服务器Node、Express，代码规范、HTML模块化、css模块化。

2.布局框架学习如Bootstrap。

3.新技术html5学习。

4.js框架学习，requireJS、 AngularJS等，往前端架构师靠近。

5.nodejs学习。

到招聘网站，参考任聘要求，准没错，举例如下：

1.精通html和css，能制作符合W3C标准的静态页面；2.精通JavaScript编程，对面向对象编程思想有深刻理解；3.精通主流Javascript库/框架jQuery；4.理解并掌握JavaScript语言核心技术DOM、BOM有Javascript性能优化经验；5.对浏览器兼容性有深入的研究，精通各种浏览器问题；6.了解Backbone.js、AngularJs等MVC框架并有实际项目开发经验；7.了解http://asp.net等服务器后台技术和拥有一定的C#编程能力者优先；8.对交互体验、可用性、用户体验有一定程度的理解；9.有良好的责任心和团队合作能力、能承受较大的压力；

自己动手搜索下吧，确定目标和方向，以上是个人路线，仅供参考。

6、网页设计类似百度搜索页面是怎么做出来的

网页设计这个一般都是要求会前端代码，html css js flash 还有些其他的脚本插件什么的。

如果代码写的熟练可以不用DW。写网页的工具很多，用txt文本文档也可以。

好了，贴上搜索框代码，使用需要后台程序支持，直接点了可是什么都没有哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }

      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

7、网页设计模仿百度首页如下图

8、网页设计中如何解决浏览器兼容问题

为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。 CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。针对不同浏览器，可以将CSS Hack 网站设计代码整理如下：
1、针对I E 系列浏览器的网站设计代码针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ *display: block; } 即在网站设计CSS属性前加上一个星号即可针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可。
2、针对火狐的CSS Hack 网站设计代码火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3、针对 Safari 的CSS Hack 网站设计代码 Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，使用了KDE的KHTML作为浏览器的运算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、针对 Opera 的CSS Hack 网站设计代码 Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。

9、建立网站的时候，为什么不建议用inline styles? 求正解

inline styles即CSS内联样式，不利于CSS代码的集中管理和页面的打开速度，一般建议使用External Style即CSS外联样式设计网页。

10、在网页设计中display:inline-block,是什么意思？

inline元素都使用默认高度，你设置了也没有效果。
block元素默认情况下独占一行（就像元素前后都给加了一个换行），可以设置宽度、高度。
设置了inline-block的元素，你给它设置宽高有效果，而且还前后都不换行。
img就是一个典型的inline-block元素。

导航:首页 > 万维百科 > 网页设计inline

网页设计inline

与网页设计inline相关的知识