首页 > 代码库 > HTML/CSS基础教程 三

HTML/CSS基础教程 三

2024-07-05 03:21:49   220人阅读

一. 块

下面介绍一个非常常用的标签:<div></div>, div是divison(界限)的缩写. <div>允许你将页面分成不同的容纳块, 例如下面这段代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Division</title>
    </head>
    <body>
        <div style="width:50px; height:50px; background-color:red"></div>
        <div style="width:50px; height:50px; background-color:blue"></div>
        <div style="width:50px; height:50px; background-color:green"></div>
    </body>
</html>

生成三个长度和宽度都为50像素,背景颜色分别为红,蓝,绿的三个块, 简单表示如下:

红
蓝
绿

 

 

 

 

 

我们可以在这些块上添加链接.

二. <span>

<div>允许我们把网页分成一个个样式不同片, <span>允许我们空置一个网页小范围内的样式, 例如文本. 如果想让一个段落的某个词变成红色, 我们可以这样做:

    <body>
        <p>This text is black, except for the word <span style="color:red">red!</span></p>
    </body>

这样"red"将显示红色.

三. 表的另一个用途---照片墙

 我们已经知道关于表的所有东西了, 这里介绍一个闭用表格式化文本更有用的东西---格式化图片.

　　1.第一步, 创建一个m*n的表格, 这里以1*3为例

 

　　2.第二步, 在每一个<tb></td>里写入图片的链接, 即<img src="http://www.mamicode.com/URL" />

　　3.选做, 可以为图片添加链接.

下面是一个例子:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title>My Photo Page</title>
    </head>
    <body>
        <table>
            <thead>
                <th>PhotoTable</th>
            </thead>
            <tr>
                <td>
                    <a href="http://www.qq.com">
                        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOaHlmg3BSaQWCeooH8MiWTLt-asuuY3GC14ZWJ2L3soLLfy_JOQ" />
                    </a>
                </td>
                <td>
                     <a href="http://www.qq.com">
                        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOaHlmg3BSaQWCeooH8MiWTLt-asuuY3GC14ZWJ2L3soLLfy_JOQ" />
                     </a>
                </td>

                <td>
　　　　　　　　　　　　<a href="http://www.qq.com">
　　　　　　　　　　　　　　<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOaHlmg3BSaQWCeooH8MiWTLt-asuuY3GC14ZWJ2L3soLLfy_JOQ" />
　　　　　　　　　　　　</a>
　　　　　　　　　</td>
            </tr>                      
        </table>
    </body>
</html>

效果是这样的:

 

PS:这个照片墙是3*3的,这里只选了一张图片, 并且每个图片的链接都是www.qq.com.

 


联系
我们