<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品优购title>
<link rel="shortcut icon" href=" image/favicon.ico" />
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
head>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您! li>
<li><a href="#">请登录a> <a href="#" class="style_red">免费注册a>li>
ul>
div>
<div class="fr">
<ul>
<li><a href="#">我的订单a>li>
<li><a href="#">a>li>
<li class="arrow"><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 class="arrow"><a href="#">关注品优购a> li>
<li><a href="#">a>li>
<li class="arrow"><a href="#">客户服务a> li>
<li><a href="#">a>li>
<li class="arrow"><a href="#">网站导航a> li>
ul>
div>
div>
div>
<header class="header w">
<div class="logo">
<h1><a href="index.html" title="品优购商城">品优购商城a>h1>
div>
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索button>
div>
<div class="hotword">
<ul>
<li><a href="#" class="style_red">优惠购首发a>li>
<li><a href="#">亿元优惠a>li>
<li><a href="#">9.9元团购a>li>
<li><a href="#">美满99减30a>li>
<li><a href="#">办公用品a>li>
<li><a href="#">电脑a>li>
<li><a href="#">通信a>li>
ul>
div>
<div class="car">
我的购物车
<i class="count">8i>
div>
header>
<nav class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类div>
<div class="dd">
<ul>
<li><a href="#">家用电器a>li>
<li><a href="#">手机a>、 <a href="#">数码a>、 <a href="#">通信a>li>
<li><a href="#">电脑a>、 <a href="#">办公a>li>
<li><a href="#">家居a>、 <a href="#">家具a>、 <a href="#">家装a>、 <a href="#">厨具a>li>
<li><a href="#">男装a>、 <a href="#">女装a>、 <a href="#">童装a>、 <a href="#">内衣a>li>
<li><a href="#">个户化妆a>、 <a href="#">清洁用品a>、 <a href="#">宠物a>li>
<li><a href="#">鞋靴a>、 <a href="#">箱包a>、 <a href="#">宝珠a>、 <a href="#">奢侈品a>li>
<li><a href="#">运动户外a>、 <a href="#">钟表a>li>
<li><a href="#">汽车a>、 <a href="#">汽车用品a>li>
<li><a href="#">母婴a>、 <a href="#">玩具乐器a>li>
<li><a href="#">食品a>、 <a href="#">酒类a>、 <a href="#">生鲜a>、 <a href="#">特产a>li>
<li><a href="#">医药保健a>li>
<li><a href="#">图书a>、 <a href="#">音像a>、 <a href="#">电子书a>li>
<li><a href="#">彩票a>、 <a href="#">旅行a>、 <a href="#">充值a>、 <a href="#">票务a>li>
<li><a href="#">理财a>、 <a href="#">众筹a>、 <a href="#">白条a>、 <a href="#">保险a>li>
ul>
div>
div>
<div class="navitem">
<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>
div>
div>
nav>
<footer class="footer">
<div class="w">
123
div>
footer>
body>
html>
```css
/* 声明字体图标 一定要注意路径*/
@font-face {
/*因为在css中要翻出去找到font*/
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?b7z5a6');
src: url('../fonts/icomoon.eot?b7z5a6#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?b7z5a6') format('truetype'),
url('../fonts/icomoon.woff?b7z5a6') format('woff'),
url('../fonts/icomoon.svg?b7z5a6#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
/* background-color: red; */
}
.fl {
float: left;
}
.fr {
float: right;
}
/* 公共选择器 链接 "a" 的颜色是这个色 */
.style_red {
color: #c81623;
}
/* 快捷导航模块 */
.shortcut {
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.shortcut ul li {
float: left;
}
/* 结构伪类选择器 选出 "li" 元素中的偶数 */
.shortcut .fr ul li:nth-child(even) {
height: 12px;
width: 1px;
margin: 10px 15px 0;
background-color: #666;
}
.arrow::after {
content: "\ea52";
font-family: 'icomoon';
margin-left: 6px;
}
/* 头部模块 */
.header {
position: relative;
height: 105px;
/* background-color: skyblue; */
}
/* logo模块 */
.logo {
/* margin: 25px 0 20px 0; */
position: absolute;
top: 25px;
bottom: 20px;
width: 171px;
height: 61px;
/* float: left; */
/* background-color: pink; */
/* background: url(../image/logo.png) no-repeat; */
}
/* 链接的背景 */
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../image/logo.png) no-repeat;
text-indent: -9999px;
}
/* logo模块 */
/* 搜索模块 */
.search {
position: absolute;
top: 25px;
left: 348px;
width: 538px;
height: 36px;
border: 2px solid red;
}
.search input {
float: left;
height: 32px;
width: 454px;
padding-left: 10px;
}
.search button {
float: right;
height: 32px;
width: 80px;
background-color: red;
font-size: 16px;
color: #fff;
}
/* 搜索模块 */
/* 热词模块 */
.hotword {
position: absolute;
top: 70px;
left: 348px;
}
.hotword li {
float: left;
margin: 0 10px;
}
/* 热词模块 */
/* 购物车模块 */
.car {
position: absolute;
top: 27px;
right: 66px;
width: 140px;
height: 35px;
/* background-color: pink; */
border: 1px solid #dfdfdf;
line-height: 35px;
text-align: center;
background-color: #f7f7f7;
}
.car::before {
content: "\e93a";
font-family: 'icomoon';
margin-right: 5px;
color: #c81623;
}
.car::after {
content: "\ea50";
font-family: 'icomoon';
margin-left: 20px;
}
.count {
position: absolute;
top: -6px;
left: 104px;
height: 15px;
line-height: 15px;
padding: 0 5px;
background-color: #e60012;
color: #fff;
border-radius: 7px 7px 7px 0;
}
/* 购物车模块 */
/* 头部模块 */
/* 导航模块 */
/* 第一部分 */
/* 两个盒子 dropdown 和 navitem 都 left 浮动
而且 dropdown 里面的两个盒子大小之和等于 dropdown
dt 和 dd 一定要写高度 */
.nav {
height: 46px;
border-bottom: 2px solid #b1191a;
}
.dropdown{ /*盒子要浮动*/
float: left;
height: 513px;
/* height: 46px; */
}
.dropdown .dt {
width: 210px;
height: 45px;
text-align: center;
line-height: 45px;
font-size: 16px;
color: #fff;
background-color: #b1191a;
}
.dropdown .dd {
/* display: none; */
width: 210px;
height: 468px;
background-color: #c81623;
margin-top: 1px;
}
.dropdown .dd ul li {
position: relative;
height: 31.2px;
margin-left: 2px;
padding-left: 12px;
/* 不能给 a 不然每一个 a 都会有做内边距 */
line-height: 31.2px;
}
.dropdown .dd ul li:hover {
background-color: #fff;
}
.dropdown .dd ul li a {
font-size: 14px;
color: #fff;
}
.dropdown .dd ul li:hover a {
/* 经过 li 显示里面的 a (里面全部的 a ) */
color: #e60012;
}
.dropdown .dd ul li::after {
position: absolute;
/* 子绝父相 小li 也要有定位 */
right: 5px;
top: 1px;
content: "\ea50";
font-family: 'icomoon';
color: #fff;
}
/* 第一部分 */
/* 第二部分 */
.navitem{
float: left;
margin-left: 25px;
}
.navitem li{
float: left;
height: 45px;
}
.navitem li a{
font-size: 16px;
padding: 0 25px;
line-height: 45px;
}
/* 第二部分 */
/* 导航模块 */
/* footer部分 */
.footer{
height: 420px;
margin-top: 38px;
background-color: #f5f5f5;
}
.footer .footer1{
height: 100px;
background-color: pink;
}
/* footer部分 */
```
代码没贴好，重新发一下，错误地方太多，懒得改
你代码 用 下面的回复重新发一下 。