教程官网:http://www.web-jshtml.cn/#/ 视频地址:https://space.bilibili.com/431551452
项目访问:朗朗口腔-学习项目
学习内容:原生页面布局、标签语义化;熟练掌握常规属性,CSS3 选择器,定位 position,浮动 float,弹性布局 flex,过渡,圆角,阴影,以及 CSS3 新特性属性等;
应用学习:vscode,phpstudy,photoshop,ftp,koala sass 预编辑等;
学习成效:读懂布局、公共模块抽离,ajax 数据渲染等;读懂 UI 样式,css 组合、公共样式抽离、sass 语法、雪碧图、页面优化等;
适用范围:PC 端、Ipad 端、移动端 web、H5 项目、Hybrid APP 混合开发等等;web 端项目基本通用;
不同的浏览器对不同的标签有自己内置的样式设置,这是全局性的样式,不同浏览器之间可能设置还不一样,并且内置的样式可能并不是我们想要的,我们就需要重置浏览器默认样式,注意,引用 CSSReset 一般放第一位:
- reset.css - HTML5 标签的重置默认样式,官网地址:https://meyerweb.com/eric/tools/css/reset/
- normalize.css - 比 reset.css 的方案优化了一些,官网地址:http://necolas.github.io/normalize.css/
设计稿中,每个页面都有 "头部"、"底部"、"右侧栏图标"、"面包屑"等等一些其他相同的模块,可以采用一个 "公共样式" 的文件 common.css 来处理。
以盖楼房说明:
- 位置属性:position、top、right、z-index、display、float (找位置在哪里盖楼房)
- 尺寸大小:width、height、padding、margin (规定每栋楼的大小)
- 背景边框:background、border (起水泥柱、上砖、批灰)
- 文字系列:font、line-height、letter-spacing、color- text-align(房间的装饰、摆个沙发、挂个画什么的)
- 其他:animation、transition(后期的配套设备)
具体详见「Git 笔记」。
项目标准色一般设计师会给出,示例如下,另外,我们可以根据设计稿来设置一些通用的 CSS 样式:
使用 Koala 软件进行自动编译,下载地址:http://koala-app.com/index-zh.html。
块级元素 | 行内元素 |
---|---|
独占一行,默认情况下,其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化 |
可以设置 width/height 属性 | 行内元素设置 width/height 属性无效 |
可以设置 margin/padding 属性 | 行内元素起边距作用的只有 margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。 |
对应于 display: block | 对应于 display: inline |
语义化标签,旨在让标签有自己的含义。说的更直白,就是告诉浏览器我写的这块内容是什么东西。
常见的有:
<title>:页面主体内容。
<hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>:无序列表。
<li>:有序列表。
<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>:标记导航,仅对文档中重要的链接群使用。
<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<article>:定义外部的内容,其中的内容独立于文档的其余部分。
<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
当“子级”元素使用 float 时,无法撑开“父级”元素高度,后续的布局会越来越乱,因此当“子级”元素使用 float 时,父级一定要清除浮动。
清除浮动常见解决方法:
- 添加新的元素 、应用 clear:both;不好之外:额外增加了一个无意义的标签,有点占用资源
- 父级上增加属性overflow:hidden;不好之外就在于超出的元素会被隐藏,看不见
- 定义一个伪类的css样式,把clearfix添加到父元素
一般网页导航栏中的 logo 采用<h1></h1>
标签来实现。
<h1>
<a href='' title='' target=''>
<img src='' alt=''/>
</a>
</h1>
- 无序列表 ul、li
- 有序列表 ol、li
a 标签的4种状态及设置 CSS:
-
a:link 超链接的默认样式
-
a:visited 访问过的(已经看过的)链接样式
-
a:hover 鼠标处于鼠标悬停状态的链接样式
-
a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。
方法一:background-image
背景图片的属性
-
background-repeat (背景图重复位置)
- repeat-x(x轴方向填充)
- repeat-y(y轴方向填充)
- no-repeat(不填充)
-
background-size (背景图片的大小)
- 100% 100% —— x,y轴上完全放大填充,不管图片是否失真
- cover —— 图片等比例缩放,直到最小部分填满容器
- contain —— 图片等比例缩放,直到最大部分填满容器
-
background-position (背景位置坐标,偏移量)
-
background-origin(背景图片的开始显示位置)
- border-box:从外边框开始显示
- padding-box:从内边距开始,默认
- content-box:从内容处开始
方法二:对象边框配合css3 配置
// 设置左边和下边的边框,然后配合CSS3旋转属性即可得到
i {
display: inline-block;
width: 9px;
height: 9px;
// 方法二:
border-bottom: 1px solid $text-gray;
border-left: 1px solid $text-gray;
transform: rotate(-45deg);
@include webkit(box-sizing,border-box)
}
方法三:伪元素:before、:after**
// 不使用i标签,直接在父元素中使用伪元素
.lang{
&::after {
content: '';
display: inline-block;
height: 6px;
width: 6px;
margin: 0 0 4px 0;
border-bottom: 1px solid $text-gray;
border-left: 1px solid $text-gray;
@include webkit(box-sizing, border-box);
@include webkit(transform, rotate(-45deg));
}
}
原本CSS3的写法:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
使用SCSS非常简单,且支持各种属性复用:
@mixin webkit($type,$value){
-webkit-#{$type}: $value;
-moz-#{$type}: $value;
-ms-#{$type}: $value;
-o-#{$type}: $value;
#{$type}: $value;
}
// 后续调用-跟函数思想一致传入对应的参数即可
@include webkit(box-sizing,border-box)
绝对定位:position: absolute; 相对定位:position: relative;
记住一个重要的概念:绝对定位元素,居于“相对定位” 或 “绝对定位”的元素进行定位
简单的理解就是:绝对定位元素,需要一个参考对象(父级元素),参考对象的属性是 “相对定位” 或 “绝对定位”
通过设置top、right 、bottom 、left 进行定位,常使用的值为px、%。
略。
应用伪类获取不同的元素,例如:
a:first-child
- 获取第一个a元素a:nth-child(n)
- 获取第n个a元素a:last-child
- 获取最后一个a元素
底部制作使用 dl dd dt书籍标签,举例如下:
<dl>
<dt>走进朗朗</dt>
<dd>朗朗简介</dd>
<dd>朗朗优势</dd>
<dd>企业荣誉</dd>
<dd>团队风采</dd>
</dl>
多行文本测量行高为当前文字的顶部直至下一行文字的顶部。
推荐的写法:
transition: all 1s linear .5s;
,分别对应下面的四个属性
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:定义过渡效果花费的时间。默认是 0。
- transition-timing-function:规定过渡效果的时间曲线。
- transition-delay:规定过渡效果何时开始。默认是 0。
可通过网站在线调试:https://cubic-bezier.com/#.17,.67,.83,.67
- fontAwesome - http://fontawesome.dashgame.com/
- 阿里巴巴图标库 - https://www.iconfont.cn/ (推荐!!!)
关键点:JS 可以定义一个变量 index 存储当前显示的元素索引,以及获取 clientWidth 宽度来设置显示容器的宽度以及图片元素宽度,并且通过设置 left 来移动图片窗口。
需求:下方的点对应切换;左右箭头对应切换;每隔n秒自动切换;连续点击箭头必须等上一个移动完成才有效;
详见说明文档:cursor,常用属性:
cursor: pointer
- 光标呈现为指示链接的指针(一只手)。cursor: move
- 此光标指示某对象可被移动。
如下图所示的布局就适合于figure标签:
<figure>
<figcaption>标题</figcaption>
内容区
</figure>
推荐的写法:animation: name 5s infinite;
- animation-name 规定需要绑定到选择器的 keyframe 名称。。
- animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。 n | infinite
- animation-direction 规定是否应该轮流反向播放动画。 normal | alternate
$.ajax({
url: "http://www.hzhuti.com", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
cache: false, // 是否读取缓存
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
内容 | 说明 |
---|---|
url | 必需,规定把请求发送到哪个 URL |
data | 可选,映射或字符串值。规定连同请求发送到服务器的数据 |
success | 可选,请求成功时执行的回调函数 |
dataType | 可选,规定预期的服务器响应数据类型, 默认执行智能判断(xml、json、script 或 html) |
返回状态值:
- 200:成功
- 400:前端提交数据的字段名称或者是字段类型和后台的实体类不一致 或 数据格式不是json对象
- 404:请求地址错误
- 403:跨域问题。开发环境地址 与 请求地址处于不同域
- 500:一般都是服务器内部报错。这种问题跟后台沟通即可
类型 | 权重 | 栗子 |
---|---|---|
! important | 无穷 | |
行间样式 | 1000 | style |
id | 100 | #id |
class/属性选择器/伪类/伪元素 | 10 | .class / [type='text'] / :hover/ ::first-line |
标签选择器 | 1 | div |
通配符 | 0 | * |
普通css如果我们需要如下的类名则每一个都要具体写:
.padding-top-10{padding-top:10px};
.padding-top-20{padding-top:20px};
.padding-top-30{padding-top:30px};
.padding-top-40{padding-top:40px};
.padding-top-50{padding-top:50px};
那么基于sass,我们可以利用for循环完成:
@for $i from 1 through 3 {
.item-#{$i} {
width: (20px * $i);
}
}
swiper 提供各种触摸滑动插件!!!简单配置即可实现大部分所需的滑动功能!!!本案例中用于实现幻灯片!!!
-
application/json(JSON数据格式):"Content-type","application/json; charset=utf-8"
-
application/x-www-form-urlencoded(默认):"Content-type", "application/x-www-form-urlencoded; charset=utf-8"
-
multipart/form-data(用于表单含文件时) :"Content-type", "multipart/form-data; charset=utf-8"
-
text/xml(不常用):"Content-type", "text/xml; charset=utf-8"
CSS3 background-size 属性、占位图解决图片大小不一问题
background-size:
-
Contain:图片自身的宽高比例不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
-
Cover:图片宽高比例不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
<div class='cover-img' style='background-image:url(真实图片)'>
<img src='占位图' alt=''>
</div>
<style>
.cover-img{
background-repeat:no-repeat;
background-position:center; /*居中显示*/
background-size: cover;
}
</style>
- 单行
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
- 多行
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
overflow: hidden;
- -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。
- display: -webkit-box 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
略
<div class="row-container gutter-15 ">
<div class="row-wrap clearfix">
<div class="row-item-6">1111</div>
<div class="row-item-6">1111</div>
</div>
</div>
<style>
// 自动分列-类似bootstrap
.row-container {
overflow: hidden;
div[class^=row-item] { float: left; box-sizing: border-box; }
.row-wrap { margin: 0 -15px; }
&.gutter-15 { div[class^=row-item] { padding: 0 15px; } }
.row-item-6 { width: 50%; }
.row-item-3 { width: 33.33%; }
.row-item-4 { width: 25%; }
}
</style>
- 定义分列占比 - row-item-6 / row-item-3 / ...
通过使用属性选择器将row-item均浮动
float: left;
,并设置占比width: 25%;
- 定义元素间隔 - gutter-15
通过padding对row-item设置间隔,注意还需要将row-item改为
border-box
,并对外层嵌套设置margin: 0 -15px;
去除左右边界的间隔。
sass继承可使用两种写法,举例如下:
%child{
color: white;
}
.parent{
@extend %child;
}
.child{
color: white;
}
.parent{
@extend .child;
}
通过scss的for循环可以生成一系列的类名,如下所示:
@for $i from 1 through 10 {
.padding-top-#{$i*10} {
padding-top: (10px * $i);
}
}
上述语法即可生成一系列的类名.padding-top-10,.padding-top-20 ......
详见「CSS 选择器网站」。
举例:实现左右交替的效果即可使用:nth-child(2n)
选择偶数的对象,:nth-child(2n-1)
选择奇数的对象,然后分别设置样式。
暂无。
详见「学习网站」
注意点:利用函数时,如果表单验证不通过则需要设置return: false;
避免继续进行下面的验证
// 举例:
function checkForm() {
let mobile = document.getElementById('mobile')
if (!mobile.value.value) {
alert('手机号码不能为空')
return false // 不再进行后续操作
}
if (!(/^1[3456789]\d{9}$/.test(mobile.value))) {
alert("手机号码有误,请重填");
return false;
}
// 后续为ajax操作
}
方法1: 标签内嵌
// <button onclick='click()'></button>
function click(){}
方法2: 获取 DOM 对象,传统绑定 - 优先级最高
let button = document.getElementById('button');
button.onclick = function click(){} // 无效,会被下面语句覆盖
button.onclick = function click(){}
方法3: 获取 DOM 对象,事件注册
let button = document.getElementById('button');
button.addEventListener('click', function(){}) // 与下方语句均执行
button.addEventListener('click', function(){})
注意1:事件绑定存在覆盖,而事件注册不会覆盖,都会执行。
注意2:当存在对象较多或者动态生成的时候,不建议采用事件绑定的方式,比较耗内存(比如换页,需要清除事件绑定,不然一直都在内存中),可以使用事件注册,并且视情况采用事件代理方法。
详见网站「bshare」,提供多种分享按钮代码!
当出现多个标题的时候(例如文章的主标题和副标题等),需要采用<hgroup>
标签来实现。
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
<span>来源:朗朗口腔</span>
<span>日期:2017年9月16日</span>
</hgroup>
如果发现本项目有错误,欢迎提交 issues 指正。