1.导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业5 导航栏</title>
<style>
div{
width: 1400px;
height:50px;
background-color: gray;
margin: auto;
font-size: 25px;
text-align: center;
line-height: 2;
border-radius: 20px;
text-shadow: 10px 10px 10px white ;
box-shadow:10px 10px 10px gray ;
}
span:hover{
color: aqua;
background-color: red;
}
</style>
</head>
<body>
<div>
<span>游戏1</span>
<span>游戏2</span>
<span>游戏3</span>
<span>游戏4</span>
<span>游戏5</span>
<span>游戏6</span>
<span>游戏7</span>
<span>游戏8</span>
<span>游戏9</span>
</div>
</body>
</html>运行结果如下：
2.三个页面（仿淘宝）
2.1登陆页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业6</title>
<style>
*{
margin: 0%;
}
/* div{
border: 1px solid black;
} */
.box2{
width: 600px;
height: 400px;
background-color: rgb(245, 244, 242);
margin-left: 30%;
margin-top: 10%;
border-radius: 20px;
}
.b21{
height: 20%;
font-size: 30px;
text-align: center;
}
.b22{
height: 70%;
font-size: 50px;
text-align: center;
}
.b23{
height: 10%;
text-align: center;
}
span{
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<form action="https://www.taobao.com/"><div class="box1"> <img src="./55e554cc1d3a92b0ae010ef2225c687.png" alt=""></div>
<div class="box2">
<div class="b21">密码登录|短信登录</div>
<div class="b22">
<p><input type="text" placeholder="账号名/邮箱/手机号" style="height: 50px; width:400px; border-radius: 15px"></p>
<p><input type="password" placeholder="请输入登录密码" style="height: 50px; width:400px;border-radius: 15px" ></p>
<p><button type="submit" style="height: 50px;width: 400px;" >登录</button></p>
</div>
<div class="b23">
<span>免费注册</span>
<span>忘记账户名</span>
<span>忘记密码</span>
</div>
</div>
</form>
</body>
</html>运行结果：
2.2：主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>、
<style>
.box{
display: grid;
height: 1500px;
grid-template-columns:repeat(5,1fr) ;
grid-template-rows:repeat(13,1fr) ;
grid-gap: 10px;
/* text-align: center; */
font-size: 25px;
}
/* 导航栏 */
.box>:nth-child(1){
grid-column: 1/6;
background-color: rgb(247, 225, 225);
position: relative;
}
/* 分类索引 */
.box>:nth-child(2){
grid-row: 2/5;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(3){
grid-column: 2/6;
background-color: rgb(247, 225, 225);
height: 100px;
}
.box>:nth-child(4){
grid-row: 3/5;
background-color:rgb(247, 225, 225);
height: 400px;
}
.box>:nth-child(5){
grid-column: 3/4;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(6){
background-color: rgb(247, 225, 225);
}
.box>:nth-child(7){
background-color: rgb(247, 225, 225);
}
.box>:nth-child(8){
background-color: rgb(247, 225, 225);
}
.box>:nth-child(9){
background-color: rgb(247, 225, 225);
}
.box>:nth-child(10){
background-color: rgb(247, 225, 225);
}
.box>:nth-child(11){
grid-column: 1/6;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(12){
grid-column: 1/2;
grid-row: 6/10;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(13){
grid-column: 2/3;
grid-row: 6/10;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(14){
grid-column: 3/4;
grid-row: 6/10;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(15){
grid-column: 4/5;
grid-row: 6/10;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(16){
grid-column: 5/6;
grid-row: 6/10;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(17){
grid-column: 1/2;
grid-row: 10/14;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(18){
grid-column:2/3;
grid-row: 10/14;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(19){
grid-column: 3/4;
grid-row: 10/14;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(20){
grid-column: 4/5;
grid-row: 10/14;
background-color: rgb(247, 225, 225);
}
.box>:nth-child(21){
grid-column: 5/6;
grid-row: 10/14;
background-color: rgb(247, 225, 225);
}
p:hover{
color: red;
}
.c2:hover{color: red;
}
div{
border-radius: 15px;
}
</style>
</head>
<body>
<div class="box">
<!-- 搜索栏 -->
<div>
<input type="text" placeholder="请输入搜索内容 " style="width: 900px; height: 60px; font-size: large; margin-top: 20px; border-radius: 15px;">
<button style="width: 100px; height: 60px; font-size: large; margin-top: 20px; color: red;">搜索</button><br>
<p style="font-size: large;">大额神券 苹果惊喜券 买一亨十 家电爆款 3c数码优惠 女装 美味狂欢 货架</p>
</div>
<div class="c2">
<img src="./冰淇淋.png" width="35px" height="35px">电脑 / 办公 /文具<br>
<img src="./饼干.png" width="35px" height="35px">工艺 / 商业 /定制<br>
<img src="./蛋炒饭.png" width="35px" height="35px"> 家电 / 手机 / 数码<br>
<img src="./烤鸡.png" width="35px" height="35px">家居 / 家具/ 家装<br>
<img src="./牛奶.png" width="35px" height="35px"> 母婴 / 玩具/ 动漫<br>
<img src="./蛋卷.png" width="35px" height="35px"> 美妆 /个护 / 清洁<br>
<img src="./棒棒糖.png" width="35px" height="35px">食品 / 饮料/ 酒水<br>
<img src="./果汁.png" width="35px" height="35px"> 汽车 / 用品 /用品<br>
<img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
<img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
<img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
<img src="./冰淇淋.png" width="35px" height="35px">运动 / 户外 / 运动<br>
</div>
<div> <pre style="font-size: 30px; color: rgb(250, 95, 12); text-align: center;">天猫 | 淘宝直播 | 1688严选 | 司法拍卖 | 天猫超市 | 聚划算</pre></div>
<div><img src="./e8c8982803f8f8a136ec8dee105a5e9.png" width="300px" height="400px"></div>
<div> <img src="./c58e98ba2d4070710d7be15d402e383.png" ></div>
<div> <img src="./c58e98ba2d4070710d7be15d402e383.png" ></div>
<div style="text-align: center;"> <img src="./星星.png" width="30px"height="30px" > <br>宝贝收藏
<br>
<br>
<img src="./店铺.png" width="30px"height="30px" ><br>买过的店<br>
</div>
<div><img src="./c58e98ba2d4070710d7be15d402e383.png" ></div>
<div><img src="./c58e98ba2d4070710d7be15d402e383.png" ></div>
<div><img src="./更多.png" ></div>
<div style="text-align: center;"><img src="./冰淇淋.png" width="35px" height="35px" >
猜你喜欢
|
潮店数码 |
服饰时尚 |
运动户外 |
精致护理</div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
<div> <img src="./商品.png" width="310px" height="360px"></div>
</div>
</body>
</html>
2.3商品详细页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品详细页</title>
<style>
div{
/* border: 1px solid red; */
background-color: aliceblue;
border-radius: 15px;
}
.c1{
height: 100px;
}
.c2{
height: 100px;
}
.c3{
height: 600px;
}
.c3>div{
float: left;
}
p{
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"><img src="./天猫.png" ></div>
<div class="c2"><img src="./商品2.png" ></div>
<div class="c3">
<div><img src="./商品.png" width="400px" height="600px"></div>
<div>
<h1 style="text-align: center;">湖北特产中华老字号黄...</h1><br>
<p>￥12.8</p><br>
<p style="font-size: large;color: black;">配送:
湖北黄石 至 长沙市望城区快递: 免运费 48小时内发货</p>
<button style="height: 100px; width: 300px;font-size: 50px;background-color: red;border-top-left-radius: 15px;border-bottom-left-radius: 15px; ">马上抢</button>
<button style="height: 100px; width: 300px;font-size: 50px;background-color: orange;border-top-right-radius: 15px;border-bottom-right-radius: 15px; ">加入购物车</button>
<span style="font-size: 50px;" ><img src="./星星.png" width="50px" height="50px" >收藏</span>
</div>
</div>
</div>
</body>
</html>
总结：
1.导航栏需要使用border radius 的样式使得样式更美观 字体以及导航栏所使用的div需要加上阴影以及使用hover属性使得鼠标移动到字体上时变色
2.登陆页面需要使用input创建文本框以及提交按钮button进行提交跳转到淘宝官网页面
3.主页使用了栅格布局使得排版更加方便整洁 并使用了图标标签在字体前进行装饰
4.商品详细页只需注意各个字体的排版位置即可
5.不足点：
排版时的微调没有做好
仍然使用了许多空格
css部分使用的比较少（主要直接用在了标签后 例如：<div style="">）且并集选择器用的少显得代码冗长
1983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
