HTML+CSS实战---------一个电商类的小型项目：品优购（一）

模仿做的一个小型网站，仅限于前端页面的构建。

资源实在哔哩哔哩上面找的，若是侵权了请联系我，立刻删除。

今天只完成了快捷导航和头部中间的部分。明天继续跟进。

主要涉及：

1.网站的图标

2.字体图标；

3.结合浮动和定位进行布局；

4.logo的优化做法；

5.制作项目栏中间的条框——使用一个盒子做的

效果图：

代码部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 图标 --><link rel="shortcut icon" href="bitbug_favicon.ico"/> <!-- SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！常见的搜索引擎，比如百度，谷歌，雅虎，搜狗等等..SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。 网站优化的三大标签：title、description、keywords1.网页的标题 --><title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 2.网页的描述1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。2. 同样遵循简短原则，字符数含空格在内不要超过 120个汉字。 --><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><!-- 3.网页的关键字：搜索引擎搜索到定义的关键字就可以检索到我们的网页 --><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /><link rel="stylesheet" href="CSS/reset.css"><link rel="stylesheet" href="CSS/common.css">
</head>
<body><!-- 快捷导航栏 --><div class="shortcut"><div class="core"><!-- 左边栏 --><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 class="spacer"></li><li><a href="#">我的品优购</a><i></i></li><li class="spacer"></li><li><a href="#">品优购会员</a></li><li class="spacer"></li><li><a href="#">企业采购</a></li><li class="spacer"></li><li><a href="#">关注品优购</a><i></i></li><li class="spacer"></li><li><a href="#">客户服务</a><i></i></li><li class="spacer"></li><li><a href="#">网站导航</a><i></i></li></ul></div></div></div><!-- header部分 --><div class="header core"><!-- logo部分 --><div class="logo"><h1><a href="index.html" title="品优购">品优购</a></h1></div><!-- 搜索框部分 --><div class="search"><input type="text" value="语言开发" ><button class="btn">搜索</button></div><!-- 小项目部分 --><div class="items_list">  <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减30</a></li><li><a href="#">办公用品</a></li><li><a href="#"> 电脑</a></li><li><a href="#">通信</a></li></ul>   </div><!-- 购物车 --><div class="shopping_car"><i></i><a>我的购物车 <i></i></a></div></div>
</body>
</html>

CSS：

重置样式

/*清除元素默认的内外边距  */
* {margin: 0;padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {font-style: normal;
}
/*去掉列表前面的小点*/
li {list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {border: 0;  /*ie6*/vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {cursor: pointer;
}
/*取消链接的下划线*/
a {color: #666;text-decoration: none;
}a:hover {color: #e33333;
}
input{outline: none;
}
button,
input {font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
}body {background-color: #fff;font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;color: #666
}.hide,
.none {display: none;
}
/*清除浮动*/
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

共同样式（网页头部和底部样式）

/*公共样式*/
.fl {float: left;
}
.fr {float: right;
}
/*版心*/
.core {width: 1200px;margin: 0 auto;
}
.style_red{color: #c81623;
}
.text{background-color: pink;
}
/* 定义字体图标 */
@font-face {font-family: 'icomoon';/* 定义字体一定要写对路径！！！！ */src:  url('../fonts/icomoon.eot?7kkyc2');src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),url('../fonts/icomoon.woff?7kkyc2') format('woff'),url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}
/* 快捷导航部分  使用浮动做*/
.shortcut {height: 31px;background-color: #f1f1f1;line-height: 31px;
}
.shortcut li{float: left;
}
.shortcut .fl a{margin-left: 13px;
}
.shortcut li i{font-family: 'icomoon';font-size: 13px;line-height: 10px;
}
/* 使用一个容器做出边框的效果 */
.shortcut .fr .spacer{width: 1px;height: 12px;background-color: #000;margin: 9px 10px 0 16px;
}
/* header部分  用定位做*/
.header{position: relative;height: 106px;
}
/* logo */
.header .logo{position: absolute;top: 27px;left: 0;width: 175px;height: 56px;
}
.header .logo h1{text-indent: -9999px;
}
.logo a{display: block;width: 175px;height: 56px;background: url(../image/logo.png) no-repeat;
}
/* 搜索栏部分 */
.search{position: absolute;top: 27px;left: 348px;float: left;
}
.search input{float: left;width: 450px;height: 33px;border: 2px solid #b1191a;padding-left: 5px;
}
.search .btn{float: left;width: 80px;height: 37px;background-color: #b1191a;border: none;color: #fff;font-size: 16px;
}
/* 小项目 */
.items_list{position: absolute;top: 70px;left: 346px;
}
.items_list li{float: left;
}
.items_list li a{display: block;margin: 0 12px;
}
/* 购物车 */
.shopping_car{position: absolute;top: 27px;right: 63px;width: 140px;height: 36px;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}
.shopping_car > i{font-family: 'icomoon';font-size: 15px;color: red;line-height: 36px;margin: 0 5px 0 17px;
}
.shopping_car > a > i{font-family: 'icomoon';font-size: 15px;line-height: 30px;
}

HTML+CSS实战---------一个电商类的小型项目：品优购（一）相关推荐

HTML+CSS实战---------一个电商类的小型项目：品优购（三）
昨天完成到了main主体区域板块. 公共样式写好了,就该新建一个CSS文件单独为首页index设置样式. 进度有点慢,因为昨天出现了问题,debug都用了半个小时,最后找到出问题的地方. 就是有一个盒 ...
HTML5期末大作业：电商购物网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计学生电商网页作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
HTML5期末大作业:化妆品购物商城网站设计--电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品常见网页设计作业题材有个人. 美食 ...
html大作业网页代码化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
HTML5期末大作业:化妆品购物商城网站设计--电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品常见网页设计作业题材文章目录 HT ...
spark项目实战：电商分析平台之项目概述
spark项目实战:电商分析平台之项目概述目录项目概述程序架构分析需求解析初始代码和完成代码存放在github上面 1. 项目概述在访问电商网站时,我们的一些访问行为会产生相应的埋点日志( ...
电商类Web原型制作分享——聚美优品
这是一家化妆品限时特卖商城.作为美妆电商类网站的佼佼者,网站以用户体验为核心,画面主色调符合女性消费者审美.排版整齐,布局合理.网站用弹出面板实现点击弹出内容,鼠标悬停文字按钮颜色改变等交互效果. 本 ...
黑马程序员前端实战项目----品优购（上）
目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化品优购项目规划 ...
大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
spark项目实战：电商分析平台之各个范围Session步长、访问时长占比统计（需求一）
spark项目实战:电商分析平台之各个范围Session步长.访问时长占比统计(需求一) 项目基本信息,架构,需要一览各个范围Session步长.访问时长占比统计概述各个范围Session步长.访 ...

HTML+CSS实战---------一个电商类的小型项目：品优购（一）

效果图：

代码部分：

HTML+CSS实战---------一个电商类的小型项目：品优购（一）相关推荐

最新文章

热门文章