实习笔记整理 html+css 篇

时间  2019-11-15
标签 实习 笔记 整理 html+css html css 栏目 CSS 繁體版
原文   原文链接

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

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

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

  1. firefox太坑了！css不能实时更新！(╯‵□′)╯︵┻━┻前端

  2. 用before和after的时候千万不要忘记content="";html5

2. 小tips

  • 关于html5的文档:web

    1. 自闭和标签:<link> <img> <input> <hr> <br> <area>,不要在最后加'/'chrome

    2. 不要用tab,要用2个空格浏览器

  • 定位tiptomcat

    1. 不能够两个嵌套的div都用百分比来定位,除非外层的都是100%app


下面开始正文

3. HTML相关

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

**大概分红如下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类

  1. ~~天然布局~~, 略过不提, 通常不用

  2. 流动布局, 又叫float布局, 通常跟↓一块儿用

  3. 定位布局, 很是经常使用

// 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 背景高度

  1. 用背景图的高度

  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. 特殊用法1:border-radius: 9999px; 圆头长方形

  2. 特殊用法2:border-radius: 50%; 在width=height=px;的时候, 圆

  3. border-image:url(border.png) 30 30 round; with 浏览器兼容
    图片边框

  4. box-shadow:10px 10px blur spread #fff inset
    边框阴影: 水平 垂直 模糊 阴影尺寸 颜色 外部阴影改成内部阴影

  5. 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的切图

  1. 百分比切图

    例如一个`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;

  2. 像素切图

    条件同上.

    第1个: background-position: 0 0;
    第2个: background-position: -70px 0;
    第3个: background-position: -140px 0;
    ...
    第7个: background-position: -350px 0;

  3. 切图大小调整

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 效果

样例学习1的实现效果

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 效果

简单优惠券效果

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 效果

底部固定方块效果

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 效果

圆头按钮效果

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 关于下载

全部微软的软件: 点我下载

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程