实习笔记整理 html+css 篇

2019年9月14日 141次阅读来源: 2bdenny

总结: 主要是前端HTML+CSS的基础 (╯‵□′)╯︵┻━┻不准吐槽我把总结写在前面

特别感谢超级好用的MarkDown编辑器(づ￣ 3￣)づStackEdit

1. 碰到的所有坑都放在前面 `(。・・)ノ`

firefox太坑了！css不能实时更新！(╯‵□′)╯︵┻━┻
用before和after的时候千万不要忘记content="";

2. 小tips

关于html5的文档:
1. 自闭和标签:<link> <img> <input> <hr> <br> <area>,不要在最后加’/’
2. 不要用tab,要用2个空格
定位tip
1. 不可以两个嵌套的div都用百分比来定位,除非外层的都是100%

下面开始正文

3. HTML相关

果然HTML的话直接看代码&照着画最好学了咩, 主要是樊大师讲了基础知识, 总算不是了解得模模糊糊画成什么样全靠调了!

 **大概分成以下6部分**, 没什么逻辑随意啦

标签
布局
盒子模型
背景切图
选择器
响应式设计

3.1 标签

标签分成2类, 内联(行内)元素和块状元素

3.1.1 内联

包含<span> <b> <i> <em> <strong>, 内联元素通过display:block可以转换为块级元素

内联标签们

<dl>、<dt>、<dd>一般用来跟css配合当作html里的<table>来用
<ol>有数字的标签, 在进行了初始化的情况下, 这个标签的数字是看不见的, 被隐藏在left:-20px;位置, 设置数字序号还需要进行设置 →_→:list-style: decimal;
<ul>无数字的标签
<strong>粗体
<em>斜体
<sup>上标文本
<sub>下标文本
<pre>预先格式化(可以保留空格和换行符(也就是多个空格的时候可以用这个))
<thead>套在<tr>外面用来定义这一行为表格的表头
<tbody>表格的正文行
<tfoot>表格的脚注行
<map>套在<area>外面定义一个客户端图像映射
<object>用来嵌入多媒体文件(html4)
<input type="email/file/number/range/search/url">各种各样的输入框
<th>标签:
1. colspan:2跨越2列
2. rowspan:2跨越2行

// case 1:  只有2列的定宽平均大小表格可以这样设置, ↓(⊙o⊙)↓:
// 父
.father {
    width: 240px;
}

// 左孩子
.left-son {
    left: 0;
    width: 120px;
}

// 右孩子
.right-son {
    right: 0;
    width: 120px;
}

3.1.2 块级元素

包含<div> <section> <header> <footer> <aside> <p>, 块级元素通过display:inline可以转换为内联元素

3.2 布局

布局分成3类

