HTML+CSS+JavaScript入门代码

最新推荐文章于 2024-06-18 13:20:32 发布

FrankHuang888

最新推荐文章于 2024-06-18 13:20:32 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： JavaS

本文链接：https://blog.csdn.net/qq_33323974/article/details/88554156

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天看了一本JavaScript入门的书，书上的案例特别简单，可以当做html,css,javascript入门的案例

<html>
<head>
<title>My Dream Car</title>
</head>
<body>
<div id="car">
这辆 <span id="modelyear"></span> 年生产的公共汽车只要¥<span id="pricetag"></span>元
<div id="body"></div>
<div id="frontwheel"></div>
<div id="backwheel"></div>
</div>
<style type="text/css">
#car {
   font-family:Arial;
   }
#body {
   position:absolute;
   top:50px;
   width:80%;
   height:100px;
   background-color:#000000;
   text-align:center;
   }
#backwheel {
   position:absolute;
   left:10%;
   top:130px;
   background-color:#ffffff;
   border:3px solid black;
   border-radius:50%;
   width:40px;
   height:40px;
   }
#frontwheel {
       position:absolute;
   left:55%;
   top:130px;
   background-color:#ffffff;
   border:3px solid black;
   border-radius:50%;
   width:40px;
   height:40px;
   }
</style>
<script>
var dreamCar = {
make:"广汽集团",
model:"2018款",
color:"green",
year:2018,
bodyStyle:"公共汽车",
price:450000
};
document.getElementById("pricetag").innerHTML = dreamCar.price;
document.getElementById("modelyear").innerHTML = dreamCar.year;
document.getElementById("body").style.backgroundColor = dreamCar.color;
document.getElementById("body").innerHTML = dreamCar.make+" "+dreamCar.model;

</script>
</body>
</html>

FrankHuang888

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript入门代码

今天看了一本JavaScript入门的书，书上的案例特别简单，可以当做html,css,javascript入门的案例&lt;html&gt;&lt;head&gt;&lt;title&gt;My Dream Car&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="car"&gt;这辆 &lt;span
复制链接

扫一扫

专栏目录