以淘宝页面为例：

一、划分结构

经验:自上而下，从左往右

考虑：内容、颜色块、间距、边框

大结构：头部信息

-------扩展-----

id和class的选择，根据个人经验和选择使用，独立的层可以用id，通用层可以用class

需要与js交互时，可以用id。唯一的内容也可以用id。

----------------

二、样式重置及样式模块化

reset.css用来将不需要的样式重置,标签身上有的样式才重置

img的border在IE浏览器中会显示，谷歌和火狐中没有

通过模块化添加reset.css:

@规则：（css语法的一种，使css功能强大）

@charset 设置样式表的编码

@import 导入其它样式文件 @import 'reset.css'

@meida 媒体查询（在移动端开发中做适配）

@font-face 自定义字体（用户下载字体）

自定义图标的本质是文字，在iconfont可选

语法：font-family:'iconfont'

src: url("../font/iconfont.ttf") format("truetype");

woff 网页字体，尺寸小加载快，优先使用

eot 只针对IE浏览器

ttf 字体的文件大，IE9以上支持，其他浏览器都支持

svg 图形技术，可以修改大小颜色且不会失真，IE9以上支持，其他浏览器都支持

format 可选参数让浏览器提前知道字体格式

-----------

-webkit-font-smoothing:antialiased; 针对webkit内核定义

-moz-osx-font-smoothing:grayscale; 针对火狐定义

让字体进行抗锯齿的渲染，让字体看起来更清晰舒服

-----------

头部信息reset.css样式重置文件：

body,p,h1,h2,h3,h4{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
img{border: none;vertical-align: middle;/* 设置图片和文字在垂直方向对齐 */
}
a{text-decoration: none;/* 下划线去掉 */color: #3c3c3c;/* 淘宝的灰色 */
}
i{font-style: normal;/* i标签:仅仅为了让字体显示斜体em标签：不仅可以使字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的 */
}
input{margin: 0;padding: 0;/* 不知标签本身带的属性，可以从控制台的computed中查找 */
}
button{outline: none;/* outline表单会有蓝色框，是获取焦点的一种表现形式 */
}
body{font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;/* font是复合属性，字体大小/行高1.5  body  *//* 行高的值：除了px，其他单位都是拿自己的值与相应的font-size的大小进行相乘。大部分用数字，使用数字，子元素会继承line-height这个值，其他方式继承的是计算后的值line-height:normal;  字体不同，默认不同，微软雅黑默认为1.32，宋体大概在1.41line-height:1.5；line-height:200%；line-height:50px；只有px是固定值，绝对单位line-height:5em；例如：p标签的默认字体大小为16px，如果line-height:1.5;  那么就是16×1.5=24px'\5b8b\4f53'代表宋体，font-family:'宋体';font-family:'\5b8b\4f53';font-family:'SimSun'; 微软雅黑：font-family:'微软雅黑';font-family:'Miscrosoft YaHe';unicode编码，是万国码，（任何一个语言中的任何一个字符都设定了一个唯一的二进制编码，不会重复，跨平台跨语言）百度插件，FeHelper，可对unicode编码加密解密 */color:#3c3c3c ;background-color: #f4f4f4;
}
.clearfix:after{content: display:block;clear:both;
}
.fl{float: left;
}
.fr{float:right;
}/* 预定义 */
.leayer{width: 1190px;margin:0 auto;
}
.c4{color: #f40;
}
.c5{color: #f50;
}
.mr7{margin-right: 7px;
}
.mt10{margin-top: 10px;
}
.mr10{margin-right: 10px;
}
.mr5{margin-right: 5px;
}

头部信息index.css：

@import "reset.css";
@font-face {font-family: "iconfont";src: url("../font/iconfont.ttf") format("truetype");
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
/* 头部信息 */
#headmessage li {float: left;line-height: 35px;/* 如果有psd图中，可以量出 */padding: 0 6px;font-size: 0;
}
#headmessage a {color: #6c6c6c;font-size: 12px;
}
#headmessage a:hover {color: #f40;
}
#headmessage a.login {color: #f22e00;
}
#headmessage span {font-size: 12px;
}
#headmessage span.arrow {margin-left: 7px;
}
#headmessage li strong {font-size: 12px;color: #f22e00;
}
#headmessage li span.store {color: #9c9c9c;
}
#headmessage li.line {font-size: 12px;color: #ddd;padding: 0 5px;
}

头部信息html：

