大学生挑战全网超详细web笔记04弹

1.四张照片合成一张

左右：

html 复制代码

<div style="display:flex;">
  < img src="图片1.jpg" style="width:200px;">
  < img src="图片2.jpg" style="width:200px;">
</div>

上下：

html 复制代码

<div style="display: flex; flex-direction: column;">
  < img src="图片1.jpg" style="width:200px;">
  < img src="图片2.jpg" style="width:200px;">
</div>

2.设置不同样式的超链接

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*超级链接的所有状态样式*/
            a{
                text-decoration: none;/*去掉下划线*/
                color: aquamarine;
                display: block;
                width:200px ;
                height:50px ;
            }
            /*超级链接鼠标经过时的样式*/
            a:hover{
                color: #FF0000;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <!--1.空链接-->
        <a href=" ">空连接</a >
    </body>
</html>

3.行内代码块

html 复制代码

块: display:block 

行: display:inline 

行内块:display:inline-block

4.空链接作用

预存位置，模拟按钮样式

5.不同样式

html 复制代码

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ID选择器链接</title>
    <style>
    	a#special-link{
    		color:red
    	}
    	a#like{
    		color:green
    	}
    </style>
</head>
	</head>
	<body>
	<a href=' 'id='special-link'>空链接</a >
	<br>
	<a href='#'id='like'>外部链接</a >
</body>
</html>

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                text-decoration: none;/*去掉下划线*/
                display: block;
            }
            .color-red{
                color: #FF0000;    
            }
            #link2{color: orange;}
            .color-yellow{
                color: #FFFF00;    
            }
            .color-green{
                color: #00FF00;    
            }
            .color-cyan{
                color: #00FFFF;
                background-color: #8B00FF;
            }
            .color-purple{
                color: #8B00FF;    
            }
            .style1{
                color: hotpink;
                text-decoration: none;
                display: block;
                width: 200px;
                height: 100px;
            }
            .style2{
                color:pink;
                text-decoration: none;
                display: block;
                width: 200px;
                height: 80px;
            }

        </style>
    </head>
    <body>
        <a href="#" class="color-red">空链接</a>
        <a href="#" id="link2">内部链接</a>
        <a href="#" class="color-yellow">外部链接</a>
        <a href="#" class="color-green">锚记</a>
        <a href="#" class="color-cyan">电子邮件</a>
        <a href="#" class="color-purple">点我下载</a>
        <a href="#">交互</a>
        <h1 class="style1">我的爱好是</h1>
        <h1 class="style2">发疯进行中</h1>
        <h1 class="style1">整天在睡觉</h1>
        <h1 class="style2">我真想吃饭</h1>
        
        
    </body>
</html>

6.呈现效果