今天是上的第一节课，很多东西第一次接触，不是很熟悉，遇到了很多问题，搭建运行环境也花了好多时间，仿照老师的课件代码做的一个东西，了解了html的基本结构，一些基本属性的用法。
代码：
收藏
<!DOCTYPE html>
<html>
<!-- head标签内容是给浏览器看的 -->
<head>
<meta charset="UTF-8">
<title>败天曲</title>
<style type="text/css">
div{
width: 500px;
height: 300px;
/*border:5px solid blue;*/
padding: 20px;
/*background-color: red;*/
border-radius: 20px;
box-shadow: 8px 8px 8px #888;
background-image: url(images/1.jpg);
background-size:540px 340px;
background-repeat: no-repeat;
}
.text{
color:blue;
text-align: center;
/*line-height: 2em;
text-indent: 2em;*/
}
</style>
</head>
<body>
<div>
<h3 style="color: black; text-align: center; font-size: 30px;"onmouseover="change(this)"onmouseout="old(this)">败天曲
</h3>
<p>
千重劫，百世难，亘古匆匆，弹指间。<br>
不死躯，不灭魂，震古烁今，无人敌！<br>
待到逆乱阴阳时，以我魔血染青天！
</p>
</div>
<script type="text/javascript">
function change(element){
element.style.fontSize = '24px'
element.style.color = 'red'
}
function old(element){
element.style.fontSize = '30px'
element.style.color = 'black'
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
鼠标移动到标题变色
手写代码：
总结：
了解了html的基本结构，一些基本属性的用法。页面的宽width高height边框border背景的颜色background-color大小background-size等等，还有经常忘了结束的标点符号;，结果导致运行之后无法显示出效果，希望今后少犯这种错误。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
