有关html+css+JavaScript的讲解_html css javascript原创性讲解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38680900/article/details/78848843

最近蹭了点web前端的课程：css，html，JavaScript

（这些课程是大三才开始学，不过小编我可不是大三的老腊肉，还算是大二的小鲜肉。一时好奇，就提前学了点，只是学了有关web前端的基础知识，并不精通，若有描述不到位之处，望大佬们多指点指点）

小编我边举例边嵌入介绍自己用到的知识吧

例1：

<!doctpye html>
<html> 
<head>
<title>百度一下</title>
<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 和块级标签 div，<ol></ol>,<ul></u;>等知识

<!doctype html>
<html>
<head>
<style> /*1.下滑线，文本阴影，间距，小写与大写*/
li{font:10px;}
.p{color:yellow;
font:80px;}
div{
height:200px;
width:300px;
background:green;}
div2{
height:500px;
width:500px;
background:green:url(C:/Users/hasee/DesktopTB1mK.bdvDH8KJjy1XcXXcpdXXa-520-280.jpg)}/*图片路径*/
</style>
</head> 
<body> 
<div2>这是个div2</div2> 
<div>
<ul>
<li class="p">学习用品</li>
<li>笔阿斯蒂芬规划局看</li>
<li>纸</li>
</ul>
<ol>
<li class="p">生活用品</li>
<li>毛巾</li>
<li>牙刷</li>
<ol>
</div>
</body>
</html>

例3：运用到css

<!doctype html>
<html>
<head> 
<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;/*边框弧度或圆角*/
}
div{
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>sdfg</p1>
<p class="p2">qwerty</p>
<div><ol><li>qwerty<li></ol></div>
</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;
margin:0px; /*区别有无margin*/
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值去掉*/}
div{
/*边框：border 边框的宽度边框样式（实线或虚线）边框的颜色（多种）
填充：padding 1.padding-表示填充值为0，即无填充 2.填充使总宽高加大
边距：margin*/
height:200px;
width:200px;
border:10px solid blue;}</style></head>
<body>
<h1>HG</h1> 
<div></div>
<h2></h2>
<div id="d1"></div>
</body></html>

例5：图片渐变替换

<!doctype html>

<html>
<head>
<title>图片替换</title>
</head>
<body>
<div id="d1" url="C:/Users/hasee/Desktop/01.jpg"><div>
<script>
setInterval(function(){
var a=div.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 div{
/*除去无序标签自带圆点*/
/* list-style: none;*/
float: left;
width: 100px;
height: 100px;
/*垂直居中*/
line-height: 100px;
/*水平居中*/
text-align: center;

}
.m_r div: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 div{
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 div{
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 div{
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 div{
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>
<div id="menu">
<div class="m_1">


</div>
<div class="m_r">
<div class="active">首页</div>
<div>旅游订购</div>
<div>服务资询</div>
<div>关于我们</div>
<div>English</div>
</div>
</div>
<div id="imgs" style="background:url(SanYa/imgs2.jpg)"></div>
<div id="about">
<div class="a_l"></div>
<div 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>
</div>
</div>
<div 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>
<div id="photoList">
<div><img src="SanYa/place-1.jpg"/></div>
<div><img src="SanYa/place-2.jpg"/></div>
<div><img src="SanYa/place-3.jpg"/></div>
<div><img src="SanYa/place-4.jpg"/></div>
</div>
<div id="photoList0">
<div><img src="SanYa/place-5.jpg"/></div>
<div><img src="SanYa/place-6.jpg"/></div>
<div><img src="SanYa/place-7.jpg"/></div>
<div><img src="SanYa/place-8.jpg"/></div>
</div>
</div>
<div id="server1">
<h1 style="font-size:30px;margin-bottom:15px;">琳琅满目的三亚水果</h1>
<p style="font-size:16px;color:#848484">由于海南处于亚热带，光照和降水都很充足，特别适宜种植瓜果，这里的瓜果一年四季都有，种类繁多。</p>
<div id="photoList1">
<div><img src="SanYa/fruit-1.jpg"/></div>
<div><img src="SanYa/fruit-2.jpg"/></div>
<div><img src="SanYa/fruit-3.jpg"/></div>
<div><img src="SanYa/fruit-4.jpg"/></div>
</div>
</div>

<div id="server3">
<h1 style="font-size:30px;margin-bottom:15px;">垂涎欲滴的三亚美食</h1>
<p style="font-size:16px;color:#848484">由于海南处于亚热带，光照和降水都很充足，特别适宜种植瓜果，这里的瓜果一年四季都有，种类繁多。</p>
<div id="photoList3">
<div><img src="SanYa/food-1.jpg"/></div>
<div><img src="SanYa/food-2.jpg"/></div>
<div><img src="SanYa/food-3.jpg"/></div>
<div><img src="SanYa/food-4.jpg"/></div>
<div><img src="SanYa/food-5.jpg"/></div>

</div>
</div>
<div 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"/>
</div>
<div id="foot">
<div class="f_t">
<div class="f_t_1">
<p style="margin-top: 40px;">客服服务热线</p>
<p style="margin-top: 10px;">400-000-0000（周一至周日：9:：00）</p>
</div>
<div class="f_t_r">
<p>公司地址：xxx省xxx市xxx县xxx路xxx号</p>
<p>邮政编码：000000</p>
<p>客服邮箱：xxxx@xxxxxxxx.com</p>
</div>
</div>
<div class="f_b">
<p>&copy：2017*************版权所有</p>
<p>手机版 | **********| 管理登录 </p>
</div>
</div>

<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>