實習筆記整理 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教程