css进阶使用实战题答案

答案:

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/进阶css练习.css" />
	</head>
	<body>
		<div class="header">
			<img src="img/beautiful_girl.png" alt="图片无法加载" class="image"/>
			<h1>我是网站标题, 我最棒</h1>
		</div>
		<div class="navigator">
			<ul>
				<li><a href="https://www.baidu.com">主页</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<ul>
				<li><a href="">联系电话</a></li>
			</ul>
		</div>
		<div class="content">
			<h2 class="content-title">欢迎来到我的网站</h2>
			<p class="content-text">这是我做的html和css的练习, 请批阅!!!</p>
		</div>
		<div class="footer">
			<p>2024</p>
			<p>我的网站练习</p>
		</div>
	</body>
</html>

css 复制代码

.header{
	height: 100px;
	background-color: saddlebrown;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.image{
	width: 50px;
	height: 50px;
	display: flex;
	border-radius: 50%;
	border: 2px red solid;
}
.navigator{
	height: 50px;
	background-color: dimgray;
	display: flex;
	align-items: center;
	position: relative;
	line-height: 50px;
}
ul:nth-child(1){
	width: 200px;
	/* 去除文字前面的小圆点 */
	list-style-type: none;
	display: flex;
	justify-content: center;
	text-align: center;
}
ul:nth-child(1) li:nth-child(1){
	flex: 1;
	height: 50px;
}
ul:nth-child(1) li:nth-child(2){
	flex: 2;
	height: 50px;
}
ul:nth-child(1) li:nth-child(3){
	flex: 2;
	height: 50px;
}
.navigator ul:nth-child(2){
	/* 去除文字前面的小圆点 */
	/* position: absolute;
	right: 20px; */
	list-style-type: none;
	/* display: flex; */
	position: absolute;
	right: 40px;
	text-align: center;
}
.navigator ul:nth-child(2) li:nth-child(1){
	height: 50px;
	line-height: 50px;
}
ul:nth-child(1) li:nth-child(1):hover{
	background-color: darkgray;
	color: blue;
}
ul:nth-child(1) li:nth-child(2):hover{
	background-color: darkgray;
	color: blue;
}
ul:nth-child(1) li:nth-child(3):hover{
	background-color: darkgray;
	color: blue;
}
ul:nth-child(2) li:nth-child(1):hover{
	background-color: darkgray;
	color: blue;
}
a{
	text-decoration: none;
	color: white;
}
.content{
	border: 2px gray solid;
	border-radius: 5px;
	height: 100px;
	position: relative;
	top: 10px;
}
.content-title{
	position: relative;
	left: 40px;
	bottom: 5px;
}
.content-text{
	position: absolute;
	left: 40px;
	bottom: 5px;
}
.footer{
	position: fixed;
	width: 100%;
	bottom: 0px;
	height: 50px;
	background-color: dimgray;
	color: white;
	text-align: center;
}
.footer p{
	display: inline;
	line-height: 50px;
}

这里面的css,我们用到了外部样式。
运用了link标签将css文件引入进来。

请问, 你答对了吗? 如果把这个实战题靠自己独立做出来的话, 那就给自己一个掌声哦!!!

以上就是css进阶使用的所有内容了, 如果有哪里不懂的地方,可以随时联系我, 我的qq号是1175235190, qq邮箱是1175235190@qq.com, 欢迎随时来提问题!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!

上一个

CSS进阶使用2

下一个

JavaScript基础

最近修改: 2024-08-31Powered by

所有分类