经过盒子模型,知道大部分html标签是一个盒子;php
经过css浮动,定位,可让每一个盒子排列成网页;css
一个完整的网页是由标准流、浮动、定位一块儿完成布局的,每一个都有本身专门的用法;html
多个块级元素纵向排列找标准流;前端
多个块级元素横向排列找浮动;chrome
为了约束浮动元素的位置,网页布局通常采用:json
一、先用标准流的父元素上下排列,以后内部子元素采用浮动左右排列;浏览器
二、一个盒子浮动了,他的兄弟元素也浮动;服务器
三、浮动的盒子只会影响浮动盒子后面的标准流,不影响前面的;前端工程师
可让盒子上下排列 或者 左右排列,垂直的块级盒子显示就用标准流布局;svg
可让多个块级元素一行显示 或者 左右对齐盒子, 多个块级盒子水平显示就用浮动布局;
定位最大的特色是有层叠的概念,就是可让多个盒子 先后 叠压来显示。 可是每一个盒子须要测量数值。若是元素自由在某个盒子内移动就用定位布局;
经过z-index属性能够用来设置元素的层级,表示盒子摆放的先后次序;
层级越高,越优先显示;
只有元素开启了定位,z-index属性才可使用;
若是定位元素层级同样,则结构上 下面元素会盖住上面;
父元素的层级再高,也不会盖住子元素;
为了提升网页制做的效率,布局时一般有如下的总体思路:
必须肯定页面的版心(可视区),测量可知;
分析页面中的行模块,以及每一个行模块中的列模块,页面布局的第一准则;
一行中的列模块常常浮动布局,先肯定每一个列的大小,以后肯定列的位置,页面布局第二准则;
制做HTML结构。咱们仍是遵循,先有结构,后有样式的原则。结构永远最重要,因此,先理清布局结构,在写代码尤其重要,须要积累;
而后开始运用盒子模型的原理,经过DIV+CSS布局来控制网页的各个模块。
注意:去掉列表默认的样式
无序和有序列表前面默认的列表样式,在不一样浏览器显示效果不同,并且也比较难看,因此,咱们通常上来就直接去掉这些列表样式就好了。 代码以下
li { list-style: none; }
巧妙利用一个技术更快更好的布局:
一、margin负值的运用
二、文字围绕浮动元素
三、行内块的巧妙运用
四、CSS三角强化
1.让每一个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标通过某个盒子的时候,提升当前盒子的层级便可(若是没有有定位,则加相对定位(保留位置),若是有定位,则加z-index)
<style> ul li { float: left; list-style: none; width: 150px; height: 200px; border: 1px solid red; margin-left: -1px; } ul li:hover { position: relative; border: 1px solid blue; /* 若是li有定位,则利用z-index提升层级 */ z-index: 1; } </style>
案例:盒子居中
<style> * { margin: 0; padding: 0; } .box { width: 300px; height: 70px; background-color: pink; margin: 0 auto; padding: 5px; } .pic { float: left; width: 120px; height: 60px; margin-right: 5px; } .pic img { width: 100% } </style> <body> <div class="box"> <div class="pic"> <img src="" alt=""> </div> </div> </style>
一、布局定位属性:display /position /float /clear /visibility /overflow
二、自身属性:width /height /margin /padding /border /background
三、文本属性:color /font /text-decoration /text-align /vertical-align /white-space /break-word
四、其余属性(CSS3):content cursor /border-radius /box-shawdow /text-shadow /
background:linear-gradient... .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial,"Helvetica Neue",Helvetica,san-serif; color: #333; background: rgba(0,0,0,.5); border-radius: 10px; }
一、由来:
一个网页中每每会应用不少小的背景图像做为修饰,当页面中的图像过多时,服务器就会频繁地接收和发送请求图片,形成服务器请求压力过大,这将大大的下降页面的加载速度;
二、目的:为了有效的减小服务器接收和发送请求的次数,提升页面的加载速度,提升了访问效率和用户体验,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧图)
三、核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器就只须要请求一次就能够了;
四、使用精灵图核心:
(1)精灵技术主要针对于背景图片,就是把多个小背景图片整合到一张大图片中,这个大图片也称为 sprites 精灵图 或者 雪碧图 ;
(2)移动背景图片位置, 主要借助于背景位置来实现---background-position ;移动的距离就是这个目标图片的 x 和 y 坐标,注意网页中的坐标有所不一样 ;
(3)通常状况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴往下是正值,同理。)
五、优势:
将多个图片整合为一个,浏览器只发送一次请求,就能够同时加载多个图片;提升了访问效率和用户体验;
减少了图片的总大小,提升请求的速度,增长了用户体验;
六、缺点:
图片文件仍是比较大的。
图片自己放大和缩小会失真。
一旦图片制做完毕想要更换很是复杂。
此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。
一、特色:字体图标能够为前端工程师提供一种方便高效的图标使用方式,展现的是图标,本质属于字体。
轻量级:一个字体图标要比一系列的图像都小,一但字体加载了,图标就会立刻渲染出来,减小服务器请求;
灵活性:本质是文字,能够随意改变颜色,产生阴影,透明效果,旋转灯;
兼容性:几乎支持全部的浏览器;
注意:字体图标不能代替精灵技术,只是对工做中图标部分技术的提高和优化;
二、使用场景: 主要用于显示网页中通用、经常使用的一些小图标。
结构和样式比较简单的小图标,就用字体图标;
结构和样式复杂的小图片,就用精灵图;
三、字体图标的下载:
(1) icomoon 字库 http://icomoon.io 国外服务器,打开网速较慢。
(2)阿里 iconfont 字库 http://www.iconfont.cn/ 包含了淘宝图标库和阿里妈妈图标库。可使用 AI 制做图标上传生成。 重点是,免费
(3)awesome图标
四、字体图标的引入:
(1)icomoon文件解压后,将fonts文件夹复制到页面根目录下;
(2)在 CSS 样式中全局声明字体: 把这些字体文件经过css(style.css)引入到咱们页面中。 (注意字体文件路径的问题 )
@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; }
(3)html标签内添加小图标
span { content:''; font-family:"icomoon";/* 这里面的字体需和 @font-face 里面的一致 */ }
原来的文件夹不要删,能够追加字体图标,在select.json里,直接生成最新的字体图标;
京东初始化,从 * {margin:0;padding:0}开始;
不一样浏览器对有些标签的默认值是不一样的,为了消除不一样浏览器对HTML文本呈现的差别,照顾浏览器的兼容;
简单理解: CSS初始化是指重设浏览器的样式。 (也称为CSS reset)
好比:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
假如须要设计一款网页,工做流程以下:
用户提需求——美工PS设置原型图和效果图——前端 利用代码连接 作成静态网页(代码连接)——后台工程师改成动态网页(JSP动态服务器代码);
流程
品优购项目总体介绍 (制做首页、列表页、注册页三个页面) 电商类网站
品优购项目学习目的 (里面包含技术较多,能极大锻炼咱们布局技术)
开发工具以及技术栈 (切图用ps, 代码用Vscode,测试用chrome, 大量使用HTML5+CSS3)
一、 须要建立以下文件夹:
名称 | 说明 |
---|---|
项目文件夹 | shoping |
样式类图片文件夹,不常常更换 | images |
样式文件夹 | css |
产品类图片文件夹,常常更换 | upload |
字体类文件夹 | fonts |
脚本文件夹 | js |
名称 | 说明 |
---|---|
首页 | index.html |
css初始化样式文件 | base.css |
css公共样式文件 | common.css |
有些网站初始化的不太提倡 * { margin: 0; padding: 0; }
好比新浪:
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
所谓的模块化:将一个项目按照功能划分, 一个功能一个模块,互不影响 且重复使用;
代码也如此,有些样式和结构在不少页面都会出现,好比页面头部和底部,大部分页面都有。此时,能够把这些结构和样式单独做为一个模块,而后重复使用;
这里最典型的应用就是 common.css 公共样式。写好一个样式,其他的页面用到这些相同的样式;
common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
favicon.ico 通常用于做为缩略的网站标志,它显示在浏览器的地址栏或者标签上。 目前主要的浏览器都支持 favicon.ico 图标。
制做favicon图标
favicon图标放到网站根目录下
HTML页面引入favicon图标
(1)把品优购图标切成 png 图片。
(2)把 png 图片转换为 ico 图标,这须要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/
(1)在html 页面里面的 <head> </head>
元素之间引入代码。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提升网站在有关搜索 引擎内天然排名的方式。
SEO 的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提高网站的排名,提 高网站的知名度。 页面必须有三个标签用来符合 SEO 优化。
有SEO专门人员,标签由咱们写;
title 具备不可替代性,是咱们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判 断点。
建议:网站名(产品名)- 网站的介绍 (尽可能不要超过30个汉字)
例如:
l 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
l 小米商城 - 小米5s、红米Note 四、小米MIX、小米笔记本官方网站
简要说明咱们网站主要是作什么的。
咱们提倡,description 做为网站的整体业务和主题归纳,多采用“咱们是…”、“咱们提供…”、“×××网 做为…”、“电话:010…”之类语句。
例如:
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通信、电脑、 家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物 体验!" />
keywords 是页面关键词,是搜索引擎的关注点之一。
keywords 最好限制为 6~8 个关键词,关键词之间用英文逗号隔开,采用 关键词1,关键词2 的形式。
例如:
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配 件,手表,存储卡,京东" />
对于咱们前端人员来讲,咱们只须要准备好这三个标签,具体里面的内容,有专门的 SEO 人员准备
网站的首页通常都是使用 index 命名,好比 index.html 或者 index.php 。
咱们开始制做首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面。
四、LOGO SEO 优化
一、 logo 里面首先放一个 h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
二、 h1 里面再放一个连接,能够返回首页的,把 logo 的背景图片给连接便可。
三、为了搜索引擎收录咱们,咱们连接里面要放文字(网站名称),可是文字不要显示出来。
l 方法1:text-indent 移到盒子外面(text-indent: -9999px) ,而后 overflow:hidden ,淘宝的作法。
l 方法2:直接给 font-size: 0; 就看不到文字了,京东的作法。
四、最后给连接一个 title 属性,这样鼠标放到 logo 上就能够看到提示文字了
l footer 页面底部盒子通栏给一个高度和灰色的背景
l footer 里面有一个大的版心
l 版内心面包含 1 号盒子,mod_service 是服务模块,mod 是模块的意思
l 版内心面包含 2 号盒子,mod_help 是帮助模块
l 版内心面包含 3 号盒子,mod_copyright 是版权模块
之前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专有的,注意须要新的样式文件 index.css 。
l main 盒子宽度为 980 像素,位置距离左边 220px (margin-left ) ,给高度就不用清除浮动
l main 里面包含左侧盒子,左浮动,focus 焦点图模块
l main 里面包含右侧盒子,右浮动,newsflash 新闻快报模块
l 大盒子 recom 推荐模块 recommend
l 里面包含 2 个盒子, 浮动便可
l 1 号盒子 recom_hd
l 2 号盒子 recom_bd ,注意里面的小竖线
注意这个 floor ,不要给高度,内容有多少,算多少
第一楼是家用电器模块: 里面包含两个盒子
l 1 号盒子 box_hd,给一个高度,有个下边框,里面分为左右 2 个盒子
l 2 号盒子 box_bd,不要给高度
① box_hd 模块
l 有高度能够不用清除浮动
l 左边 h3 ,盒子左浮动
l 右边 tab_list ,右浮动,由于用到 tab 切换效果,因此里面要用 ul 和 li 来作
② box_bd 模块
l 根据 tab 切换的原理, tab_content 里面包含 内容部分。 这个内容能够经过ul布局
l 分为 5 个大列,列的宽度不一致
(1) 品优购列表页制做准备工做
\1. 列表页面是新的页面,咱们须要新建页面文件 list.html 。
\2. 由于列表页的*头部*和*底部*基本一致,因此咱们须要把首页中的头部和底部的结构复制过来。
\3. 头部和底部的样式也须要,所以 list.html 中还须要引入 common.css 。
\4. 须要新的 list.css 样式文件,这是列表页专门的样式文件。
(2) 列表页 header 和 nav 修改
l 秒杀盒子 sk( second kill ) 定位便可
l 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
l 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
(3) 列表页主体 sk _container
l 1 号盒子 sk _container 给宽度 1200,不要给高度
l 2 号盒子 sk_hd ,插入图片便可
l 3 号盒子 sk_bd ,里面包含不少的 ul 和 li
(1) 注册页类名命名
注册页面: register.html
注意:注册页面比较隐私,为了保护用户信息,咱们不须要对当前页面作SEO优化。
(2)注册页布局
(3)registerarea 布局