【小白级别】HTML、CSS实现淘宝静态页面。
有需要欢迎大家下载源码观看~下载地址
三连关注后私信也可以拿源码哦~
移步【入门级别】案例:HTML CSS JS实现动态360防丢卫士页面
页面效果:
使用了原生HTML和css语法实现静态淘宝页面【简单】 ☆
代码段展示:
<div class="inner-content">
<div class="pic-box">
<img src="./img/pic2.png" alt="">
</div>
<div class="inner-mall">
<div class="head">
<img src="./img/tm.png" alt="">
<span class="tm">理想生活上天猫
</span>
<a href="#">
<img src="./img/pic3.png" alt="">
</a>
</div>
</div>
</div>
<div class="inner-right">
<a href="#">
<img src="./img/pic1.png" alt="">
</a>
<div class="hot">
<span>今日热卖</span>
<a href="#">
<img src="./img/pic4.png" alt="">
</a>
</div>
</div>
</div>
<div class="main-bottom">
<div class="content">
<div class="logo-box"></div>
<a href="#">
<img src="./img/pic5.png">
<h4>前端前端前端前端前前端前端前端前端前!</h4>
<p>前端前端前端前端前前端前端前端前端前!前端前端前端前端前
前端前端前端前端前!</p>
</a>
</div>
</div>
</div>
<div class="col-right">
<div class="member">
<div class="member-head">
<div class="head">
<a href="#"></a>
</div>
<span class="info">hi!您好</span>
<p>
<a href="#" class="icon">
<span></span>
领淘金币抵钱
</a>
<a href="#" class="club">
<span></span>
会员俱乐部
</a>
</p>
</div>
<div class="member-foot">
<a href="#" class="login">登录</a>
<a href="#">注册</a>
<a href="#">开店</a>
</div>
</div>
<div class="message">
<a href="#">网上有害信息举报
<span></span>
</a>
</div>
<div class="notice">
<div class="title">
<ul>
<li><a href="#">公告</a></li>
<li><a href="#">公告</a></li>
<li><a href="#" class="active">论坛</a></li>
<li><a href="#">公告</a></li>
<li><a href="#">公告</a></li>
</ul>
</div>
<div class="content">
<ul>
<li><a href="#" class="active">前端前端前端前端前</a></li>
<li><a href="#">前端前端前端前端前</a></li>
<li><a href="#">前端前端前端前端前</a></li>
<li><a href="#">前端前端前端前端前</a></li>
</ul>
</div>
</div>
<div class="module">
<ul>
<li>
<a href="#">
<span class="icon1"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon2"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon3"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon4"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon5"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon6"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon7"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon8"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon9"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon10"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon11"></span>
<p>购物</p>
</a>
</li>
<li>
<a href="#">
<span class="icon12"></span>
<p>购物</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
css代码段:
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
html, body {
width: 100%;
height: 100%;
background-color: #f4f4f4;
color: #3c3c3c;
overflow-x: hidden; /*横向滚动条隐藏*/
}
.wrapper {
width: 100%;
height: 100%;
}
/*上导航条*/
.wrapper .top-nav-wrap {
width: 100%;
height: 105px;
}
.wrapper .top-nav-wrap .top-nav {
width: 1190px;
height: 35px;
margin: 0 auto;
}
.wrapper .top-nav-wrap .top-nav .top-nav-l {
float: left;
}
.wrapper .top-nav-wrap .top-nav .top-nav-r {
float: right;
}
.wrapper .top-nav-wrap .top-nav ul li {
float: left;
margin-right: 7px;
}
.wrapper .top-nav-wrap .top-nav a {
color: #6c6c6c;
font-size: 12px;
line-height: 35px;
padding: 0 6px;
}
.wrapper .top-nav-wrap .top-nav a:hover {
color: #f40;
}
.wrapper .top-nav-wrap .top-nav .china {
color: #3c3c3c;
line-height: 35px;
font-size: 13px;
}
.wrapper .top-nav-wrap .top-nav .bg-pic {
display: inline-block;
width: 6px;
height: 3px;
background-size: 100% 100%;
vertical-align: middle; /*垂直排列中间对齐*/
}
.wrapper .top-nav-wrap .top-nav .c-span {
padding: 0 6px;
}
.wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic {
background-image: url('./img/xsj.png');
}
.wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic {
background-image: url(./img/gwc.png);
width: 12px;
height: 12px;
}
有需要欢迎大家下载源码观看~下载地址
三连关注后私信也可以拿源码哦~