首页 > 代码库 > 第二天--html+css

第二天--html+css

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta http-equive="refresh" content="30">
        <!--页面30秒刷新一次-->
        <title>这是第二天第一个css文档</title>
        <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css">
        <style>
            *{
                margin:0;
                padding:0;
                border:0;
            }
            .p1{
                color:pink;
                margin-top:88px;
            }
            .a1{
                text-decoration:none;
            }
            .p3{
                color:red;
            }
            .p4{
                font-size:38px;
            }
            .p5{
                font-weight:bold;
            }
            .p6{
                font-weight:bold;
                font-size:30px;
                background:yellow;
                text-align:center;
            }
        </style>
        <!--三种样式:
            1.行内样式:在标签使用“style”元素来包含css,优先级最高
            2.内联样式:在头部用<style>标签包含css样式,优先级次之
            2.外链样式:使用<link href="" rel="stylesheet" type="text/css">
        -->
    </head>
    <body>
        <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background:#40b3df;"></div>
        
        <div style="font-family:verdana;padding:20px;border:10px solid #EE872A;border-radius:10px;">
            <div style="opacity:0.3;position:absolute;left:120px;width:80px;height:200px;background:#8AC007"></div>
            <h3>看这里看这里</h3>
            <div style="letter-spacing:3px">这里是控制横排字符间距的,也就是两个字间的距离</div>
            <div style="color:#40B3DF;">
                <span style="background:#B4009E;color:#ffffff;">就是这个字</span>
            </div>
            <div style="color:#000">更多</div>
        </div>

        <p class="p1">这是一个段落,我用头部样式把自己变成骚气粉色</p>
        <a href="javascript:;" class="a1">我用头部样式去掉我的鞋子--下划线</a>
        <p class="p2">我是外部样式表改变的大小和加粗</p>
        <p class="p3">我是红色</p>
        <p class="p4">我是38号字体</p>
        <p class="p5">我是加粗</p>
        <p class="p6">我是加粗30号又是黄背景,我还要居中</p>
        <br />
        <p>图像插入以及左右浮动图像</p>
        <!--浮动图像-->
        <img src="http://www.runoob.com/images/logo.png" width="80" height="30" alt="这是图片加载不出来是时显示文字" title="这是提示信息" style="float:left">
        <img src="http://www.runoob.com/images/logo.png" width="80" height="30" alt="这是图片加载不出来是时显示文字" title="这是提示信息" style="float:right">
        <map>
            <area shape="circle" coords="0,0,0"
        </map>

    </body>
</html>

第二天--html+css