<!DOCTYPE html>
<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="stylesheet" href="../css/index.css" /><link rel="icon" href="favicon.ico" /><base target="_blank" /><!-- base用于定义基础url  href和target只能设置一个 设置新页面base targe="_blank"--></head><body><!-- url图标 .ico格式  还是一张图片  可以将jpg等格式转成ico格式图标位置：ico一定要放在网站的根目录中，在link标签中的rel="icon" href="favicon.ico"--><!-- 头部信息 --><div id="headmessage" class="clearfix"><ul class="fl"><li><span>中国大陆</span><span class="iconfont arrow"></span></li><li class="mr7"><a href="#" class="login mr7">亲，请登录</a><a href="#">免费注册</a></li><li><a href="#">手机逛淘宝</a></li></ul><ul class="fr"><li><a href="#">我的淘宝</a><span class="iconfont arrow"></span></li><li><span class="iconfont mr5 c4"></span><a href="#">购物车</a><strong>0</strong><span class="iconfont arrow"></span></li><li><a href="#"><span class="iconfont mr5 store"> </span>收藏夹</a><span class="iconfont arrow"></span></li><li><a href="#">商品分类</a></li><li class="line">|</li><li><a href="#">千牛卖家中心</a><span class="iconfont arrow"></span></li><li><a href="#">联系客服</a><span class="iconfont arrow"></span></li><li><span class="iconfont c4 mr5"></span><a href="#">网站导航</a><span class="iconfont arrow"></span></li></ul></div><!--头部广告  --><div id="headAd"></div><!-- 头部搜索 --><div id="headSearch"></div><!-- 首屏内容 --><div id="firstScreen"></div></body>
</html>

Day 9 淘宝静态页面练习 reset.css样式重置头部信息结构及样式自定义图标的样式相关推荐

淘宝静态页面html+css部分
淘宝静态页面html+css部分未来前端程序员为你提供一小点点的帮助,希望能够帮助你. 这是一个简简单单的淘宝静态页面,没有用到JavaScript部分.相信大家都知道,淘宝静态网页也不是特别的简单 ...
超详细实现淘宝静态页面(附全部代码)
文章目录一:基本结构与样式二:头部信息结构 1.淘宝小图标 2.目前效果 3.代码三:头部信息样式与自定义图标 1.设置收藏夹图标注意: 四:头部广告结构与样式 1.h标签的应用五:全部代码 ...
HTML+CSS实现淘宝静态页面
刚入门HTML+CSS,学习了一段时间后,为了练手,便写了这样一个静态的淘宝页面.就在刚才,终于完工.不得不说,内心有点小激动- 代码有点多,贴出来不太方便.如果大家有需要的话,直接去演示页面查看源代 ...
淘宝-静态页面编写(2)--给淘宝写个头吧
标题首先我们看到html页面的头部: 技术点: 我们需要在标题内写入相关文字 <title>淘宝网 - 淘!我喜欢</title> 并且在左侧插入图标 <!--图片楼下 ...
淘宝-静态页面编写（4）--头部搜索/导航栏
头部搜索分块首先我们观察这部分,可清晰的将它分成三个模块,左边的淘宝网,中间的搜索栏以及右边的二维码.这里我们需想一下怎么把中间的搜索栏放入中间位置,我采用的是先将左右两侧靠边放置并设置浮动,那么 ...
html,css 淘宝静态页面
源码素材下载地址点击我下载
html淘宝首页静态页面（html+css）带源码
文章目录源码前端基础阶段一.实现效果二.代码 1.淘宝2.html 2.6.css 三.图片四.涉及知识点 1.头部title添加图标icon 总结: 源码链接:https://pan.b ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
【HTML】淘宝注册页面
<html> <title>淘宝注册</title> <body> <h1 align="center">淘宝注册页面& ...
通过仿淘宝静态网页我的总结
学习了html和css,自己试着动手做了淘宝静态网页,(因为我觉得动手很重要)在动手完成的时候,脑子也同时会在思考. 问1.什么是网页布局? 网页布局是网页制作的基础: div+css布局网页问2. ...

Day 9 淘宝静态页面练习 reset.css样式重置头部信息结构及样式自定义图标的样式

以淘宝页面为例：

头部信息reset.css样式重置文件：

头部信息index.css：

头部信息html：

Day 9 淘宝静态页面练习 reset.css样式重置头部信息结构及样式自定义图标的样式相关推荐

最新文章

热门文章

Day 9 淘宝静态页面练习 reset.css样式重置 头部信息结构及样式 自定义图标的样式

以淘宝页面为例：

头部信息reset.css样式重置文件：

头部信息index.css：

头部信息html：

Day 9 淘宝静态页面练习 reset.css样式重置 头部信息结构及样式 自定义图标的样式相关推荐

最新文章

热门文章

Day 9 淘宝静态页面练习 reset.css样式重置头部信息结构及样式自定义图标的样式

Day 9 淘宝静态页面练习 reset.css样式重置头部信息结构及样式自定义图标的样式相关推荐