如有更好的写法请评论，谢谢！
此次学习是对于div标签及相应css样式的简单应用。div标签可以把一些独立的逻辑部分划分出来，相当于容器。基本语法是<div></div>，div标签属于块状元素，多用于盒模型。其中可以用css来个性化div标签的属性等等。例如：
<style type="text/css"> div{ width:600px; height:400px; border:2px dodgerblue solid; text-align:center; position:relative; } </style>
上面的代码就是用css样式个性化了div标签的样式。其中width和height是div的长和宽，px被称作像素，用于规定width和height的大小；border为div标签的边框，它定义了整个盒模型的边框样式，如border-color,border-width,border-style等。text-align则用于边框内文本的对齐方式（左对齐，右对齐，居中）；而position作用是定位，positional:relative;是相对定位，它的偏移是相对于原位置的移动，且较先前的位置保持不变。posiion:absolute;是绝对定位，它的偏移是根据离它最近的具有定位属性的父元素进行且对定位的，如果不存在符合条件的父元素，则其与body进行绝对定位。这样就实现了在盒模型内任意位置插入文本，连接等等属性。
<style type="text/css">
#div1{border:1px green solid}
.div2{border:1px gray dashed}
</style>
此上代码中#div被称作id选择器，.div被称作子选择器。两者的区别就在于id选择器只能使用一次，而子选择器可以使用多次。以上两个选择器在使用时为<div id="div1"></div>，<div class="div2"></div>一定注意区分。
以下是这次练习所写代码，简单的应用了div标签实现在“盒子”内任意位置插入文本和链接，简单css样式美观盒子的外观等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div标签练习</title>
<style type="text/css">
span{color:cornflowerblue;}
p{
color:greenyellow;
text-indent:2em;
font-size:20px;
text-align:left;
}
img{
max-width: 100%;
max-height: 100%;
}
#div1{
width:600px;
height:400px;
border:2px dodgerblue solid;
text-align:center;
position:relative;
}
.div2{
width:600px;
height:50px;
text-align:center;
position:absolute;
top:0;
}
.div3{
border:1px;
width:450px;
height:320px;
position:absolute;
top:50px;
}
.div4{
border:1px greenyellow dashed;
font-size:30px;
position:absolute;
top:100px;
right:20px;
}
.div5{
width:580px;
height:20px;
position:absolute;
bottom:15px;
}
</style>
</head>
<body>
<embed src="凌阳 - 夜的钢琴曲四.wav" width=0 height=0
autostart="true"></embed>
<div id="div1">
<img src="img\2_QmcmMmdZJsjSNj8m8hdE_large.jpg" alt="找不到图片">
<div class="div2">
<p style="font-size:30px;text-align:center">时间匆匆 岁月静好</p>
</div>
<div class="div3">
<p>惊风飘白日，光景西驰流。不知不觉已过
去20年光景，我们业已长大成人，回忆童年美好时光，心中也许会有些
许感慨。当初的我们怀揣着各自的梦想，激励奋进，拼搏向上。然岁月
有情亦无情，我们长大了，梦想却渐渐千疮百孔，失去应有的光华。</p>
<p>但是我们正处于青春的时代，人不轻狂枉少年，此时的我们更应该
努力的去缝补那早已千疮百孔的梦想，向着希望前行！</p>
</div>
<div class="div4">
<a href="https://www.xiami.com/play?ids=/song/playlist/id/381717/object_name/default/object_id/0#loaded" title="羽泉"><span>梦<br>想<br>之<br>城</span></a>
</div>
<div class="div5">
<p style="color:gray;font-size:15px;text-align:right;">2018/8/10 仰望-创作</p>
</v>
</div>
</body>
</html>
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
