本次的任务是完成如图所示界面：
分析可知，整体结构可看成一个大的<div>包裹两个并列的小<div>,第一个小<div>用于放置图片，第二个小<div>用于放置四个段落文本：
<body>
<div class="d1">
<div class="d2">
<img src="../../../Documents/muxishiye/user.jpg">
</div>
<div>
<p>用户姓名：</p>
<p>学习进度：</p>
<p>兴趣爱好：</p>
<p>参与的群：</p>
</div>
</div>
</body>完成上面步骤后我们的基本框架就搭建完成了，接下来用CSS为标签添加样式，首先，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：
然后紧接着</title>标签 下一行引入Css文件：
<link href="index1_20_test03.css" rel="stylesheet" type="text/css">接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：
*{
margin: 0px;
padding:0px;
}对父<div>添加统一样式：
div {
height: 180px;
width: 150px;
margin: 10px auto;
font-family: "微软雅黑";
font-size: 18px;
}
设置图片所在<div>的高度，防止元素重叠：
div .d2{
height: 125px;
}对整个段落文本设置边框，边距，颜色等属性：
p{
width: 138px;
height: 40px;
line-height: 40px;
border: 1px solid aliceblue;
margin-bottom: 3px;
padding-left: 10px;
color: aliceblue
}以下是实际演示效果：
为了让展示效果更好，我为它设置了背景图片：
body{
background-image: url( "../../../Documents/muxishiye/wallhaven-dp2ojo.png");
}实际效果如下：
完整.html源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="index1_21_test1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="d1">
<div class="d2">
<img src="../../../Documents/muxishiye/user.jpg">
</div>
<div>
<p>用户姓名：</p>
<p>学习进度：</p>
<p>兴趣爱好：</p>
<p>参与的群：</p>
</div>
</div>
</body>
</html>
完整.css源码如下：
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding:0px;
}
div {
height: 180px;
width: 150px;
margin: 10px auto;
font-family: "微软雅黑";
font-size: 18px;
}
div .d2{
height: 125px;
}
p{
width: 138px;
height: 40px;
line-height: 40px;
border: 1px solid #000000;
margin-bottom: 3px;
padding-left: 10px;
color: #000000;
}
body{
background-image: url( "../../../Documents/muxishiye/wallhaven-dp2ojo.png");
}如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。
（QQ群：937864538 欢迎入群~）
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
