项目-无印良品
2018-10-29 本文已影响0人
子却
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MUJI静态网页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
}
body ul {
list-style-type: none;
padding: 0px;
}
body a {
text-decoration: none;
color: #666;
}
/* 使图片与父容器大小相同(%:定义基于包含它的块级对象的百分比最大宽度) */
img {
max-width: 100%;
}
/*header部分*/
header {
max-width: 1024px;
margin: 10px auto;
}
#header-box {
position: relative;
}
#logo-box {
float: left;
width: 130px;
}
/*要想让导航菜单在第一行，就需要让logo脱离文档流，否则菜单只能在第二行水平排列。*/
header ul {
display: flex;
}
header ul li {
/*设置 % 比设置 px 更具有灵活性，具体数值会在小屏幕设备上丢掉几个菜单项。*/
padding-left: 10px;
font-size: 14px;
}
header ul li:first-child {
margin-left: 30px;
}
nav a:hover {
color: #cccccc;
}
/*此法也可以让菜单水平排列，同样也需要logo脱离文档流。
header ul li{
float: left;
}*/
/*middle部分*/
#container {
max-width: 1024px;
margin: 30px auto;
}
/*图片列表*/
#list-img ul {
display: flex;
flex-wrap: wrap;
}
#list-img ul li {
/*用于计算图片列表的外边距*/
width: 23.5%;
max-width: 245px;
/*（100%-23.5%*4）/3 即是图片列表的外边距*/
margin-right: 2%;
}
#list-img li:last-child {
margin-right: 0;
}
/*文字*/
#list-img a {
display: block;
position: relative;
}
#list-img span ,#serve-pics span{
position: absolute;
left: 10px;
bottom: 10px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
/*更多*/
.more a {
display: block;
text-align: right;
padding-right: 16px;
position: relative;
font-size: 14px;
color: rgb(150, 146, 146);
}
.more a::after {
display: block;
position: absolute;
top: 6px;
right: 0;
border-top: 1px solid #7f7f7f;
border-right: 1px solid #7f7f7f;
transform: rotate(45deg);
content: "";
width: 7px;
height: 7px;
}
/*产品*/
#product-title {
position: relative;
}
#product-title span a {
position: absolute;
top: 0;
right: 0;
font-size: 14px;
color: rgb(150, 146, 146);
padding-right: 14px;
}
/*产品分类*/
#product,
#serve {
margin-top: 50px;
}
#product-list ul {
display: flex;
flex-wrap: wrap;
font-size: 12px;
border-bottom: 1px solid #eee;
}
#product-list li {
width: 15%;
margin: 20px 2% 20px 0px;
}
/*第二个ul列表有7项，所以不能用 :last-child 来设定大小。
#product-list li:last-child{
margin-right: 0;
}*/
#product-list li:nth-child(6n) {
margin-right: 0;
}
#product-list li img {
width: 40px;
}
#product-list li a {
display: block;
position: relative;
}
#product-list li span {
position: absolute;
top: 30%;
left: 55px;
}
/*店铺服务*/
#serve-title ,#serve-pics a{
display: block;
position: relative;
}
#serve-title span {
display: block;
position: absolute;
top: 0;
right: 0;
}
#serve ul{
display: flex;
flex-wrap: wrap;
}
#serve li{
width: 32%;
margin:10px 2% 20px 0;
}
#serve li:last-child{
margin-right: 0;
}
/*footer
footer{
width: 100%;
background-color: #ebebeb;
}
#contact{
width: 95%;
max-width: 1024px;
margin: 10px auto;
}
#contact div{
padding:20px 0 20px 0;
}
#contact div a{
margin-right: 20px;
}
#contact div img{
width: 60px;
}
/*右边图标*/
/*试了下用text-align来定位，但由于该属性需设置在块元素上，所以无论设在哪个元素上，结果都会让右侧图标出现在第二行。
#contact #pic{
display: block;
position: relative;
}
#contact #pic img{
width: 200px;
display: block;
position: absolute;
top: -40px;
right: 0;
}*/
footer{
background: #ebebeb;
}
footer #contact{
width: 95%;
max-width: 1024px;
margin: 10px auto;
}
footer a{
vertical-align: middle;
}
#contact div{
float: left;
}
#contact div a{
display: block;
float: left;
margin-right: 20px;
}
#contact #pic{
float: right;
}
footer::after,#contact div::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<header>
<section id="header-box">
<div id="logo-box">
<img src="./images/logo2.png">
</div>
<nav>
<ul>
<li><a href="#">网络商城</a></li>
<li><a href="#">店铺信息</a></li>
<li><a href="#">生活良品研究所</a></li>
<li><a href="#">问题咨询</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">店铺合作伙伴</a></li>
<li><a href="#">企业情报</a></li>
<li><a href="#">何谓无印良品</a></li>
</ul>
</nav>
</section>
</header>
<!--正文主体-->
<div id="container">
<section id="middle">
<img src="./images/middle.jpg">
</section>
<!--图片列表-->
<section id="list-img">
<ul>
<li>
<a href="#">
<img src="./images/list-1.jpg">
<span>自然、当然、無印。</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/list-2.jpg">
<span>MUJI HOTEL北京坊预定上线</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/list-3.jpg">
<span>柔和洗面洁面</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/list-4.jpg">
</a>
</li>
</ul>
<div class="more">
<a href="#">更多</a>
</div>
</section>
<!--产品-->
<section id="product">
<div id="product-title">
<h3>产品</h3>
<span class="more"><a href="#">网络商城</a></span>
</div>
<div id="product-list">
<ul>
<li>
<a href="#">
<img src="./images/p1-1.jpg">
<span>男装</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p1-2.jpg">
<span>女装</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p1-3.jpg">
<span>童装</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p1-4.jpg">
<span>鞋包</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p1-5.jpg">
<span>服装杂货</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p1-6.jpg">
<span>内衣</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./images/p2-1.jpg">
<span>织品</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p2-2.jpg">
<span>家具</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p2-3.jpg">
<span>电子产品</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p2-4.jpg">
<span>居家用品</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p2-5.jpg">
<span>文具</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p2-6.jpg">
<span>卫生&美容用品</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/p2-7.jpg">
<span>户外用品</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./images/p3-1.jpg">
<span>食品</span>
</a>
</li>
</ul>
</div>
</section>
<!--店铺服务-->
<section id="serve">
<div id="serve-title">
<h3>店铺服务</h3>
<span class="more"><a href="#">更多</a></span>
</div>
<div id="serve-pics">
<ul>
<li>
<a href="#">
<img src="./images/ser-1.png">
</a>
</li>
<li>
<a href="#">
<img src="./images/ser-2.jpg">
<span>家具搭配咨询服务</span>
</a>
</li>
<li>
<a href="#">
<img src="./images/ser-3.jpg">
<span>服装搭配咨询服务</span>
</a>
</li>
</ul>
</div>
</section>
</div>
<!--页脚-->
<footer>
<div id="contact">
<div>
<a href="#"><img src="images/weibo.png" width="30px"></a>
<a href="#"><img src="images/wechat.png" width="30px"></a>
</div>
<div id="pic">
<a href="#"><img src="images/passport.png" width="150px"></a></div>
</div>
</footer>
</body>
</html>
总结
整段代码并不复杂，看似代码很多，其中有很多重复的内容。但即便如此，还是需要注意细节，比如产品列表一栏中要选中正确的元素消除其右外边距。
稍微有点复杂的就是页脚的三个图标，利用float使其浮动到理想的位置，但也导致了父元素的塌陷，在参考了清除浮动的相关知识后，最后选择用:after选择器清除浮动造成的影响。
每一次的实操都是对自己的一次测验，通过测验才能清除的认识到自己还有哪些不足，并对其进行进一步的学习，经验就是这么累积起来的。
