黑马前端-品优购案例
一.常见模块类名命名
名称
说明
快捷导航栏
shortcut
头部
header
标志
logo
购物车
shopcar
搜索
search
热点词
hotwords
导航
nav
导航左侧
dropdown包含 .dd .dt
导航右侧
navitems
页面底部
footer
页面底部服务模块
mod_service
页面底部帮助模块
mod_help
页面底部版权模块
mod_copyright
二.LOGO的SEO优化1.logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
2.h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可
3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不用显示出来。
方法1 : text-indent 移到盒子外面(text-indent: -99999px),然后overflow:hidden, 淘宝的做法。
方法2 : 直接给font-size: 0; 这样就看不到文字了,京东的做法
4.最后给链接一个titl ...
黑马CSS-CSS3过渡
CSS3过渡过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画: 是从一种状态 渐渐的过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局
我们现在经常和:hover一起搭配使用。
1transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性: 想要变化的CSS属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。
2.花费时间:单位是 秒 (必须写单位) 比如0.5s
3.运动曲线: 默认是ease (可以忽略)
4.何时开始: 单位是秒(必须写单位)可以设置延迟触发时间 默认是0s (可以忽略)
不同的属性用逗号分割
黑马CSS-CSS的新特性
CSS3的现状
新增的CSS3特性有兼容问题,ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段主要学习: 新增选择器和盒子模型以及其他特性
一.CSS3新增选择器CSS3给我们新增了选择器,可以更加便捷更加自由的选择目标元素。
1.属性选择器属性选择器可以根据元特定的属性来选择元素。这样就可以不用借助于类或者id选择器
选择符
简介
E[att]
选择具有att属性的E元素
E[att=“val”]
选择具有att属性且属性值等于val的E元素
E[att^=“val”]
匹配具有att属性且值以val开头的E元素
E[att$=“val”]
匹配具有att属性且值以val结尾的E元素
E[att*=“val”]
匹配具有att属性且值中含有val的E元素
注意: 类选择器、属性选择器、
伪类选择器权重都是10
2.结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素,常用与根据父级选择器里面的子元素
选择符
简介
E:first-child
匹配父元素中的第一个子元素E
E:last- ...
黑马H5-HTML5的新特性
HTML5的新增特性主要是针对于以前的不足,新增了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性
声明: 新特性增加了很多,但是我们专注于开发常用的新特性
以前布局,我们基本用div来做。div对于搜素引擎来说,是没有语义的。
```头部标签
123- ``` <nav>导航标签
```内容标签
123- ``` <aside>侧边栏标签
```尾部标签
123- ``` <section>某个区域
H5新增的多媒体标签1.视频video—-常见属性
属性
值
描述
autoplay
autoplay
视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls
controls
向用户显示播放控件
width
pixels
设置播放器宽度
height
pixels(像素)
设置播放器高度
loop
l ...
黑马CSS-CSS的初始化
不同浏览器对有些标签默认值不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化
简单理解: CSS初始化是指重设浏览器的样式。(也称为CSS reset)
每个网页都必须首先进行CSS初始化。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667* { margin: 0; padding: 0}/* 清除默认内外边距 */em,i { font-style: normal}li { list-style: none}去除列表的样式 img { border: 0; /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */ vertical-align: middle &#x ...
解决emmet语法中自动换行问题
先去安装emmet语法插件
安装后快捷方式ctrl+，打开设置，在设置中搜索syntax profiles
点击settings.json 覆盖以下代码即可
1234567891011{ "window.zoomLevel": 1, "editor.formatOnSave": true, "editor.wordWrap": "on", "emmet.syntaxProfiles": { "html": { "inline_break": 2 } }}
黑马CSS-常见布局技巧-margin负值巧妙运用
margin负值巧妙运用1.让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框点我查看源代码点我查看使用效果123456789101112131415161718192021222324252627<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> ul li { width: 150px; height: 200px; border: 1px solid red; float: left; margin-left: -1px; } </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</l ...
黑马CSS-溢出的文字省略号显示
溢出的文字省略号显示1.单行文本溢出显示省略号—三个条件123456/* 1.先强制一行内显示文本 */white-space: nowrap; (默认normal自动换行)/* 2.超出的部分隐藏 */overflow: hidden;/* 3.文字用省略号代替超出的部分 */text-overflow: ellipsis;
点我查看源代码点我查看使用效果1234567891011121314151617181920212223242526<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; / ...
黑马CSS-解决图片底部默认空白缝隙问题
解决图片底部默认空白缝隙问题bug: 图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
1.给图片添加vertical-align:middle | top |bottom等。(提倡使用的)
2.把图片转换为块级元素display: block;
黑马CSS-vertical-align属性应用
vertical-align属性应用CSS的vertical-align属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐
官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
语法:
1vertical-align : baseline | top | middle | bottom
值
描述
baseline
默认。元素放置在父元素的基线上
top
把元素的顶端与行中最高元素的顶端对齐
middle
把此元素放置在父元素的中部
bottom
把元素的顶端与行中最低的元素的顶端对齐
点我查看源代码点我查看使用效果123456789101112131415<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> img { vertical-align: m ...