masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 相似元素存在的意义-HTML&CSS_html/css_WEB-ITnose

相似元素存在的意义-HTML&CSS_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:34:05
asal
1155 orang telah melayarinya

1.

　　效果：

　　　　告诉浏览器这是一段短引用，让浏览器以合适的方法来显示

　　注：

　　不能直接以双引号直接代替，因为有些浏览器的效果不是双引号。

　　不要忘了移动设备，和语音浏览器，对引用的表现不是双引号这么简单。

好处：

　　方便搜索引擎寻找带引用的网页。

　　可以用CSS对引用设置样式，比如：要灰色斜体的引用。

 

2.

　　效果：

　　单独显示较长引用，使其自成一段

注：

　　有些浏览器会对其稍稍缩进，但有些不会。

 

 3.块元素与内联元素

块元素特例独行，内联元素随波逐流。

块元素通常用做web页面中的主要构建模块，内联元素通常用来标记小段内容

设计一个页面时，通常从较大的块开始，然后在完善页面时再加入内联元素

浏览器只有当你开始一个新的块元素时，才会插入换行，主动换行需要
元素

    和
  1. 为块元素

    4.

    　　title:

    　　....

    　　　　title有一个值，提供链接信息

    target：

    　　....

    　　新窗口打开链接

    　　　　考虑到有视力障碍的人群，不能过度使用target。

    注意：

    　　　　保证链接标签简洁，可在title中提供额外的信息

    　　　　保证标签有意义，不要使用类时“单击下一页”

    　　　　不要把链接放在一起

     

    5.id & class

    要对多个属性使用某种样式时，可以使用class

    但如果只有一个元素时，就应该使用id

    id属性恰恰就是用来唯一地命名元素。

    例如，

    里有多个

    ，我们只要对其中一个

    进行样式设置。

     

    6. img

    　　注意：

    　　　　浏览器是在下载了html文件并开始显示页面后才下载图像的。

    　　alt

    　　　　...

    　　　　用alt代替未显示的图像

    　　　　你永远不知道客户会用什么浏览器和设备，以及网速。

    width & height

    　　相似元素存在的意义-HTML&CSS_html/css_WEB-ITnose

    　　width和height实际上是帮助浏览器为要加载的图像预留空间

    　　若使用这个属性，则他们的值应与图像实际的宽高相同

     

    　　缩略图链接

    　　　　...

    　　　　不建议直接链接到图像，因为这样浏览器会在一个空白页面上显示图像

    　　　　而通常需要为所要显示的图像提供一些上下文。

     　　透明图

    　　　　如果要把一个透明的图像放在web页面上，要确保图像的蒙版颜色和web页面的背景色相同

     

    7.HTML5

    基本格式要求：

     1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 5         <title></title> 6         <link rel="stylesheet" type="text/css" href=""> 7     </head> 8     <body> 9 10     </body>11 </html>
    Salin selepas log masuk

    8.盒模型图

    9.div & span

    　　div的使用场合

    　　　　多个元素确实可以属于一个类

    　　　　但当需要把这些元素加上一个大边框时

    　　　　如果使用.Cat{ }，则会给所有属于Cat类的元素都会加上边框，显然这不是我们想要的。

    　　　　于是，就要使用div包围所有元素，给整个div盒设置一个边框

    　　span

    　　　　为一堆小元素指定样式

    10.图片的布局

    　　浏览器并排放置两张图片时，两张图片的外边距相加

    　　上下共列放置时，以最大外边距高度为最终间隔距离

    　　外边距会折叠条件：两元素的垂直外边距碰到一起，就一定会折叠。

    11.页面布局

    　　浮动（float）

    　　　作用：

    　　　　　float属性首先尽可能地向左或向右浮动元素

    　　　　　然后它下面的所有内容会绕流这个元素

    　　　幕后原理：

    　　　　　浏览器正常地将元素导入页面

    　　　　　遇到浮动元素会尽可能放在左或者右，还会从流中删除这个段落，就像浮在页面上一样

    　　　　　由于这个浮动元素已经从正常流中删除，所有其它元素会依旧填满页面，就像没有浮动元素一样

    　　　　　不过，内联元素定位时，会考虑的浮动元素的边界，因此会围绕浮动元素

    　　　要求：

    　　　　　对于所有的浮动元素都有一个要求：必须指定了宽度。

    　　　clear：

    　　　　所在元素左边或者右边或者两边，不允许有浮动内容，常用来处理浮动元素覆盖页底的情况。

    　　冻结设计

    　　what：

    　　　　内容的宽度是固定的，不会随着视窗扩展或收缩。

    　　　　但浏览器很宽时，浏览器右侧会有很多空白空间

    　　注：

    　　　　把主要内容都放在一个id中，并设计宽度。

    　　eg：　　　

    1 #allcontent{2     width: 800px;3 }
    Salin selepas log masuk

    　　凝胶布局

    　　what：

    　　　　内容宽度固定，但是外边距会随着浏览器窗口扩展或收缩。通常会把内容放在中央。

    　　How

    　　　　由一个固定大小的

    包围页面的所有内容，然后利用auto属性值允许外边距扩展。

    　　eg：　　　

    1 #allcontent{2     width: 800px;3     margin-left: auto;4     margin-right: auto; 5 }
    Salin selepas log masuk

    12.定位

    position：

    　　　static（静态/默认），absolute（绝对），fixed（固定），relative（相对）

    　　

    　　绝对定位

    　　　　　what：

    　　　　　　　允许将元素放置在页面上的任何位置。默认的，绝对定位会相对于页面边界来放置。

    　　　　　注：

    　　　　　　　一个元素绝对定位时，浏览器首先会将它从流中删除，然后将这个元素放置在top和right属性指定的位置上（也可以是bottom和left）

    　　　　　　　在被绝对定位的元素下面，页面正常流中的所有元素根本不知道页面上有这个绝对定位的元素，包括内联元素。

    　　　　　　　达到覆盖的效果。　　

    　　　　　　　绝对定位元素不要求指定宽度，不过，若没有宽度，默认的，块元素会占浏览器的整个宽度（减去你指定的距左边或右边的偏移量）

    　　　　　eg：　　　

    1 #sidebar{2     position: absolute;3     top: 100px;4     right:200px;5     width: 280px;6 }
    Salin selepas log masuk

    　固定定位

    　what：

    　　　让元素位于你指定的位置，且这个位置总是相对于浏览器窗口定位

    　　　一旦放置好，就会一直呆在指定的位置，不再移动，即使你滚动页面它也不再改变

    　　　页面中的其它元素会在这些固定定位元素下面正常滚动。

    　eg：

    1 #coupon{2     position: fixed;3     top: 300px;4     left: 100px;5 }
    Salin selepas log masuk

    　相对定位

    　　相对定位元素首先正常流入页面，然后按指定量偏移。

    　　使用相对定位时，left，top，right，bottom是指距正常流中该元素的位置的偏移量。

    　静态定位

    　　让元素放在正常的文档流中。

    13.CSS表格布局

    创建一行两列的表格结构

    示例代码：

    1 <div id="tableContainer">2     <div id="tableRow">3         <!-- ... -->4     </div>5     <div id="sidebar">6             <!--  -->7     </div>8 </div>
    Salin selepas log masuk

     1 /*表格*/ 2 div#tableContainer{ 3     display: table; 4 } 5 /*行*/ 6 div#tableRow{ 7     display: table-row; 8 } 9 /*列1*/10 #main{11     display: table-cell;12 }13 14 /*列2*/15 #sidebar{16     display: table-cell;17 }
    Salin selepas log masuk

     

Label berkaitan：
相似元素存在的意义-HTML&CSS
sumber：php.cn
Artikel sebelumnya：Html直接表单直传阿里云存储OSS示例_html/css_WEB-ITnose Artikel seterusnya：BFC与IFC_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2292
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2430
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2042
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1928
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
2000
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan