第一次尝试静态网页制作
照着微软官网的首页做了个简单的静态页面
基本上就是东拼西凑，总算还是做出了个东西出来
留作纪念
最终效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Microsoft Official Home page</title>
<style>
#top1{
background-color: #fff;
height: 73px;
/* border: 1px solid #FF0000; */
margin-bottom: 10px;
box-shadow: 1px 1px 5px 3px #ccc;
}
#top2{
height: 73px;
/* border: 1px solid #0000FF; */
width: 1600px;
margin: auto;
}
#top3{
width: 1306px;
height: 46px;
/* border: 1px solid #0000FF; */
margin: 13.5px 0px;
}
#topimg{
margin-right: 12px;
}
.toptext{
position: absolute;
top: 24px;
left: 220px;
display: block;
width: 180px;
height: 46px;
/* border: 1px solid #FF0000; */
}
.toptext1{
color: #000;
display: block;
font-weight: 500;
line-height: 24px;
font-size: 18px;
}
.toptext2{
color: #000;
display: block;
font-size: 13px;
line-height: 24px;
}
#topclose{
height: 15px;
width: 120px;
position: absolute;
top: 38px;
right: 332px;
border: none;
text-decoration: underline !important;
background-color: transparent;
padding-right: 0;
margin-right: 12px
padding: 6px 0 8px;
}
#topclose2{
position: absolute;
top: 32px;
right: 160px;
font-size: 15px;
margin-top: 0;
letter-spacing: 0;
line-height: 18px;
min-width: 160px;
text-align: center;
background-color: #0067B8;
color: #FFF;
padding: 6px 0 8px;
}
#Mic{
/* border: 1px solid #FF0000;
height: 54px;
width: 1713px;
padding: 0px 95px 0px; */
/* border: 1px solid red; */
height: 54px;
width: 1600px;
margin: 0 auto;
}
#Micleft{
/* border: 1px solid #0000FF; */
height: 54px;
width: 408px;
float: right;
}
.parmean{
font-size: 13px !important;
list-style-type: none;
color: #000000;
font-family: "微软雅黑";
/* float: right; */
}
.parmean > li{
float: left;
padding: 0 8px 0;
border: 1px;
margin: 4px 1px 4px;
}
#Mic > img{
float: left;
margin: 15px 30px 15px 10px;
}
#Micleft > button{
border: none;
background-color: #FFF;
margin: 17px 8px 17px;
font-family: "MWF-MDL2";
/* text-decoration: underline; */
}
#Micleft > div {
float: right;
font-family: "microsoft yahei";
font-size: 13px;
padding-left: 12px;
padding-right: 4px;
margin: 17px 8px 17px;
}
#ScrollScreen{
/* border: 1px solid #FF0000; */
height: 775px;
width: 1600px;
padding: 0 86px 0 86px ;
margin: 0 56px 0;
}
#sstop{
height: 596px;
/* width: 1408px; */
width: 100%;
/* border: 1px solid red; */
margin: 0 0 0;
background-color: ;
background-image: url(image/电脑一.png);
background-size: 100% 100%;
}
#top11{
position: absolute;
top: 300px;left: 248px;
/* border: 1px solid red; */
width: 375px;
height: 139px;
}
#top111{
font-size: 34px;
line-height: 40px;
}
#top112{
position: absolute;
top: 54px;
font-size: 15px;
line-height: 20px;
font-weight: 400;
}
#top11 > button{
position: absolute;
font-size: 15px;
color: #FFF;
/* border: 2px solid transparent; */
box-shadow: 0 4px 8px 0 transparent;
padding: 8px 25px 8px 30px;
background-color: #000000;
top: 95px;
}
#top22{
position: absolute;
top: 700px;
/* border: 1px solid blue; */
width: 1599px;
height: 39px;
}
#top22 > div > #sp1{
font-size: 14px;
}#top22 > div > #sp2{
font-size: 13px;
}
#top22 > div{
position: absolute;
left: 760px;
top:6px;
}
#top22 > span{
position: absolute;
top: 8px;
left: 812px;
}
#ssbottom{
/* border: 1px solid blue; */
height: 127px;
padding-top: 48px;
}
#ssbottom > #imag1{
position: absolute;
top: 825px;
left: 480px;
}
#ssbottom > #imag2{
position: absolute;
top: 825px;
left: 705px;
}
#ssbottom > #imag3{
position: absolute;
top: 825px;
left: 930px;
}
#ssbottom > #imag4{
position: absolute;
top: 825px;
left: 1125px;
}
#ssbottom > #imag5{
position: absolute;
top: 825px;
left: 1350px;
}
#ssbottom > div{
font-size: 15px;
text-align: center;
width: 125px;
height: auto;
margin: 73px 50px 0;
float: left;
}
#ssbottom > .div1{
margin-left: 285px;
}
#ssbottom > .div4{
margin-left: 20px;
}
#block{
/* border: 1px solid purple; */
height: 446px;
width: 1600px;
padding: 0 90px 0;
margin: 0 56px 0;
}
#block > div{
width: 398px;
height: 450px;
/* border: 1px solid orange; */
float: left;
}
#block img{
width: 382px;
height: 214px;
margin-top: 40px;
}
#block h3{
margin-top: 35px;
margin-bottom: 0;
font-size: 20px;
line-height: 24px;
font-weight: 600;
padding-top: 1px;
padding-bottom: 2px;
margin-top: 37px;
font-family: 'Segoe UI',SegoeUI,'Microsoft YaHei',微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif;;
}
#block p{
margin-bottom: 0;
margin-top: 0;
font-size: 15px;
font-family: 'Segoe UI',SegoeUI,'Microsoft YaHei',微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif;;
}
#block a{
text-decoration: none;
font-weight: 600;
color: #0067b8;
padding: 10px 3px 7px 0;
position: relative;
/* border: 2px solid transparent; */
outline: 1px solid transparent;
outline-offset: -3px;
margin-left: 0;
background: transparent;
transition: none;
white-space: normal;
text-align: left;
margin-top: 3px;
margin-left: 3px;
display: inline-block;
position: relative;
}
</style>
</head>
<body>
<div id="top1">
<div id="top2">
<div id="top3">
<img src="image/RE4myc9.png" id="topimg"/>
<span class="toptext">
<span class="toptext1">随时了解全球重大新闻</span>
<span class="toptext2">获取 Microsoft News 拓展</span>
</span>
</div>
<span class="topright">
<button id="topclose" >不，谢谢</button>
<a id="topclose2">立即添加</a>
</span>
</div>
</div>
<div id="Mic">
<div id="Micleft">
<div></div>
<button>所有 Microsoft</button>
<button>
<span>搜索</span>
</button>
<div>登录</div>
<div>购物车</div>
</div>
<img src="image/微软标识.png" width="110px" height="23px" id="imag"/>
<ul class="parmean">
<li class="mean1">Microsoft 365</li>
<li class="mean2">Office</li>
<li class="mean3">Windows</li>
<li class="mean4">Surface</li>
<li class="mean5">Xbox</li>
<li class="mean6">优惠</li>
<li class="maen7">支持</li>
</ul>
</div>
<div id="ScrollScreen">
<div id="sstop">
<div id="top11">
<span id="top111">Surface Pro 7</span><br />
<span id="top112">随心所欲，百变箐英。让这款二合一设备来充实你的礼单</span><br />
<button>立即购买 ></button>
</div>
<div id="top22">
<div>
<span id="sp1">○</span>
<span id="sp2">●</span>
</div>
<span>▷</span>
</div>
</div>
<div id="ssbottom">
<img src="image/RE4sQDc.png"id="imag1"/>
<img src="image/RE4pndL.png"id="imag2"/>
<img src="image/RE4pxBu.png"id="imag3"/>
<img src="image/RE4pkvE.png"id="imag4"/>
<img src="image/RE4rriw.png"id="imag5"/>
<div class="div1">选择你的 Microsoft 365</div>
<div>购买 Surface 设备</div>
<div>购买 Xbox 游戏和主机</div>
<div class="div4">购买 Windows 10</div>
<div>购买商用版</div>
</div>
</div>
<div id="block">
<div>
<img src="image/笔记本三.png" >
<h3>每分每秒都值得珍惜</h3>
<p>身量纤薄、外观时尚的 Surface Laptop 3，让你在整个赛季享受持久惊喜</p>
<a href="https://www.cnblogs.com/happyJane/">立即购买 ></a>
</div>
<div>
<img src="image/办公三件套.png"/>
<h3>Microsoft 365</h3>
<p>只需一次便捷的订阅，便可以使用高级 Office 应用、额外的云存储、高级安全性等功能。</p>
<a href="https://www.cnblogs.com/happyJane/">最多可允许 6 名用户安装 ></a><br />
<a href="https://www.cnblogs.com/happyJane/">供 1 名用户安装 ></a>
</div>
<div>
<img src="image/xbox1.png"/>
<h3>Xbox One S</h3>
<p>物超所值的娱乐设备，配备 4K 蓝光和视频流。</p>
<a href="https://www.cnblogs.com/happyJane/">立即购买 ></a>
</div>
<div>
<img src="image/xbox2.png" />
<h3>Xbox 控制器</h3>
<p>精致外表下蕴藏着精准工艺、强劲实力与惊喜体验。</p>
<a href="https://www.cnblogs.com/happyJane/">立即购买 ></a>
</div>
</div>
</body>
</html>
<链接：https://pan.baidu.com/s/1nSJHhyO7VCo92OFfIS-GDA
提取码：1234
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V3的分享>
憨憨
