脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-有关html+css+JavaScript的代码实例讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
最近蹭了点web前端的课程：css，htML，JavaScript
例1：
<!doctpye html>
<html> <!--1.全部 属性名{}：一个(id="属性名") #属性名{}：多个(class="属性名") .属性名{}：共用：#F #-->
<head>
<style>
/* 1.优先级：内联样式（style="color:red;"）>ID>class>标签
对应权值1000 100 10 1
2.css的注释：/* */ html的只是<!-- --> JavaScript的是//
3.选择器：
1.标签选择器：属性名{}
2.id选择器： #属性名{}
3.类选择器： .属性名{}
选择器：属性值
*/
p{color:green;
background:#0CF;
}
#p2{color:lime;
background:#0CF;}
.P3{color:blue;}
</style>
</head>
<body>
<p id="p2">123456</p>
<p class="p3",style="color:green;">67890</p>
<p>123456</p>
<p class="p3">123456</p>
<p>123456</p>
</body>
</html>
例2：用到行级标签p 和块级标签 p，<ol></ol>,<ul></u;>等知识
<!doctyPE html>
<html>
<head>
<style> /*1.下滑线，文本阴影，间距，小写与大写*/
li{font:10px;}
.p{color:yellow;
font:80px;}
p{
height:200px;
width:300px;
background:green;}
p2{
height:500px;
width:500px;
background:green:url(C:/Users/hasee/DesktopTB1mK.bDVDH8KJjy1XcXXcpdXXa-520-280.jpg)}/*图片路径*/
</style>
</head> <!--
-->
<body> <!--p里面可以嵌套 块级标签
p 里面不能嵌套 块级标签 -->
<p2>这是个p2</p2> <!--但默认是p-->
<p>
<ul>
<li class="p">学习用品</li>
<li>笔阿斯蒂芬规划局看</li>
<li>纸</li>
</ul>
<ol>
<li class="p">生活用品</li>
<li>毛巾</li>
<li>牙刷</li>
<ol>
</p>
</body>
</html>
例3：运用到css
<!doctype html>
<html>
<head> <!--一下是css部分-->
<style>
p1{
height:100px;
width:100px;
background:blue;
line-align:center;/*行居中，其值与height一致*/
}
li{
height:100px;
width:100px;
background:blue;
line-align:center;/*行居中，其值与height一致*/
}
.p2{
height:100px;
width:100px;
background:green;
line-align:100px; /*行居中，其值与height一致*/
text-align:center;/*垂直居中*/
border-radius:24px;/*边框弧度或圆角*/
}
p{
height:800px;
width:800px;
background:url("C:/Users/hasee/Desktop/TB1mK.bdvDH8KJjy1XcXXcpdXXa-520-280.jpg");
/*line-align:100px; /*行居中，其值与height一致*/*/
text-align:center;/*垂直居中*/
border-radius:50%;/*边框弧度或圆角*/
}</style></head>
<body>
<!--<p1>qwertyqwer</p1>-->
<p1>sDFg</p1>
<p class="p2">qwerty</p>
<p><ol><li>qwerty<li></ol></p>
</body></html>
例4：css盒子模型
<!doctype html>
<html><head>
<title>css盒子模型</title>
<style>
h1{
height:200px;
width:200px;
padding-left:20px;
padding-top:20px;
padding-right:10px;
padding-bottom:40px;
background:green;
}
h2{
height:200px;
width:200px;
padding:20px 30px 50px 10px; /*上 右 下 左*/
border:10px solid blue;
margin:10px 20px 30px 40px;
/*margin:
1.具有初始值：8px margin:0px 表去初始值
2.margin-left/right/top/bottom
3.margin:10px 20px 30px 40px(分别代表：上下左右)
4.margin:10px(代表上下左右都有)
*/
background:#0CF;
/*
1个参数：4个方向
2个参数：上下 左右
4个参数：上 下 左 右*/
}
#d1{width:200px;
heigth:200px;
margin:Opx auto;/*水平居中，会根据不同窗体的大小自动调整*/}
/*
margin:Opx auto;
只支持块级标签使用，行级标签不可用，
行级标签 不支持上下方向的margin，支持左右*/
span{background：red;}
*{margin:0px;
padding:0px;/*将默认的margin和padding值去掉*/}
p{
/*边框：border 边框的宽度 边框样式（实线或虚线） 边框的颜色（多种）
填充：padding 1.padding-表示填充值为0，即无填充 2.填充使总宽高加大
边距：margin*/
height:200px;
width:200px;
border:10px solid blue;}</style></head>
<body>
<h1>HG</h1> <!--区别：<h1><h1>或<p><p>-->
<p></p>
<h2></h2>
<p id="d1"></p>
</body></html>
例5：图片渐变替换
<!doctype html>
<html>
<head>
<title>图片替换</title>
</head>
<body>
<p id="d1" url="C:/Users/hasee/Desktop/01.jpg"><p>
<script>
setInterval(function(){
VAR a=p.getElementById("d1");
},50);</script>
<body></html>
最后，分享一下本人第一次做的网页（个人认为很low，有待完善）
<!DOCTYPE html>
<html>
<head lang="en">
<title>iphonell</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#menu{
width:1200px ;
height: 120px;
/*上 左右 下*/
margin: 20px auto 0px;
}
.m_l{
width: 145px;
height: 42px;
float: left;
margin-top: 28px;
color:deepskyblue;
font-weight:bold;
}
.m_r{width:500px;
height:102px;
float:right;}
.m_r p{
/*除去无序标签自带圆点*/
/* list-style: none;*/
float: left;
width: 100px;
height: 100px;
/*垂直居中*/
line-height: 100px;
/*水平居中*/
text-align: center;
}
.m_r p:hover{
border-top: 2px solid #02B2B5;
}
.active{
border-top: 2px solid #02B2B5;
}
#imgs{
height: 600px;
}
#about{
width:1200px ;
height: 500px;
/*上 左右 */
margin: 80px auto;
}
.a_l{
width: 40%;
height:100% ;
float: left;
background: url(SanYa/abouts.jpg);
}
.a_r{
width: 60%;
height: 100%;
float: left;
text-indent: 45px;
}
#server{
width:1560px ;
height:800px;
/*上 左右 */
margin: 0px auto;
text-align:center;
}
#photoList{
width:1550px;
height:240px;
;margin:20px auto 0px;}
#photoList p{
width:360px;
height:240px;
margin:5px 8px;
float:left;}
#photoList img{
transition:all 0.5s;}
#photoList img:hover{
margin-left:-10px;}
#photoList0{
width:1550px;
height:240px;
margin:20px auto 0px;}
#photoList0 p{
width:320px;
height:240px;
margin:5px 8px;
float:left;}
#photoList0 img{
transition:all 0.5s;}
#photoList0 img:hover{
margin-left:-10px;}
#server3{
width:1610px ;
height: 480px;
/*上 左右 */
margin: 80px auto;
text-align:center;
}
#photoList3{
width:1600px;
height:270px;
margin:10px auto;}
#photoList3 p{
width:290px;
height:240px;
margin:5px 10px;
float:left;}
/*#photoList3 img{
transition:all 0.5s;}
#photoList3 img:hover{
margin-left:-10px;}*/
#server1{
width:1500px ;
height: 480px;
/*上 左右 */
margin: 80px auto 0px;
text-align:center;
}
#photoList1{
width:1420px;
height:340px;
margin:20px auto 0px;}
#photoList1 p{
width:325px;
height:240px;
margin:5px 8px;
float:left;}
#photoList1 img{
transition:all 0.5s;}
#photoList1 img:hover{
margin-left:-10px;}
#success{
width:1600px ;
height: 300px;
/*上 左右 */
margin: 30px auto;
text-align:center;
}
#success img{
float:left;
margin-right:15px ;
}
#foot{
height: 400px;
background: #323232;
}
.f_t{
width: 1200px;
height: 288px;
margin:0px auto;
border-bottom: 1px solid #ccc;
}
.f_t_1{
width: 420px;
height: 150px;
margin: 30px 0px 0px 180px;
float: left;
color: white;
border-right: 1px solid white;
}
.f_t_r{
width:420px;
height:150px;
margin: 60px 0px 0px 120px;
float: left;
}
.f_t_r p{
height: 28px;
color:white;
}
.f_b{
font-Size:14px;
text-align: center;
color: #999;
margin-top: 25px;
}
</style>
</head>
<body>
<p id="menu">
<p class="m_1">
<!--粗体文字-->
</p>
<p class="m_r">
<p class="active">首页</p>
<p>旅游订购</p>
<p>服务资询</p>
<p>关于我们</p>
<p>English</p>
</p>
</p>
<p id="imgs" style="background:url(SanYa/imgs2.jpg)"></p>
<p id="about">
<p class="a_l"></p>
<p class="a_r">
<h1 style="margin-top:60px;margin-bottom:20px;">美丽三亚欢迎您</h1>
<hr style="margin-bottom:10px"></hr>
<p style="font-size:16px;margin-bottom:10px;">三亚市旅游资源得天独厚，是海南省风景名胜最多而又最密集的地方，在约两百公里的海岸线上，密布亚龙湾、大东海、鹿回头公园、天涯海角、海山奇观、南山文化旅游区等闻名中外的旅游景点。</p>
<p style="font-size:16px;margin-bottom:10px;">她不仅具备现代国际旅游五大要素——阳光、海水、沙滩、绿色植被、洁净空气，而且还拥有河流、港口、温泉、岩洞、田园、热带动植物、民族风情等各具特色的旅游资源，在国内外堪称一绝。</p>
<p style="font-size:16px;margin-bottom:10px;">三亚古称崖州，也称鹿城，历史悠久，源远流长，文化多姿多彩。天涯海角、大小洞天、崖州古城、落笔洞三亚古人类遗址等都蕴涵着丰厚的历史文化。</p>
<p style="font-size:16px;margin-bottom:5px;">三亚地处海南省的最南端，是我国唯一的热带滨海旅游城市，境内汇集了阳光、海水、沙滩、气候、森林、动物、温泉、岩洞、田园、风情等十大风景资源。</p>
<hr></hr>
</p>
</p>
<p id="server">
<h1 style="font-size:30px;margin-bottom:15px;">三亚风景</h1>
<p style="font-size:16px;color:#848484;margin-bottom:5px;">这里有著名的景点:</p>
<p style="font-size:16px;color:#848484;margin-bottom:5px;">天涯海角、南山、亚龙湾等，数不胜数。</p>
<p style="font-size:16px;color:#848484;margin-bottom:5px;">一万无际的大海，阳光明媚的沙滩，随风吹起的海浪，此时的你，是否漫步在沙滩上...</p>
<p id="photoList">
<p><img src="SanYa/place-1.jpg"/></p>
<p><img src="SanYa/place-2.jpg"/></p>
<p><img src="SanYa/place-3.jpg"/></p>
<p><img src="SanYa/place-4.jpg"/></p>
</p>
<p id="photoList0">
<p><img src="SanYa/place-5.jpg"/></p>
<p><img src="SanYa/place-6.jpg"/></p>
<p><img src="SanYa/place-7.jpg"/></p>
<p><img src="SanYa/place-8.jpg"/></p>
</p>
</p>
<p id="server1">
<h1 style="font-size:30px;margin-bottom:15px;">琳琅满目的三亚水果</h1>
<p style="font-size:16px;color:#848484">由于海南处于亚热带，光照和降水都很充足，特别适宜种植瓜果，这里的瓜果一年四季都有，种类繁多。</p>
<p id="photoList1">
<p><img src="SanYa/fruit-1.jpg"/></p>
<p><img src="SanYa/fruit-2.jpg"/></p>
<p><img src="SanYa/fruit-3.jpg"/></p>
<p><img src="SanYa/fruit-4.jpg"/></p>
</p>
</p>
<p id="server3">
<h1 style="font-size:30px;margin-bottom:15px;">垂涎欲滴的三亚美食</h1>
<p style="font-size:16px;color:#848484">由于海南处于亚热带，光照和降水都很充足，特别适宜种植瓜果，这里的瓜果一年四季都有，种类繁多。</p>
<p id="photoList3">
<p><img src="SanYa/food-1.jpg"/></p>
<p><img src="SanYa/food-2.jpg"/></p>
<p><img src="SanYa/food-3.jpg"/></p>
<p><img src="SanYa/food-4.jpg"/></p>
<p><img src="SanYa/food-5.jpg"/></p>
</p>
</p>
<p id="success">
<h1 style="font-size:30px;margin-bottom:15px;">身心舒适的度假环境</h1>
<p style="font-size:16px;color:#848484;margin-bottom:5px;">您的舒适是我们的追求，我们致力于为您打造最好的度假环境，提供最优质的服务。</p>
<img src="SanYa/hotel-1.jpg"/>
<img src="SanYa/hotel-2.jpg"/>
<img src="SanYa/hotel-3.jpg"/>
<img src="SanYa/hotel-4.jpg"/>
</p>
<p id="foot">
<p class="f_t">
<p class="f_t_1">
<p style="margin-top: 40px;">客服服务热线</p>
<p style="margin-top: 10px;">400-000-0000（周一至周日：9:：00）</p>
</p>
<p class="f_t_r">
<p>公司地址：xxx省xxx市xxx县xxx路xxx号</p>
<p>邮政编码：000000</p>
<p>客服邮箱：xxxx@xxxxxxxx.COM</p>
</p>
</p>
<p class="f_b">
<p>&copy：2017*************版权所有</p>
<p>手机版 | **********| 管理登录 </p>
</p>
</p>
<script>
var num=1;
setInterval(function(){
if(num==3){
num = 1;
}
var img=document.getElementById("imgs");
img.style.backgroundImage='url(SanYa/imgs'+num+'.jpg)';
num++;
},3000);
</script>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-有关html+css+JavaScript的代码实例讲解全部内容，希望文章能够帮你解决javascript代码实例教程-有关html+css+JavaScript的代码实例讲解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。