实习笔记整理 html+css 篇

头像
2bdenny
    阅读 11 分钟

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

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

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

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

    2. 用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类

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

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

    html5css
    2bdenny
    339 声望6 粉丝
    下一篇 »
    实习笔记整理 js 篇

    引用和评论

    推荐阅读
    头像
    fishshell中virtualenv配置的小问题

    2bdenny阅读 2.4k

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.6k评论 2

    0 条评论
    得票最新