1. 头部header

1.1 logo图片定位

css代码写在common.css里面
调用了.w类：版心

.w {width : 1200px;margin: 0 auto;
}
.header {position: relative;height: 90px;background-color: #c81623;
}.header h1 {position: absolute;top: 10px;left: 0;width: 250px;height: 70px;background-color: aqua;
}.header h1 a {display: block;width: 250px;height: 70px;background: url(../images/logo.jpg) no-repeat;background-size: 250px 70px;font-size: 0;
}

    <header class="header w"><h1><a href="#" title="昕之优选官网">昕之优选购物网站</a></h1></header>

给a标签一个title，鼠标经过图片时有文字提示
最后要把给的背景颜色都删除

1.2 search搜索框

 <!-- 搜索框 --><div class="search"><input type="search" name="" id="" placeholder="请输入" /><button>搜索</button></div>

.search {position: absolute;top: 16px;left: 400px;width: 490px;height: 36px;border: 2px solid #ed3947;border-radius: 5px;
}.search input {position: absolute;top: 0;left: 0;width: 400px;height: 32px;padding-left: 12px;
}.search button {position: absolute;top: 0;right: 0;width: 90px;height: 34px;background-color: #ed3947;font-size: 16px;color: #fff;
}

1.3 热搜词

热搜词的宽和高与搜索框一样，定位时，top值大一点

.hotwords {position: absolute;top: 57px;left: 400px;width: 490px;height: 36px;
}.hotwords a {margin: 0 10px;
}

 <!-- 热搜词 --><div class="hotwords"><a href="" class="style_red">海外直购</a><a href="">优选自有品牌</a><a href="">品质奶粉</a><a href="">人气面膜</a><a href="">华为手机</a><a href="">电器专卖</a></div>

1.3 购物车

<!-- 购物车 --><div class="shopcart">我的购物车</div>

.shopcart {position: absolute;top: 16px;right: 74px;width: 144px;height: 36px;line-height: 34px;text-align: center;font-size: 15px;color: #000;border: 2px solid #ed3947;border-radius: 5px;background-color: #f1f1f1;
}.shopcart::before {content: '';font-family: 'icomoon';
}.shopcart::after {content: '';font-family: 'icomoon';
}

1.4 提示信息

position：absolute；定位top为负值
border-radio：左上右上右下左下；圆角边框，左下为0
padding：上下左右；内边距上下为0左右有距离

购物网站制作——头部header（index.html)相关推荐

购物网站制作——顶部导航栏（index.html)
1. 快捷导航shortcut制作 1.1 如何分块分析如下 1.2 如何添加"| "分隔符 1.3 如何添加小箭头字体图标下载地址: IcoMoon App - Icon F ...
html在线商城购物网站制作——基于HTML+CSS+JavaScript(oppo手机商城 6页)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商 ...
Django—购物网站制作
Django Python开发web在国内可能没那么盛行,但在国外却发展迅猛.国内有些知名网站,像知乎.网易.豆瓣都是用Python开发的:国外有Quora(社交问答网站).Google.Pinter ...
HTML+CSS+JavaScript仿京东购物网站制作 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
HTML+CSS+JS购物网站制作【学生HTML静态网页作业作品】
基于html的购物网站【华为手机购物网站制作】学生网页设计作业源码
html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼品电商网站
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作
HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作文章目录 HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) ...
演练网站的头部导航栏的制作 1014 HTML
演练网站的头部导航栏的制作 1014 HTML 视频演练菜单按钮的制作 HTML5 2216 - 西瓜视频 https://www.ixigua.com/6883480625635033613/ ...

购物网站制作——头部header（index.html)

1. 头部header

1.1 logo图片定位

1.2 search搜索框

1.3 热搜词

1.3 购物车

1.4 提示信息

购物网站制作——头部header（index.html)相关推荐

最新文章

热门文章