~~自然布局~~, 略过不提, 一般不用
流动布局, 又叫float布局, 一般跟↓一起用
定位布局, 非常常用

    // case 1: 流动布局的典型应用
    // 设置浮动定位
    float: left;
    
    // 在保留浮动元素的情况下清除动
    // 在同一层增加一个元素(宽度==父元素宽度), 然后给它设置:
    cleard: both;

    // case 2: 居中定位
    <div class="outer">
        <div class="inner"></div>
    </div>
    
    // 方法1, 比较罕见
    .outer .inner {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: px/%;
        margin: auto;
    }
    
    // 方法2, 仅限知道inner的width和height情况下
    .inner {
        left: 50%;
        top: 50%;
        margin-left: -1/2 width;
        margin-top: -1/2 width;
    }

    // 方法3, 特别常用
    .inner {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-tranform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }
    
    // 方法4, 比较常用
    .inner {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    // case 3: 元素左右居中
    width: px/%;
    margin: auto;

3.3. 盒子模型

3.3.1 盒子定位:

padding:会扩大border, 如果不要扩大, 就需要设置box-sizing: border-box;

3.4 切图

3.4.1 背景图

// case 1: 背景图片
background: url(imgUrl);
// 背景宽度100%, 然后高度等比缩放
background-size: 100%;

3.4.2 背景高度

用背景图的高度
padding-bottom: 100%; position: absolute;这样背景高度就等于宽度, 100%是计算获得的.

3.5 选择器

3.5.1 一般选择器

    <!-- case 1: -->
    <!-- 以这个为例 -->
    <p></p>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul></ul>

    // 所有后代选择器
    ul li {css}
    
    // 直接后代选择器
    ul > li {css}
    
    // 相邻兄弟选择器
    p + ul {css}
    
    // 一般兄弟选择器
    p ~ ul {css}

3.5.2 伪元素

before after

3.5.3 伪类选择器

input[ attr = "submit" ]

3.5.4 超链接选择器

<a></a>        // 超链接标签
a:link        // 未访问
a:visited    // 访问过
a:hover        // 鼠标悬停
a:active    // 单击未释放

3.6 响应式设计

3.6.1 媒体查询

    // case 1: 媒体查询
    @media screen and (max-width: 374px){
        // ip4 & lower
    }
    @media screen and (min-width: 375px and max-width: 413px){
        // ip5 & ip5s & ip6
    }
    @media screen and (min-width: 414px){
        // ip6p
    }

3.6.2 等比字体

vw

3.6.3 选择器

    // case 2: 选择器
    ul li: only-child {css}
            // 从前往后↓    从后往前↓
    ul li: nth-child {1}, nth-lastchild{1} {css}

3.6.4 根据设备设置缩放

meta name="viewpoint"

4. CSS

4.1 浏览器兼容性:

-ms-xxx:        // ie
-webkit-xxx:    // chrome & safari
-o-xxx:         // opera
-moz-xxx:       // firefox

4.2 CSS属性

4.2.1 动画属性

animation

这个属性是一个简写属性，用于设置六个动画属性：

animation-name:
animation-duration:
animation-timing-function:
animation-delay:
animation-iteration-count:
animation-direction:

4.2.2 背景填充属性

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

这个属性的作用是设置颜色的线性渐变, 需要考虑浏览器兼容性.

4.2.3 元

<meta content="telephone=no" name="format-detection">
禁止把数字转换为拨号链接，类似的还有email和adress（地图）

4.2.4 层叠属性

z-index
一开始可以设置成10,而不是1,防止后面有什么元素的叠加层次需要修改的时候,要改全部的

4.2.5 边框

border-radius:2px;
圆角

特殊用法1:border-radius: 9999px; 圆头长方形
特殊用法2:border-radius: 50%; 在width=height=px;的时候, 圆
border-image:url(border.png) 30 30 round; with 浏览器兼容
图片边框
box-shadow:10px 10px blur spread #fff inset
边框阴影: 水平垂直模糊阴影尺寸颜色外部阴影改为内部阴影
border-collapse:collapse
所有的边框都合并为一个边框

4.2.6 背景

background

4.2.6.1 background的基本属性

//背景图
background:url(images/1.png), url(images/2.png);
// 背景大小
background-size:  
// 背景是否重复  
background-repeat:
// 使用哪个框作为content-box
background-origin:content-box/padding-box/border-box

4.2.6.2 background的切图

百分比切图
```
例如一个`420*60`的图片, 上面一共有7个`70*60`小图, 那么取第1到第7个小图依次应该是:
```
第1个: background-position: 0 0;
第2个: background-position: 100/6% 0;
第3个: background-position: 200/6% 0;
…
第7个: background-position: 100% 0;
像素切图
```
条件同上.
```
第1个: background-position: 0 0;
第2个: background-position: -70px 0;
第3个: background-position: -140px 0;
…
第7个: background-position: -350px 0;
切图大小调整

    width:45px;
    height:45px;
    background-size: auto 100%; // 背景图随width缩放

4.2.7 文本

text-shadow: 5px 5px 5px #fff
文本阴影:水平垂直模糊颜色
text-overflow: clip/ellipsis/string
文本溢出:修剪省略省略并换给定字符串
font-weight:bold/...
文本粗细, 400=normal
font-style:italic/...
文本样式
font-family:arial, sans-serif, 'times roman'
文本字体,用单引号是因为中间有一个空格,大小写不敏感
overflow:visible/hidden/scroll
溢出处理

4.2.8 动画

transform
动画, 全部需要浏览器兼容

// case 1: 动画属性
translate:  移动;
rotate:     顺时针旋转;
scale:      放大;
skew:       翻转;
matrix:     组合变换;
matrix3d:
translate3d:
translateX:
translateY:
translateZ:
scale3d:
scaleX:
scaleY:
scaleZ:
rotate3d:
rotateX:
rotateY:
rotateZ:
perspective:
transform-origin: x y z;

// case 2: 动画组合
@keyframes name{
     from {background:yellow;}
     to {background:red;}
     % {***}
}
// 需要浏览器兼容

4.2.9 多列

column-count:
column-gap:
column-rule:

5. PhotoShop相关

一些快捷键

v 移动
m 选择
t 文字
c 裁剪
Ctrl+E 合并图层

6. 样例学习

6.1 带标号的边框效果

6.1.1 效果

《实习笔记整理 html+css 篇》

6.1.2 实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<style type="text/css">
.wrapper {
    width: 20%;
    height: 60px;
    border: 2px dashed #338559;
    border-radius: 10px;
}
.wrapper:before {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    content: "1";
    margin-left: -10px;
    margin-top: 20px;
    text-align: center;
    color: #fff;
    background: #338559;
}
</style>
</head>

<body>
<div class="wrapper"></div>
</body>
</html>

6.2 简单优惠券效果

6.2.1 效果

《实习笔记整理 html+css 篇》

6.2.2 实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<style type="text/css">
html {
    background: #e14747;
}

figure {
    position: relative;
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 60px;
    margin-bottom: 3px;
    font-size: 5vw;
}

.left {
    position: relative;
    display: table-cell;
    width: 68%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px 0 0 5px;
    color: #e14747;
    border-right: 2px dotted #e77979;
    padding-left: 19%;
}

.right {
    display: table-cell;
    width: 32%;
    margin: 0;
    padding: 0;
    padding-left: 4%;
    vertical-align: middle;
    box-sizing: border-box;
    border-radius: 0 5px 5px 0;
    background: #eee;
}

figure:before{
    position: absolute;
    height: 14px;
    width: 14px;
    margin-top: -7px;
    top: 50%;
    left: -7px;
    border-radius: 10px;
    z-index: 1;
    background: #e14747;
    content: "";
}

figure:after{
    position: absolute;
    margin-right: 0;
    height: 14px;
    width: 14px;
    margin-top: -7px;
    top: 50%;
    right: -7px;
    border-radius: 10px;
    background: #e14747;
    z-index: 1;
    content: "";
}

</style>
</head>
<body>
<figure>
    <div class="left">
    </div>
    <div class="right">
    </div>
</figure>
</body>
</html>

6.3 底部固定方块效果

6.3.1 效果

《实习笔记整理 html+css 篇》

6.3.2 实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<style type="text/css">
html {
    background: #e14747;
}

figure {
    position: relative;
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 600px;
    margin-bottom: 120px;
    font-size: 5vw;
}

.left {
    position: relative;
    display: table-cell;
    width: 68%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px 0 0 5px;
    color: #e14747;
    border-right: 2px dotted #e77979;
    padding-left: 19%;
}

.right {
    display: table-cell;
    width: 32%;
    margin: 0;
    padding: 0;
    padding-left: 4%;
    vertical-align: middle;
    box-sizing: border-box;
    border-radius: 0 5px 5px 0;
    background: #eee;
}

figure:before{
    position: absolute;
    height: 14px;
    width: 14px;
    margin-top: -7px;
    top: 50%;
    left: -7px;
    border-radius: 10px;
    z-index: 1;
    background: #e14747;
    content: "";
}

figure:after{
    position: absolute;
    margin-right: 0;
    height: 14px;
    width: 14px;
    margin-top: -7px;
    top: 50%;
    right: -7px;
    border-radius: 10px;
    background: #e14747;
    z-index: 1;
    content: "";
}

section {
    position: fixed;
    display: block;
    margin: 0;
    padding: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
    background: #fff;
    z-index: 2;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.use-btn {
    margin: 0;
    padding: 0;
    display: block;
    margin-top: 11px;
    margin-left: 4%;
    width: 92%;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    background: #f90;
    color: #fff;
}

.shr-btn {
    margin: 0;
    padding: 0;
    display: block;
    margin-top: 8px;
    margin-left: 4%;
    width: 92%;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    background: #fff;
    color: #f90;
    border: 1px solid #f90;
    box-sizing: border-box;
}

</style>
</head>
<body>
<figure>
    <div class="left">
    </div>
    <div class="right">
    </div>
</figure>

<section>
    <div class="use-btn">立即使用</div>
    <div class="shr-btn">呼唤朋友们来领券</div>
</section>
</body>
</html>

6.4 圆头按钮效果

6.4.1 效果

《实习笔记整理 html+css 篇》

6.4.2 实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<style type="text/css">
div {
    height: 60px;
    width: 90%;
    margin: auto;
    font-size: 50px;
    color: #fff;
    font-weight: bolder;
    text-align: center;
    border-radius: 9999px;
    background: #338559;
}
</style>
</head>
<body>
<div>Click</div>
</body>
</html>

7. 莫名其妙的笔记

7.1 关于tomcat

cmdmvn tomcat:run Dmaven.tomcat.port=18080
运行tomcat的时候修改端口

7.2 关于下载

所有微软的软件: 点我下载

    原文作者：2bdenny
    原文地址: https://segmentfault.com/a/1190000003407922
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

1. 碰到的所有坑都放在前面 (。・・)ノ

2. 小tips

3. HTML相关

3.1 标签

3.1.1 内联

3.1.2 块级元素

3.2 布局

3.3. 盒子模型

3.3.1 盒子定位:

3.4 切图

3.4.1 背景图

3.4.2 背景高度

3.5 选择器

3.5.1 一般选择器

3.5.2 伪元素

3.5.3 伪类选择器

3.5.4 超链接选择器

3.6 响应式设计

3.6.1 媒体查询

3.6.2 等比字体

3.6.3 选择器

3.6.4 根据设备设置缩放

4. CSS

4.1 浏览器兼容性:

4.2 CSS属性

4.2.1 动画属性

4.2.2 背景填充属性

4.2.3 元

4.2.4 层叠属性

4.2.5 边框

4.2.6 背景

4.2.6.1 background的基本属性

4.2.6.2 background的切图

4.2.7 文本

4.2.8 动画

4.2.9 多列

5. PhotoShop相关

6. 样例学习

6.1 带标号的边框效果

6.1.1 效果

6.1.2 实现

6.2 简单优惠券效果

6.2.1 效果

6.2.2 实现

6.3 底部固定方块效果

6.3.1 效果

6.3.2 实现

6.4 圆头按钮效果

6.4.1 效果

6.4.2 实现

7. 莫名其妙的笔记

7.1 关于tomcat

7.2 关于下载

1. 碰到的所有坑都放在前面 `(。・・)ノ`