html+css项目实战＜——＞淘宝网页
【代码】html+css项目实战＜——＞淘宝网页。
·
一、划分好各个区域
二、准备好网页中需要用到的图标元素等
三、清除网页原本样式
四、观察网页中是否有重复元素或样式，可以考虑创建一个重复样式css文件
五、根据从上到下，从左到右顺序，循序渐进，戒骄戒躁，
实战项目：
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网-淘！我喜欢</title>
<link rel="icon" href="淘宝图标.jpg">
<link rel="stylesheet" href="淘宝.css">
<link rel="stylesheet" href="reset.css">
<style>
.a:hover {
color: red;
}
.img2 {
background-image: url("淘宝登录.jpg");
background-position: 10%;
background-size: contain;
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin: 20px 20px;
margin-left: 30px;
}
.right1 {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
position: relative;
left: 30px;
}
.right2 {
position: relative;
left: 30px;
}
.right3 {
position: relative;
top: 20px;
text-align: center;
}
.fix {
width: 50px;
height: 200px;
position: fixed;
line-height: 40px;
right: 0px;
top: 200px;
border-radius: 5px;
background: rgb(245, 244, 244);
}
.fixed {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="headmessage clearfix">
<ul class="fl">
<li>
<span>中国大陆</span>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#" class="login">亲，请登录</a>
<a href="#" class="a">免费注册</a>
</li>
<li>
<a href="#" class="a">手机逛淘宝</a>
</li>
</ul>
<ul class="fr">
<li>
<a href="#">我的淘宝</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont" style="font-size: 20px;"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#" class="a"><span class="iconfont a"></span>收藏夹</a>
<span></span>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li>|</li>
<li>
<a href="#">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont"></span>
<a href="#">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
<div class="headseach">
<div class="left fl"><a href="#" class="taobao">淘宝</a></div>
<div class="right fr" style="color: #f40; font-size: 20px;">手机淘宝<div class="iconfont"
style="color: #f40; font-size: 50px; margin: -10px 15px;"></div>
</div>
<form action="#">
<div class="center clearfix fl">
<div class="searchbox">
<input type="text" placeholder="秋季流行着装">
<i class="iconfont fl" style="margin:5px 0 10px 5px; font-size:20px;"></i>
<span class="iconfont fr" style="margin:7px 15px 10px 5px;"></span>
<div class="btn fl">
<button>搜索</button>
</div>
</div>
</div>
</form>
<div data-sg-type="hotWord" data-spm-ab="fline"
data-spm-ab-max-idx="15" class="hotword">
<a class="item" style="color:#f52743;font-weight:500; margin: 0 5px;"
href="#">
每满300减30
</a><a class="item" style="color:#f52743;font-weight:500;margin: 0 5px;"
href="#">
好物热销榜
</a><a class="item" style="color:#f52743;font-weight:500;margin: 0 5px;"
href="#">
抽iPhone
</a><a class="item" style="margin: 0 5px;"
href="#">
男士外套秋冬季
</a><a class="item" style="margin: 0 5px;"
href="#">
羊羔毛外套
</a><a class="item" style="margin: 0 5px;"
href="#">
长款羽绒服
</a><a class="item" style="margin: 0 5px;"
href="#">
fogal丝袜
</a><a class="item" style="margin: 0 5px;"
href="#">
jansport双肩包
</a>
</div>
</div>
</div>
<div class="nav">
<a href="#" style="color: #f40;">天猫</a>
<span class="iconfont"
style="font-size: 20px; margin:px -15px 0 5px ;position: relative; top: -20px; left: 20px;"></span>
<a href="#" style="color: #f40; ">淘宝直播</a>
<img src="新.svg" alt="" style="width: 20px; margin: -41px -15px 0 15px;">
<a href="#" style="color: #f40;">淘宝企业购</a>
<a href="#" style="color: #f40;">司法拍卖</a>
<a href="#" style="color: green;">天猫超市</a>
<span class="iconfont"
style="margin:800px -15px -70px 5px ;font-size:30px ;position: relative; top: -15px;"></span>
<a href="#">闲鱼集市</a>
<a href="#">天猫国际</a>
</div>
<div class="screen clearfix">
<div class="sidenav fl">
<ul>
<li> 电脑 / 配件 / 办公 / 文具<span class="iconfont"></span></li>
<li> 定妆 / 个护 / 家清香氛<span class="iconfont"></span></li>
<li>娱乐图书 / 乐器 / 鲜花<span class="iconfont"></span></li>
<li>工业品 / 商业农业 / 定制<span class="iconfont"></span></li>
<li>母婴 / 童装 / 玩具 / 宠物<span class="iconfont"></span></li>
<li>食品 / 生鲜 / 酒类 / 健康<span class="iconfont"></span></li>
<li>汽车 / 珠宝 / 文玩 / 箱包<span class="iconfont"></span></li>
<li>女鞋 / 男鞋 / 运动 / 户外<span class="iconfont"></span></li>
<li>女装 / 男装 / 内衣 / 配饰<span class="iconfont"></span></li>
<li>家具 / 家装 / 家居 / 厨具<span class="iconfont"></span></li>
<li>家 / 手机 / 通信 / 数码<span class="iconfont"></span></li>
</ul>
</div>
<div class="signin fr">
<div class="img2"></div>
<div class="right1 a">晚上好</div>
<div class="right2">注册 | 开店</div>
<strong style="position: relative; left: -40px ;top:10px; font-size: 14px;">登录淘宝后更多精彩</strong>
<div class="right3">
嘿！更懂你的推荐，更便捷的搜索</div>
<button
style="background-color: #ff5000; border: none; color: #fff; border-radius: 5px; width: 200px; height: 40px; position: absolute; top:150px; left: 0; right: 0; margin: 0 auto;">立即登录</button>
<img src="signin.png" style="width:231px; position: relative; top: 70px;" alt="">
</div>
<div class="img1">
<img src="屏幕截图 2024-11-23 192912.png" alt="" style="width: 600px;">
</div>
</div>
<div class="fix">
<a href="#" class="fixed">官方插件</a>
<a href="#" class="fixed">消息</a>
<a href="#" class="fixed">购物车</a>
<a href="#" class="fixed">官方客服</a>
<a href="#" class="fixed">反馈</a>
</div>
</body>
</html>css代码：
@import 'reset.css';
body {
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
@font-face {
font-family: 'iconfont';
/* Project id 4734965 */
src:
url('//at.alicdn.com/t/c/font_4734965_ebfx6rrvjc4.woff2?t=1732200387173') format('woff2'),
url('//at.alicdn.com/t/c/font_4734965_ebfx6rrvjc4.woff?t=1732200387173') format('woff'),
url('//at.alicdn.com/t/c/font_4734965_ebfx6rrvjc4.ttf?t=1732200387173') format('truetype');
}
@font-face {
font-family: 'iconfont';
/* Project id 4755061 */
src: url('//at.alicdn.com/t/c/font_4755061_cdtemotjyge.woff2?t=1732193923195') format('woff2'),
url('//at.alicdn.com/t/c/font_4755061_cdtemotjyge.woff?t=1732193923195') format('woff'),
url('//at.alicdn.com/t/c/font_4755061_cdtemotjyge.ttf?t=1732193923195') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.headmessage {
background-color: #f0f0f0;
width: 1200px;
height: 35px;
}
.headmessage li {
float: left;
line-height: 35px;
padding: 0 6px;
font-size: 0;
}
.headmessage li a {
color: #6c6c6c;
font-size: 12px;
}
.headmessage li a.login {
color: #f22e00;
margin-right: 7px;
}
.headmessage span {
font-size: 12px;
}
.headmessage span.arrow {
margin: 0 7px;
}
.headseach .taobao {
background-position: 10%;
background-size: contain;
display: block;
height: 0;
overflow: hidden;
padding-top: 72px;
text-indent: -9999px;
width: 240px;
background-image: url("淘宝.png");
background-repeat: no-repeat;
}
.headseach .left {
position: absolute;
left: 20px;
top: 17px;
}
.headseach {
position: relative;
width: 1200px;
height: 100px;
background-color: white;
padding: 24px 0 10px 0;
}
.headseach .right {
position: absolute;
right: 150px;
top: 5px;
}
.headseach .hotword {
--tbpc-primary-theme-alpha-color: #ff500015;
--tbpc-secondary-theme-color: #ff5000 !important;
--tbpc-secondary-theme-alpha-color: #ff500015;
--tbpc-price-color: #ff5000;
--tbpc-price-alpha-color: #ff500015;
--tbpc-border-theme-color: #ffd5c2;
--tbpc-background-theme--color: #fff1eb;
--tbpc-gold-theme-color: #b88449;
--tbpc-primary-color: #1f1f1f;
--tbpc-tertiary-color: #999;
--tbpc-disable-color: #ccc;
--tbpc-border-color: #d6d6d6;
--tbpc-divider-color: #ebebeb;
--tbpc-bg1-color: #f5f5f5;
--tbpc-bg2-color: #f7f7f7;
--tbpc-bg3-color: #fafafa;
--tbpc-white-color: #fff;
--tbpc-primary-alpha-color: rgba(0, 0, 0, .88);
--tbpc-secondary-alpha-color: rgba(0, 0, 0, .52);
--tbpc-tertiary-alpha-color: rgba(0, 0, 0, .4);
--tbpc-disable-alpha-color: rgba(108, 20, 20, .2);
--tbpc-border-alpha-color: rgba(0, 0, 0, .16);
--tbpc-divider-alpha-color: rgba(0, 0, 0, .08);
--tbpc-bg1-alpha-color: rgba(0, 0, 0, .04);
--tbpc-bg2-alpha-color: rgba(0, 0, 0, .03);
--tbpc-bg3-alpha-color: rgba(0, 0, 0, .02);
--tbpc-primary-theme-color: #ff5000;
--tbpc-secondary-color: #7a7a7a;
font: 12px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, BlinkMacSystemFont, Helvetica Neue, Arial, PingFang SC, PingFang TC, PingFang HK, Microsoft Yahei, Microsoft JhengHei;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-pack: start;
justify-content: flex-start;
max-width: 750px;
-webkit-box-align: start;
align-items: flex-start;
flex-wrap: wrap;
overflow: hidden;
margin-left: 290px;
margin-top: 40px;
height: 16px;
}
.headseach .center .hotword a {
margin: 5px;
}
.headseach .center {
width: 630px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
.headseach .center .searchbox {
width: 554px;
height: 40px;
box-sizing: border-box;
border: 2px solid #ff5000;
border-right: none;
border-radius: 20px 0 0 20px;
position: relative;
margin-top: 25px;
}
.headseach .center input {
width: 490px;
height: 36px;
line-height: 36px;
outline: none;
border: none;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
text-indent: 10px;
}
.headseach .center button {
position: absolute;
top: -2px;
right: -70px;
width: 74px;
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
color: #fff;
border: none;
background-image: linear-gradient(to right, #ff9000, #ff5000);
border-radius: 0 20px 20px 0;
}
.nav {
position: absolute;
display: block;
left: 230px;
right: 0;
font-size: 20px;
width: 1104px;
height: 48px;
margin-top: -25px;
}
.nav a {
margin: 10px;
position: relative;
top: -20px;
font-weight: bold;
}
.screen {
width: 1200px;
height: 400px;
position: relative;
top: 25px;
}
.screen .sidenav {
width: 256px;
height: 400px;
background-color: #f0f0f0;
border-radius: 10px;
}
.screen .sidenav li {
line-height: 20px;
height: 37px;
text-align: center;
margin: 0px 5px;
text-indent: -50px;
}
.screen .sidenav span {
margin-left: 30px;
}
.screen .img1 {
width: 600px;
height: 400px;
background-color: #f0f0f0;
position: absolute;
left: 313px;
border-radius: 10px;
}
.screen .signin {
width: 232px;
height: 400px;
background-color: #f0f0f0;
border-radius: 10px;
position: relative;
}
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)