这个静态网站非常适合前端入门者,我们很多时候学习的都是理论知识,我们应该多动手,把理论转化为实践,前端知识多,多动手才能加深印象。
网站地址:在PC端,点击这里,查看完整静态网站。
下面我们先来看看静态网站的布局效果:
觉得这个静态网站还OK的话?自己也想动手尝试一下,可以到这里取相应的素材.
接着上源码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>品优购</title>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/index.css" />
</head>
<body>
<!-- 头部公共部分 -->
<header>
<div class="header">
<div class="typeArea">
<div class="hLeft">
<ul>
<li>品优购欢迎您!</li>
<li><a href="#">请登录</a></li>
<li><a href="#" class="font_color">免费注册</a></li>
</ul>
</div>
</div>
<div class="hRight">
<ul>
<li><a href="#">我的订单</a></li>
<li>|</li>
<li><a href="#" class="more">我的品优购</a></li>
<li>|</li>
<li><a href="#">品优购会员</a></li>
<li>|</li>
<li><a href="#">企业采购</a></li>
<li>|</li>
<li><a href="#" class="more">关注品优购</a></li>
<li>|</li>
<li><a href="#">客户服务</a></li>
<li>|</li>
<li><a href="#" class="more">网站导航</a></li>
</ul>
</div>
</div>
<div class="nav typeArea">
<a href="#"><img src="../uploads/pinyou.com.png" title="品优购" /></a>
<div class="nav_middle">
<div class="search">
<input type="search" value="语言开发" /><button>搜索</button>
<ul>
<li><a href="#" class="font_color">优惠购首发</a></li>
<li><a href="#">亿元优惠</a></li>
<li><a href="#">9.9元团购</a></li>
<li><a href="#">美满99减30</a></li>
<li><a href="#">办公用品</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">通信</a></li>
</ul>
</div>
</div>
<div class="shopCar">
我的购物车
<div class="num">8</div>
</div>
</div>
<div class="shop_list typeArea">
<div class="all">全部商品分类</div>
<ul>
<li>服装城</li>
<li>美妆馆</li>
<li>传智超市</li>
<li>全球购</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li>有趣</li>
</ul>
</div>
</header>
<!-- 头部公共部分 -->
<!-- 核心内容 -->
<!-- 主体导航栏start -->
<div class="body_title typeArea">
<div class="all_list">
<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>
<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>
</div>
<div class="divImg">
<a href="#"><img src="../uploads/divImg.png" /></a>
</div>
<div class="body_aside">
<div class="body_aside_title">
<ul>
<li>品优购快报 <a href="#">更多</a></li>
<li>
<a href="#"><strong>[特惠]</strong>备战开学季 全民半价购物数码</a>
</li>
<li>
<a href="#"><strong>[公告]</strong>备战开学季 全民半价购物数码</a>
</li>
<li>
<a href="#"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a>
</li>
<li>
<a href="#"><strong>[公告]</strong>上品优生鲜 享阳澄湖大闸蟹</a>
</li>
<li>
<a href="#"><strong>[特惠]</strong>每日享折扣品优品质游</a>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="body_aside_list">
<ul>
<li>
<a href="#"
><div></div>
<span>花费</span></a
>
</li>
<li>
<a href="#"
><div></div>
<span>机票</span></a
>
</li>
<li>
<a href="#"
><div></div>
<span>电影票</span></a
>
</li>
<li>
<a href="#"
><div></div>
<span