1.使用表格做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w</title>
</head>
<body>
<table width="100%">
<tr>
<td align="left">
<img src="../img/logo2.png" height="50px" >
</td>
<td align="center">
<img src="../img/header.jpg" height="50px">
</td>
<td align="right">
<a href="#" target="_top">登入</a>
<a href="#" target="_top">注册</a>
<a href="#" target="_top" >注册</a>
</td>
</tr>
<table width="100%" bgcolor="black" >
<tr >
<td style="text-align: center"><font color="white" size="2px">首页</font></td>
<td style="text-align: center"><font color="white" size="2px">首页</font></td>
<td style="text-align: center"><font color="white" size="2px">首页</font></td>
<td style="text-align: center"><font color="white" size="2px">首页</font></td>
<td style="text-align: center"><font color="white" size="2px">首页</font></td>
</tr>
</table>
<tr>
<img src="../img/1.jpg" width="100%">
</tr>
<tr>
<img src="../img/title2.jpg">
</tr>
<tr>
<td>
<table width="100%">
<tr >
<td rowspan="2" width="206px" height="480px"><img src="../products/hao/big01.jpg"></td>
<td colspan="3" height="240px" ><img src="../products/hao/middle01.jpg"height="240px" width="100%" ></td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red"> $999</font></p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
</tr>
<tr>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
<td><img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p>$999</p>
</td>
</tr>
</table>
</td>
</tr>
<tr >
<td >
<img src="../products/hao/ad.jpg" width="100%">
</td>
</tr>
<tr>
<td><img src="../img/footer.jpg" width="100%"></td>
</tr>
<tr>
<td>
<table width="100%">
<tr align="center">
<td>
<a href="#">你好</a>
<a href="#">你好</a>
<a href="#">你好</a>
<a href="#">你好</a>
<a href="#">你好</a>
</td>
</tr>
<tr align="center">
<td>
Copysdjfkjsdofjk sdjofjsdijf
</td>
</tr>
</table>
</td>
</tr>
</table>>
</body>
</html>
2.使用div做同样的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
.logo{
float:left;
width: 33%;
height: 60px;
line-height: 60px;
}
.menu{
text-decoration: none;
height: 20px;
text-align: center;
line-height: 20px;
width: 18%;
display:inline-block;
}
.prodeucts{
text-align: center;
float: left;
width: 16.6%;
height: 240px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div class="logo" ><img src="../img/logo2.png" height="50px"></div>
<div class="logo" align="center"><img src="../img/header.png" ></div>
<div class="logo" align="right"><a href="#">登入</a><a href="#">注册</a><a href="#">购物</a></div>
</div>
<div style="clear: both"></div>
<div style="background: black; height: 20px" >
<a href="#" class="menu"> <font color="white"> 首页</font> </a>
<a href="#" class="menu"> <font color="white"> 手机数码</font></a>
<a href="#" class="menu"> <font color="white"> 鞋靴箱包</font></a>
<a href="#" class="menu"> <font color="white"> 办公电脑</font></a>
<a href="#" class="menu"> <font color="white"> 香烟酒水</font></a>
</div>
</div><img src="../img/1.jpg">
<div>
<h3>最新商品<img src="../img/title2.jpg"></h3>
</div>
<div>
<div style="float: left; height: 480px" ><img src="../products/hao/big01.jpg"></div>
<div style="float:left;height: 480px;width: 80%">
<div style="float:left; height: 240px;width: 50%;">
<img src="../products/hao/middle01.jpg" height="240px" width="100%" >
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
<div class="prodeucts">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p><font color="red">$999</font></p>
</div>
</div>
</div>
<div>
<img src="../products/hao/ad.jpg" width="100%">
</div>
<div>
<img src="../img/footer.jpg" width="100%">
</div>
<div style="text-align: center">
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</div>
<div style="text-align: center">
Copyright @ 2019-2039 中软国际 版权所有
</div>
</div>
</body>
</html>
做大数据只需要了解html 要看的懂代码就行
顺便做了一个淘宝登入界面 不过这是留给本人看的 因为做的很烂 之后会修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.page{
margin-left:150px;
height: 100px;
}
.header{
float: left;
padding-top: 20px;
}
.content{
float: left;
border: 1px solid;
line-height: 15px;
height: 30px;
background: #fef2f2;
border-color: #ffb4a8;
background-color: #fef2f2;
color: #6C6C6C;
}
.error{
font: 12px/1.5 "Microsoft YaHei",tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
.link{
float: right;
line-height: 44px;
color: #666;
font-size: 12px;
text-decoration: none;
}
.login-newbg{
position: absolute;
top: 35%;
right: 10%;
width: 400px;
height: 300px;
}
.wjmm{
position: absolute;
top: 70%;
right: 25%;
}
form{
position: absolute;
top: 45%;
right: 3%;
width: 400px;
height: 300px;
}
.submit
{
width: 160px;
color: white;
background: red;
}
.albbjt{
text-decoration: none;
margin: 5px 200px 0px 200px;
text-align: center;
border-top: 2px solid ;
border-bottom: 2px solid;
border-color: #6C6C6C;
}
.biabiabia{
position: absolute;
left: 20%;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<a href="https://login.taobao.com"></a><img src="../taobao/淘宝logo.png " height="40px" >
</div>
<div class="content" style="text-align: center;width: 880px; margin: 10px 0 0 100px;">
<p class="error">为确保您账户的安全及正常使用,依《网络安全法》相关要求,6月1日起会员账户需绑定手机。如您还未绑定,请尽快完成,感谢您的理解及支持!</p>
</div>
<a href="#" class="link">登录页面"改进建议</a>
</div>
<div style="background-image: url(../taobao/bgcccc.jpg); width: 100%;height: 600px">
<img class="login-newbg" src="../taobao/登入界面.jpg" >
<form>
<p>密码输入</p>
<input type="text" name="firstname" value="请输入账号">
<br><br>
<input type="text" name="lastname" value="请输入密码">
<br><br>
<input type="submit" value="登入" class="submit" >
</form>
<div class="wjmm"><a href="#" >忘记密码</a>
</div>
</div>
<div class="footer">
<div class="albbjt">
<a>阿里巴巴集团|阿里巴巴国际站|阿里巴巴中国站|全球速卖通|淘宝网|天猫|聚划算|一淘|阿里妈妈|飞猪|虾米|阿里云计算|云OS|万网|支付宝|来往</a>
</div>
<div style="text-align: center;">
<p>关于淘宝合作伙伴营销中心廉正举报联系客服开放平台诚征英才联系我们网站地图法律声明隐私权政策© 2019 Taobao.com 版权所有</p>
<p>网络文化经营许可证:浙网文[2016]0132-032号|增值电信业务经营许可证:浙B2-20080224-1|信息网络传播视听节目许可证:1109364号</p>
</div>
<div class="biabiabia"><img src="../taobao/biabiabia.gif"></div>
</div>
</body>
</html>