第四章习题-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_83277711/article/details/143413285

第一题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
    <style type="text/css">
        .container {
            background-color: #FF99CC;
            text-align: center;
            padding: 50px 0;
        }
        .welcome {
            font-family: "Arial Black";
            font-size: 60px;
            color: #FFF;
            text-decoration: none;
        }
        .divider {
            height: 5px; /* 设置分割线的高度 */
            background-color: #FF99CC;  
            border: none;
            margin: 50px 0; 
        }
        a:hover {
            color: #FF00FF; /* 鼠标悬停时的颜色 */
            text-decoration: none;
        }
        a:visited {
            color: #FFFFCC; /* 访问过的链接颜色 */
            text-decoration: none;
        }
        a:active {
            color: #FF00CC; /* 鼠标按下时的颜色 */
            text-decoration: none;
        }
        p {
            color: #666; /* 脚部文字颜色 */
            font-size: 20px;
            text-decoration: underline;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="https://www.example.com" class="welcome">WELCOME</a>
    </div>
    <hr class="divider"/>
    <p>网页制作教程 Copyright @ 广东南方职业学院</p>
</body>
</html>

第二题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
    <style type="text/css">
        .container {
            background-color: #FF99CC;
            text-align: center;
            padding: 50px 0;
        }
        .welcome {
            font-family: "Arial Black";
            font-size: 60px;
            color: #FFF;
            text-decoration: none;
        }
        .divider {
            height: 5px; /* 设置分割线的高度 */
            background-color: #FF99CC;  
            border: none;
            margin: 50px 0; 
        }
        a:hover {
            color: #FF00FF; /* 鼠标悬停时的颜色 */
            text-decoration: none;
        }
        a:visited {
            color: #FFFFCC; /* 访问过的链接颜色 */
            text-decoration: none;
        }
        a:active {
            color: #FF00CC; /* 鼠标按下时的颜色 */
            text-decoration: none;
        }
        p {
            color: #666; /* 脚部文字颜色 */
            font-size: 20px;
            text-decoration: underline;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="https://www.example.com" class="welcome">WELCOME</a>
    </div>
    <hr class="divider"/>
    <p>网页制作教程 Copyright @ 广东南方职业学院</p>
</body>
</html>

CSS文件

/*------css参考代码-------*/
/*----全局生命------*/
*{
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
/*------正文标题格式-------*/
.biaoti{
	font-family: "微软雅黑";
	text-align: center;
}
/*------正文所有内容样式------*/
#content{
	text-indent: 2em;
	font-family: "微软雅黑";
	font-size: 18px;
}
/*------小标题样式-------*/
.tx1{
	font-weight: bold;
	font-family: "黑体";
	font-size: 24px;
	color: #8b4513;
	background-color: #D3B175;
	line-height: 200%;
}
/*-------结尾样式-------*/
#t1{
	color: #333;
	text-align: right;
}