html5標簽css3的常用樣式

来源:http://www.cnblogs.com/tianshang/archive/2016/10/19/5978965.html
-Advertisement-
Play Games

<meta name=''> name:有如下6個值:application-name:文檔名或者應用名,整個文檔只能包含一個值。author:文檔作者description:文檔描述generator:生成文檔的程式。keywords:網頁關鍵字,用英文逗號分隔。 <table>標簽的屬性Bord ...


<meta name=''>

name:有如下6個值:
application-name:文檔名或者應用名,整個文檔只能包含一個值。
author:文檔作者
description:文檔描述
generator:生成文檔的程式。
keywords:網頁關鍵字,用英文逗號分隔。

 

<a href="http://www.baidu.com">百度一下</a>

href:路徑
<img src="../img/a.jpg" alt="此圖無法顯示" border="1px solid red" width="400" height="250"/>
src:圖片路徑

<table>標簽的屬性
Border 邊框
Cellspacing 表格外邊距
Cellpadding 表格內邊距
Align  位置
Bgcolor:背景色
Background:背景圖片
Bordercolor:邊框顏色

table中 <tr></tr>

<td colspan="2"></td>  colspan 跨2列

        rowspan  跨  行

<input type="">

 type值

text  文本

password 密碼

radio 單選

checkbox 多選

reset 重置

file 文件上傳

submit 提交表單

image 圖形提交

button 普通按鈕

分組下拉

<select name="city" id="city">
<optgroup label="山東">
<option value="yt">煙臺</option>
<option value="qd">青島</option>
<option value="wh">威海</option>
</optgroup>
<optgroup label="北京">
<option value="bj">bj</option>
<option value="tam">tam</option>
<option value="zong">zong</option>
</optgroup>
</select>

文字區域textarea
<textarea name="textarea" id="textarea" cols="30" rows="10" readonly="readonly"
disabled="disabled">
1</textarea>
cols 寬度 rows 高度 readonly 只讀

css樣式

字體、字型大小:
font(縮寫形式)
font-weight(粗細) 正常(normal) 粗體(bold) 斜體(italic)
font-size(大小)
font-family(字體系列)
font-style(字體樣式)


字體顏色:
color
opacity (透明度 css3)


行距、對齊等:
line-height (行高)
text-align (對齊)
letter-spacing (字元間距)
text-decoration (文本修飾 )
overflow  超出的部分隱藏
text-overflow

text-overflow文本裁剪  clip裁剪文本時不添加...  ellipsis 裁剪時加...  註意:不換行和over-flow控制

text-shadow 陰影
text-indent

背景屬性:
background (縮寫形式)
background-color(背景色 )
background-image(背景圖 )
background-repeat(背景圖重覆方式 )
background-position(位置坐標、偏移量)

列表常用

list-style: none無風格 disc實心圓 circle空心圓 square 實心正方形 decimal 數字

 

盒子屬性:
margin(外邊距/邊界)    以上方為主 可寫1、2、4個值
border(邊框)
padding(內邊距/填充 )

後可加 -top 等方向

border-radius 邊框圓角

box-shadow  陰影

 

變形效果:transform

transform-origin 指定變換的起點

none無變換

translate(長度值或百分比) translateX translateY 在水平、垂直方向平移

scale(數值)scaleX scaleY 在水平方向、垂直方向或兩個方向上縮放

rotate(角度)旋轉元素

skew(角度)skewX skewY  在水平方向、垂直方向或兩個方向上使元素傾斜一定的角度

matrix 自定義

 

過渡效果:transition

transition-property 指定過渡的css屬性 預設值 all

transition-duration 完成過渡的時間

transition-timing-function 指定過渡函數  緩動效果預設值ease 等同於(0.25, 0.1, 0.25, 1.0) 

transition-delay 指定過渡開始出現的延遲時間

 

@keyframes:定義一個動畫

animation

<style>          
  .t5{
            transition: 5s ease-out all;   /*過渡   ease    in 加速   out減速*/
        }/*transition-delay延遲*/
        .t5:hover{

            transform: skew(45deg,45deg)
        }
        @keyframes key {
            0%{
                background-color: red;width: 200px;height: 200px;
            }
            25%{
                background-color: orange;width: 100px;height: 100px;transform: rotate(-90deg);
            }
            50%{
                background-color: yellow;width: 60px;height: 60px;transform: none;
            }
            75%{
                background-color: green;width: 120px;height: 120px;transform: none;
            }
            100%{
                background-color: blue;width: 200px;height: 200px;transform: rotate(360deg);
            }
        }
        .kt{
            animation:key 1s;
           /* animation-iteration-count: infinite;*//*無限迴圈*/
            background-color: yellow;
            width: 200px;height: 200px;

        }

</style> <div class="kt t5"></div>

 





 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先讓我們看看最簡單的socket client與server實例: Client Server 以上一個Client和一個Server,最簡單的例子,但是體現socket編程。 如果需要Server服務端一直監聽埠,那麼只需要迴圈就可以(server.accept()會阻塞等待請求),至於需要高 ...
  • 本系列文章導航 從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式 一.摘要 本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得大家學習. 二.前言 通過前面幾章我們已經能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對 ...
  • 關於jQuery的 入門使用jQuery可以很容易或具有挑戰性的,這取決於你如何使用JavaScript,HTML,CSS進行開發和編程。 要知道一件重要的事情是,jQuery是只是一個JavaScript庫。jQuery的所有功能特性都是通過JavaScript訪問,所以要對javascript足 ...
  • angular源碼其實結構非常清晰,劃分的有條有理的,大概就是這樣子: 其實閱讀angular源碼重要的是angular的整個架構思路,至於服務過濾器和指令可以先拋開。 setupModuleLoader方法寫的有點複雜,尤其是直接三層閉包,如果逆著看,容易糊塗,還是順著思路走比較容易。 首先是,我 ...
  • 本系列文章導航 從零開始學習jQuery (三) 管理jQuery包裝集 一.摘要 在使用jQuery選擇器獲取到jQuery包裝集後, 我們需要對其進行操作. 本章首先講解如何動態的創建元素, 接著學習如何管理jQuery包裝集, 比如添加,刪除,切片等. 二.前言 本系列的2,3篇上面列舉了太多 ...
  • 根據網上的身份證的計算公式寫的一個驗證身份證號的js 第一步:將身份證號碼的第1位數字與7相乘;將身份證號碼的第2位數字與9相乘;將身份證號碼的第3位數字與10相乘;將身份證號碼的第4位數字與5相乘;將身份證號碼的第5位數字與8相乘;將身份證號碼的第6位數字與4相乘;將身份證號碼的第7位數字與2相乘 ...
  • mustache 模板,用於構造html頁面內容。在實際工作中,當同一個模板中想要調用不同的函數來渲染畫面,在已經自定義好了的前提下,可以在渲染頁面時對傳入的參數進行手動判斷。【在不好判斷的情況下,我們可以通過改變傳入參數來進行判斷】跟小白我來看看該模板的語法吧。 Mustache 的模板語法很簡單 ...
  • 我們已經掌握了很多實用 Bootstrap 的重要技能。現在,是時候拿出更多的創意來幫助客戶實現他們全方位線上營銷的願望了。此次將帶領大家做一個漂亮的單頁高端營銷網站。 主要任務如下: □ 一個大型介紹性傳送帶圖片展示區,配有自定義的響應式歡迎信息; □ 一個客戶留言區,顯示為帶標題的圖片牆,就像磚 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...