【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/91492819

效果图

在这里插入图片描述

html源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云道</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!-- 头部模块 -->
	<div class="header">
	  <div class="box">
		<img src="img/logo.png" alt="">
		<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>
		</ul>
	  </div>
	</div>

	<!-- 轮播图模块 -->
	<div class="banner">
	  <!-- 图片容器 -->
	  <div class="img">
	    <img src="img/banner1.png" alt="">
	    <img src="img/banner2.png" alt="">
	    <img src="img/banner3.png" alt="">
	    <img src="img/banner0.png" alt="">
	  </div>
	  <!-- 点容器 -->
	  <ul>
	    <li class="now"></li>
	    <li></li>
	    <li></li>
	  </ul>
	</div>
	
	<!-- 内容模块 -->
	<div class="subject">
	  <div class="box">
		<div class="content">
		  <!-- 我们的服务 -->
		  <div class="serve">
			<div class="serve1">
			  <div class="server">
			    <h3>我们的服务</h3>
				<div class="txt">PROGRAM HIGHLIGHTS</div>
			  </div>
			  <p>
				shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
			  </p>
			</div>
		    <div class="serve2">
		      <div class="icon1">