制作电商网页

创建我的第一篇文章

效果图

HTML代码

登录 注册

• 选项

  				</a>
  				<aside>
  					<span></span>
  					<ol class="zuo">
  						<li class="con">护肤</li>
  						<li>>洁面</li>
  						<li>>爽肤水</li>
  						<li>>精华</li>
  						<li>>乳液</li>
  						<li class="con">彩妆</li>
  						<li>>BB霜</li>
  						<li>>卸妆</li>
  						<li>>粉底液</li>
  						<li class="con">香氛</li>
  						<li>>女士香水</li>
  						<li>>男士香水</li>
  						<li>>中性香水</li>
  					</ol>
  					<ol class="you">
  						<li class="con">男士专区</li>
  						<li>>洁面</li>
  						<li>>爽肤水</li>
  						<li>>精华</li>
  						<li>>面霜</li>
  						<li class="con">热门搜索</li>
  						<li>>洗面奶</li>
  						<li>>去黑头</li>
  						<li>>隔离</li>
  						<li>>面膜</li>
  					</ol>
  					<img src="任务1素材/images/tu1.jpg" alt="">
  				</aside>
  			</li>
  			<li class="center">
  				<form action="">
  					<input type="text" value="" placeholder="请输入商品名称.品牌或编号">
  				</form>
  			</li>
  			<li class="right">
  				<a href="#">&#xe65e;</a>
  				<a href="#">&#xe608;</a>
  				<a href="#">&#xf012a;</a>
  				<a href="#">&#xe68e;</a> 
  			</li>
  		</ul>
  	</nav>
  	<div class="pic">
  		<p>Select the right resoution for your PC and dive in!（请为您的电脑选择正确的分辨率）</p>
  		<ul>
  			<li class="one"><span>&#xe662;</span>STANDARD标准</li>
  			<li class="two"><span>&#xe662;</span>HD高清</li>
  		</ul>
  	</div>
  </div>
  	<div class="new">
  		<header>
  			<img src="任务1素材/images/new.jpg" width="315px" height="89">
  		</header>
  		<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
  		<ul>
  			<li>
  				<hgroup>
  					<h2>fresh skin</h2>
  					<h2>化妆水/爽肤水单品</h2>
  					<h2></h2>
  					<h2></h2>
  				</hgroup>
  			</li>
  			<li>
  				<hgroup>
  					<h2>蜂蜜原液天然滋养</h2>
  					<h2>美白护肤套装</h2>
  					<h2></h2>
  					<h2></h2>
  				</hgroup>
  			</li>
  			<li>
  				<hgroup>
  					<h2>纯情诱惑</h2>
  					<h2>告别暗淡唇</h2>
  					<h2></h2>
  					<h2></h2>
  				</hgroup>
  			</li>
  		</ul>
  	</div>
  	<div class="try">
  		<header>
  			<img src="任务1素材/images/shizhuang.jpg" width="487px" height="83">
  		</header>
  		<p>美妆容貌 增添自信 突出个性</p>
  		<ul>
  			<li>
  				<img class="zheng" src="任务1素材/images/try1.jpg" width="291" height="251">
  				<img class="fan" src="任务1素材/images/try4.jpg" width="291" height="251">
  			</li>
  			<li>
  				<img class="zh