[Codecademy] HTML&CSS 第十课：Sorting Your Friends

最新推荐文章于 2024-08-23 10:53:05 发布

shuangde800

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量2.6k

点赞数 1

分类专栏： html&css 文章标签： html css

本文链接：https://blog.csdn.net/shuangde800/article/details/11672649

版权

html&css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文出自 http://blog.csdn.net/shuangde800

[Codecademy] HTML && CSS课程学习目录

------------------------------------------------------------------------------------------------

这节课主要是复习一下前一课的内容，会用div来创建几个圆圈，让用class和id来给他们设置风格。

其中涉及到的属性：

display: inline-block

border-radius: 100%;

margin-left: 5px

将会在后面课程有讲

stylesheet.css

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
    height: 100px;	
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000FF;
}
.enemy {
    border: 2px dashed #FF0000;
}
#best_friend {
    border: 4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend" id = "best_friend"> </div>
		<div class="family"> </div>
		<div class="enemy" id = "archnemesis"> </div>
	</body>
</html>

效果图：

从效果可以看出，class friend 和id best_friend还有enemy和archnemesis都同时被一个div引用，结果显示的效果是best_friend的，说明了id的优先级比class更高。

shuangde800

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[Codecademy] HTML&CSS 第十课：Sorting Your Friends

[Codecademy] HTML && CSS课程学习目录这节课主要是复习一下前一课的内容，会用div来创建几个圆圈，让用class和id来给他们设置风格。其中涉及到的属性：display: inline-blockborder-radius: 100%;margin-left: 5px将会在后面课程有讲
复制链接

扫一扫

专栏目录