html 苏宁首页,简单实现

效果图:

采用rem+media布局,页面大小会随浏览器窗口大小发生变化

0. 下载链接

链接：https://pan.baidu.com/s/1K51YENrKnnluvjg5WwIgcw
提取码：9999

1. 视口标签

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=1.0"/>

2. 搜索模块

html代码

			<div class="search-content">
			<a href="" class="classify"></a>
			<div class="search">
				<form action="">
					<input type="search" value="请输入">
				</form>
			</div>
			<a href="" class="login">登陆</a>
		</div>

css代码

/*计算公式: 页面元素750像素下px值除以750像素下html字体大小(50)*/
.search-content {
    border: 0;
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    width: 15rem;
    height: 1.76rem;
    background-color: transparent;
}
.search-content .classify {
    width: 0.88rem;
    height: 1.4rem;
    background: url("../images/icon1.png") no-repeat 0 -0.1rem;
    background-size: 0.88rem, auto;
    margin: 0.22rem 0.5rem 0.14rem 0.48rem;
}
.search-content .search {
    flex: 1;
}
.search-content .search input {
    outline: none;
    /*去除书写时边框*/

    width: 100%;
    border: 0;
    color: #e4e4e4;
    font-size: 0.5rem;
    padding: 0 0.1rem 0 0.1rem;
    margin-top: 0.24rem;
    height: 1.32rem;
    background-color: #ffffff;
    border-radius: 0.66rem;
}
.search-content .login {
    width: 1.5rem;
    height: 1.4rem;
    font-size: 0.5rem;
    text-align: center;
    color: #ffffff;
    line-height: 1.4rem;
    margin: 0.2rem;
}

less代码:(编译后会生成上面的css代码)

@baseFont: 50;
/*计算公式: 页面元素750像素下px值除以750像素下html字体大小(50)*/
.search-content {
  border: 0;
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: 88rem / @baseFont;
  background-color: transparent;

  .classify {
    width: 44rem / @baseFont;
    height: 70rem / @baseFont;
    background: url("../images/icon1.png") no-repeat 0 -5rem / @baseFont;
    background-size: 44rem / @baseFont, auto;
    margin: 11rem/@baseFont 25rem/@baseFont 7rem/@baseFont 24rem/@baseFont;
  }

  .search {
    flex: 1;

    input {
      outline: none; /*去除书写时边框*/
      width: 100%;
      border: 0;
      color: #e4e4e4;
      font-size: 25rem / @baseFont;
      padding: 0 5rem / @baseFont 0 5rem / @baseFont;
      margin-top: 12rem / @baseFont;
      height: 66rem / @baseFont;
      background-color: rgb(255, 255, 255);
      border-radius: 33rem / @baseFont;
    }
  }

  .login {
    width: 75rem / @baseFont;
    height: 70rem / @baseFont;
    font-size: 25rem / @baseFont;
    text-align: center;
    color: #ffffff;
    line-height: 70rem / @baseFont;
    margin: 10rem / @baseFont;
  }
}

3. banner模块

html代码

		<div class="banner">
			<img src="../../pictures/2015.01.03-100.jpeg" alt="">
		</div>

css代码

/*.banner*/
.banner {
    width: 15rem;
    height: 10.36rem;
}
.banner img {
    width: 100%;
    height: 100%;
}

less代码

/*.banner*/
.banner {
  width: 750rem / @baseFont;
  height: 518rem / @baseFont;

  img {
    width: 100%;
    height: 100%;
  }
}

4. 广告模块

html代码

		<div class="ad">
			<a href="#">
				<img src="upload/1.gif" alt="1">
			</a>
			<a href="">
				<img src="./upload/2.gif" alt="">
			</a>
			<a href="">
				<img src="upload/3.gif" alt="">
			</a>
		</div>

css代码

.ad {
  display: flex;

  a {
    flex: 1;

    img {
      width: 100%;
    }
  }
}

.ad {
    display: flex;
}
.ad a {
    flex: 1;
}
.ad a img {
    width: 100%;
}

5.导航栏模块

html代码

		<div class="nav">
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
			<a href="">
				<img src="images/bg1.png" alt="">
				<span>爆款手机</span>
			</a>
		</div>

.nav {
  display: flex;
  flex-wrap: wrap;
  width: 750rem / @baseFont;
  a {
    flex: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: transparent;
    width: 150rem / @baseFont;
    height: 140rem / @baseFont;
    img {
      width: 82rem / @baseFont;
      margin: 10rem / @baseFont auto 0;
    }
    span {
      margin-top: -3rem / @baseFont;
      color: #333333;
      font-size: 25rem / @baseFont;
    }
  }
}

css代码

.nav {
    display: flex;
    flex-wrap: wrap;
    width: 15rem;
}
.nav a {
    flex: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: transparent;
    width: 3rem;
    height: 2.8rem;
}
.nav a img {
    width: 1.64rem;
    margin: 0.2rem auto 0;
}
.nav a span {
    margin-top: -0.06rem;
    color: #333333;
    font-size: 0.5rem;
}