60个css常用布局（行内元素有哪些（css行内元素有哪些））

本文目录

• 行内元素有哪些（css行内元素有哪些）
• css有哪些常用 控件
• div+css三行两列布局怎么写，求大神解答
• css+div常用标签有哪些
• DIV+CSS总结:有用的3个网页制作技巧
• CSS弹性布局

行内元素有哪些（css行内元素有哪些）

行内元素有：a_锚点；abbr_缩写；acronym_首字；b_粗体；bdo_bidioverride；big_大字体；br_换行；cite_引用。code_计算机代码；dfn_定义字段；em_强调；font_字体设定；i_斜体；img_图片。input_输入框。
行内元素特点：
和其他元素都在一行上；高度、行高和顶以及底边距都不可改变；宽度就是它的文字或图片的宽度，不可改变。
总的来说，内联元素一般都是基于语义级的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br”等。
块级元素：
address-地址；blockquote-块引用；center-居中对齐块；dir-目录列表；p-常用块级容器，也是csslayout的主要标签；dl-定义列表。
fieldset-form控制组；form-交互表单；h1-大标题；h3-副标题；h3-3级标题；h4-4级标题；h5-5级标题；h6-6级标题；hr-水平分隔线。
isindex-inputprompt；menu-菜单列表；noframes-frames可选内容，。
noscript-可选脚本内容；ol-排序表单；p-段落；pre-格式化文本；table-表格；ul-非排序列表。

css有哪些常用 控件

css有哪些常用控件可以分为三类，即id选择器、class选择器、标签选择器。
用法如下：
#id名 { 属性名:属性值; }
.class名 { 属性名:属性值; }
标签名 { 属性名:属性值; }
其中，他们之间又可以以不同的方式进行组合，如下：
后代选择器: 父代名 后代名 { 属性名:属性值; }
子代选择器: 父代名》子代名 { 属性名:属性值; }
群组选择器: #name1, .name2, #name div { 属性名:属性值; }
伪类选择器: name:伪类
通用(通配符)选择器: * { 属性名: 属性值; }

div+css三行两列布局怎么写，求大神解答

DIV+CSS三行两列经典布局

这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：

《html》 

《head》 

***隐藏网址***

《title》XHTML之经典三行两列布局 - seobbs.net《/title》 

《style type="text/css"》 

body 

{ background: #999; text-align: center; color: #333; fontfamily: Verdana, Arial, Helvetica, sans-serif; } 

a:link, visited 

{color:#004592;text-decoration:none;} 

a:hover {color:#004592;text-decoration:underline;} 

a:active {color:#004592;text-decoration: none;} 

img {border:0px;} 

#header { margin-right: auto; margin-left: auto; padding: 0px; width: 776px; background: #EEE; height: 60px; text-align: left;}

 #contain { margin-left: auto; margin-right: auto; width: 776px; } 

#mainbg { float: left; padding: 0px; width: 776px; background: #60A179; } 

#right { float: right; margin: 2px 0px 2px 0px; padding: 0px; width: 574px; background: #ccd2de; text-align:left; } 

#left { float: left; margin: 2px 2px 0px 0px; padding: 0px; background: #F2F3F7; width: 200px; text-align:left; } 

#footer { clear: both; margin-right: auto; margin-left: auto; padding: 0px; width: 776px; background: #EEE; height: 60px; }

 .text {margin:0px;padding:20px;} 

《/style》 

《/head》 

《body》 

《div id="header"》header《/div》 

《div id="contain"》 

《div id="mainbg"》

《div id="right"》 

《div class="text"》text《p》段落《 /p》《p》段落《/p》《p》段落《/p》《p》段落《/p》 《p》段落《/p》《/div》 《/div》 《div id="left"》 《div class="text"》left《/div》 《/div》 《/div》 《/div》 

《div id="footer"》footer《/div》 

《/body》 

《/html》

效果演示及代码：www.st539.com/news_view.asp?id=123

SEO角度分析这个布局的优势：

我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。

如上图标识所示，按传统的布局，代码编写顺序是“A-》B-》C-》D”，也可以理解为“功能-》功能-》核心内容-》功能”。

都知道，搜索引擎蜘蛛爬行时，是按着页面代码顺序自上而下的，这种情况下蜘蛛很难最快的爬行到核心内容；而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回，抓取到的是与其他页面一样的功能内容时，这个页面就成为相似网页。

为了避免这样的情况，包括新浪、搜狐、网易在内的很多网站（可能也包括你^_^），都在设计时将页面中B区和C区对调。

再来看本布局方式，页面代码顺序是“A-》C-》B-》D”，按内容分布可以理解为“功能-》核心内容-》功能-》功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。

这样，蜘蛛爬行时就能在最短时间内索引到网页的核心内容。

css+div常用标签有哪些

css+div常用标签有：
1.
在制作导航或者是列表的时候一般用的到的有：ul、li、a、font（size、color、family~),img标签也有会用到，background这个标签的属性也是要的；
2.
在处理定位的时候，position这个元素也是要的，float属性，用的也很多，还有就是width，height对于各个块的定义；
3.
在处理文字的文字的时候：有h，span，p这些都是常用的，，当然还有很多，这里只是一些我们会经常用到的。

DIV+CSS总结:有用的3个网页制作技巧

我们在进行DivCSS布局的时候，非常关注CSS技巧的学习，今天向大家推荐3个所谓的 “顶级”CSS技巧！虽然没有什么新意，但对新手而言却非常重要！
一、在一行内声明CSS
h3 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;}
h3 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
第二种看起 来的确格式化，但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
以前我也是写成类似第二种方式，但是逐渐发现就像文章 说的一样，没多大用。一行看起来又爽快又省地方还能让文件更小。
二、分块书写代码
这样书写代码可以让CSS更页面化，在出现问题时候可以最短时间内找到问题所在。就像下面这样：
#content {float:left;}
#content p { }
#sidebar {float:left;}
#sidebar p { }
#footer {clear:both;}
#sidebar p { }
三、浏览器兼容问题
只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说 不用使用盒模型Hack。如果只针对流行浏览器的话，只需要很少的Hack就能实现同样的效果。
我注意了一下网易新版主页的CSS，其中竟然 一个!important或者Hack都没有，可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然，调试的时间会多一些。
包含浮动元素所有在容器 内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
理解 Overflow如果页面中有两个浮动元素，在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding 设置混乱了，不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。

CSS弹性布局

CSS2.1定义了 4 中布局方式

给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化.

flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法

flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示.

flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性

CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义

justify-content 属性在弹性布局中常用的语法如下

align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下

align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示

我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高

flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明
表示的是什么意思?

flex-basic 属性用来表示基础宽度
flex-grow 属性表示宽度还有剩余的时候
flex-shrink 属性表示宽度不足的时候

flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto.

如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐

要实现最后一行对齐,理论上最好使用 gap 属性设置间隙

如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定