一、在浏览器中的运行结果:
二、部分代码
1.HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>启乐官网</title>
<link rel="stylesheet" href="style.css"/>
<script src="myjs.js" charset="gb2312"></script>
</head>
<body>
<header> <!– 页眉 –>
<a id=“hah” href=“home.html” title=“启乐首页”><h1>启乐</h1></a> <!– logo点击跳往首页 –>
<h3 id=“hh”>–––美好生活的开始</h3>
<a id=“ha2” href="" title=“注册/登录”><h3>注册/登录</h3></a>
</header>
<nav> <!–导航链接 –>
<ul>
<li><a href=“home.html”>首页</a></li>
<li><a href=“introudction.html”>企业介绍</a></li>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"nud"</span><span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"product.html"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"nuda"</span><span class="token operator">></span>产品中心<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"nudd"</span><span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"product.html"</span><span class="token operator">></span>客厅家具系列<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"product.html"</span><span class="token operator">></span>床上用品<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"product.html"</span><span class="token operator">></span>美容护肤系列<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"product.html"</span><span class="token operator">></span>精品服装<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"product.html"</span><span class="token operator">></span>限时优惠<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&word=%E5%90%AF%E4%B9%90"</span> target<span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>新闻动态<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"join.html"</span><span class="token operator">></span>加入我们<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
</nav>
<div class=“box”> <!–第一个盒模型–>
<div id=“ha1”> <!– 动画 广告轮播区域–>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>aside id<span class="token operator">=</span><span class="token string">"ha3"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 边栏区 联系我们 <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"ad"</span><span class="token operator">></span>
<span class="token operator"><</span>img src<span class="token operator">=</span><span class="token string">"image/contact02.jpg"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
<span class="token operator"><</span>table <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"tab01"</span><span class="token operator">></span>
<span class="token operator"><</span>tr<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span>地址<span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span>北京市东城区棉花胡同<span class="token number">01</span>号<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token operator"><</span>tr<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span>电话<span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span><span class="token operator"><</span>td<span class="token operator">></span><span class="token number">010</span><span class="token operator">-</span><span class="token number">12345678</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token operator"><</span>tr<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span>邮箱<span class="token punctuation">:</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span><span class="token operator"><</span>td<span class="token operator">></span>qile@<span class="token number">163.</span>com<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>aside<span class="token operator">></span>
</div>
<div class=“box01”> <!–第二个盒模型–>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"new"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>热卖商品<span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span><span class="token operator"><</span>img id<span class="token operator">=</span><span class="token string">"nd"</span> src<span class="token operator">=</span><span class="token string">"image/hot.jpg"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">""</span> title<span class="token operator">=</span><span class="token string">"棉芯枕头"</span> id<span class="token operator">=</span><span class="token string">"ba1"</span><span class="token operator">></span>
<span class="token operator"><</span>img id<span class="token operator">=</span><span class="token string">"na"</span> src<span class="token operator">=</span><span class="token string">"image/product01.jpg"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>h3<span class="token operator">></span>棉芯枕头 特价¥<span class="token number">50</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">""</span> title<span class="token operator">=</span><span class="token string">"机械键盘"</span> id<span class="token operator">=</span><span class="token string">"ba2"</span><span class="token operator">></span>
<span class="token operator"><</span>img id<span class="token operator">=</span><span class="token string">"na1"</span> src<span class="token operator">=</span><span class="token string">"image/product02.jpg"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>h3<span class="token operator">></span>机械键盘 特价¥<span class="token number">100</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">""</span> title<span class="token operator">=</span><span class="token string">"精美橱柜"</span> id<span class="token operator">=</span><span class="token string">"ba3"</span><span class="token operator">></span>
<span class="token operator"><</span>img id<span class="token operator">=</span><span class="token string">"na2"</span> src<span class="token operator">=</span><span class="token string">"image/product05.jpg"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>h3<span class="token operator">></span>精美橱柜 特价¥<span class="token number">600</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"register"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>登录表单<span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>img id<span class="token operator">=</span><span class="token string">"ri"</span> src<span class="token operator">=</span><span class="token string">"image/register.jpg"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span>br<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>form action<span class="token operator">=</span><span class="token string">""</span> id<span class="token operator">=</span><span class="token string">"fo"</span><span class="token operator">></span>
<span class="token operator"><</span>table<span class="token operator">></span>
<span class="token operator"><</span>tr<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span>用户名<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> id<span class="token operator">=</span><span class="token string">"user01"</span> maxlength<span class="token operator">=</span><span class="token string">"11"</span> placeholder<span class="token operator">=</span><span class="token string">"请输入您的用户名"</span> required<span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token operator"><</span>tr id<span class="token operator">=</span><span class="token string">"fot"</span><span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span>密码<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"password"</span> id<span class="token operator">=</span><span class="token string">"password01"</span> maxlength<span class="token operator">=</span><span class="token string">"16"</span> required<span class="token operator">/</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token operator"><</span>tr<span class="token operator">></span>
<span class="token operator"><</span>th colspan<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"submit"</span> value<span class="token operator">=</span><span class="token string">"登录"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"dbd"</span><span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">""</span> <span class="token operator">></span>忘记密码<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">""</span> id<span class="token operator">=</span><span class="token string">"zc"</span><span class="token operator">></span>注册账号<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</div>
<div class=“news”>
<img id=“nei” src=“image/news.jpg” alt=""/><br><br>
<div class=“box03”>
<div class=“nd”>
<a href=“https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&word=%E5%90%AF%E4%B9%90” target="_blank" title=“企业新闻”>CCKA零售创新奖、十大创新业态在会议期间隆重揭晓,<br>由启乐打造的时尚原创生活类
自营电商平台“启乐优选”<br>从上百个候选案例中脱颖而出,斩获CCKA零售创新奖。</a>
</div>
<div id=“nea02”>
<a href=“https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&word=%E5%90%AF%E4%B9%90” target="_blank" title=“企业新闻”>启乐中国新世代于北京正式开幕。北京<br>
京东店选址中国电商的代表企业——总部园区内,这是<br>
HOTEL后在中国的一次新世代事业形态布局。</a>
</div>
</div>
</div><br><br><br><br>
<footer> <!– 页脚区 –>
Copyright © 18网汉*** All Rights Reserved. 版权所有
</footer>
<br>
</body>
</html>
2.CSS
*{
/*background-color: #5F822F;*/
}
#ha2{
position:absolute;
left: 1400px;
text-decoration: none;
}
#ha2:hover{
background-color: aqua;
}
header{
height: 150px;
background-image: url(“image/header01.jpg”);
background-repeat: round;
}
#hah{
text-decoration: none;
}
#hah:hover{
background-color: aqua;
}
#hh{
color: coral;
position:absolute;
left:100px;
top: 30px;
}
nav{
width: 1000px;
}
nav ul{
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: bisque;
height: 40px;
font-size: x-large;
font-weight: 800;
list-style-type: none;
overflow: hidden;
}
nav ul li a{
text-decoration: none;
padding: 12px 50px;
/padding: 1px 5px;/
}
nav ul li a:hover{
background-color: burlywood;
}
.nud{
display: inline-block;
}
.nudd{
display: none;
position: absolute;
<span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.2<span class="token punctuation">)</span><span class="token punctuation">;</span>
}
.nud:hover .nudd{
display: block;
}
.nudd a:hover{
background-color: aquamarine;
}
.nuda{
display: inline-block;
text-decoration: none;
}
.nuda:hover{
background-color: burlywood;
}
.nudd a{
display: block;
color: crimson;
padding: 12px 50px;
text-decoration: none;
}
.box{
display: flex;
}
@-webkit-keyframes myfirst {
0%{
background-image: url(“image/wuy00.jpg”);
<span class="token punctuation">}</span>
<span class="token selector">25%</span><span class="token punctuation">{<!-- --></span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url("image/wuy01.jpg")</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">50%</span><span class="token punctuation">{<!-- --></span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url("image/wuy02.jpg")</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">75%</span><span class="token punctuation">{<!-- --></span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url("image/wuy03.jpg")</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
}
#ha1{
flex: 60%;
width:60%;
height:450px;
background-size: 100%;
background-image:url(“image/wuy00.jpg”) ;
-webkit-animation: myfirst 8s infinite;
}
#ha3{
flex: 40%;
}
#ad{
padding-left: 20px;
}
.tab01 td{
border:2px solid;
border-color: blueviolet;
background-color: aquamarine;
height: 50px;
}
.tab02 td{
border:2px groove;
border-color: bisque;
background-color: bisque;
height: 50px;
}
.box01{
display: flex;
}
.new{
flex: 60%;
}
.new h3{
color: red;
}
.register{
flex: 40%;
padding-top: 10px;
padding-left: 20px;
}
#nd{
padding-top: 10px;
width: 900px;
height:83px;
}
#ba1{
float: left;
}
#ba2{
float: left;
padding-left: 50px;
}
#ba3{
float: left;
padding-left: 50px;
}
@keyframes mysec {
0%{
transform:scale(0.7);}
25%{
transform:scale(1); }
}
#na{
width:250px;
height:200px;
}
#na:hover{
animation: mysec 5s linear infinite;
}
#na1{
width:250px;
height:200px;
}
#na1:hover{
animation: mysec 5s linear infinite;
}
#na2{
width:250px;
height:200px;
}
#na2:hover{
animation: mysec 5s linear infinite;
}
#ri{
padding-top: 1px;
width: 400px;
height:83px;
}
#fo{
padding-top: 20px;
}
.dbd{
padding-left: 10px;
padding-top: 20px;
}
#zc{
padding-left: 80px;
}
#nei{
padding-top: 10px;
}
.nd{
padding-left: 30px;
}
.box03{
display: flex;
}
#nea02{
float: left;
padding-left: 80px;
}
.intd{
padding-left: 80px;
}
footer{
text-align: center;
background-color: #83B441;
height: 50px;
}
window.onload=function(){
if(document.getElementById("fo") != null){
document.getElementById("fo").onsubmit=function(){
var yhm = document.getElementById("user01");
var mm = document.getElementById("password01");
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token regex">/^1\d{10}$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>yhm<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">/*用正则表达式,检查输入的用户名格式是否为以1开头的11位数*/</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"输入用户名格式错误,请重新输入以1开头的11位数用户名!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>mm<span class="token punctuation">.</span>value <span class="token operator">!=</span> <span class="token number">12345</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"密码输入错误,请重新输入!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> ture<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
}
声明:案例中的图片素材来源于网络,侵删。
https://pan.baidu.com/s/1xGvBVjnJNWxsdoUziujz0g 提取码:162k
云服务器搭载业务,选择合适的平台最重要!
从目前国内云计算市场的格局来看,国内云计算前三强分别是阿里云、腾讯云和华为云,阿里云、腾讯云作为背靠互联网平台的企业,更偏向于B端用户;华为与作为传统的通信巨头,更偏向于G端。
当然如何选择服务器机型,这里有篇文档汇总的比较详细,文档地址:
云服务器哪家好!2021年阿里云、腾讯云、华为云的服务器配置及价格对比?
如果是高并发,高IO业务场景,需要确定服务器规格,可让业务应用性能发挥到最佳,参考官方文档:
阿里云服务器规格:规格实例族 - 云服务器 ECS
腾讯云服务器规格:规格实例族 - 云服务器CVM