樣式常用屬性

来源:http://www.cnblogs.com/letben/archive/2016/02/08/5185177.html
-Advertisement-
Play Games

筆記信息 複習： 表單作用： 從使用的角度上說：html提供了一個輸入內容的途徑。 從伺服器的角度：提供了一個收集信息的途徑。 以便客戶端和伺服器進行交互。 例：註冊頁面，上傳文件。 3種常見元素：input select textarea Input的十種常見類型： text，password，r


複習：

表單作用：

從使用的角度上說：html提供了一個輸入內容的途徑。

從伺服器的角度：提供了一個收集信息的途徑。

以便客戶端和伺服器進行交互。

例：註冊頁面，上傳文件。

3種常見元素：input select textarea

Input的十種常見類型：

text，password，radio，checkbox，submit，reset，button，image，hidden，file

Radio中name應該保持相同，以確保在單選按鈕中的元素完成互斥。

Checkbox中name 也要保持相同。

利用label進行綁定，點文字等效於點擊小的選中按鈕。

Submit和image都具有提交功能，由form的action的url進行響應。

Get 顯示提交 響應速度快 傳遞內容小， 應用較少

Post 隱式提交 響應速度慢 傳遞內容大， 應用廣。

Checked預設選中

Select： name option value selected

Textarea：裡面空格在外面顯示空格，文本裡面有換行，外面顯示有換行。

擁有屬性：rows cols 和readonly

Css層疊樣式表：

作用：用來美化頁面，修飾html標簽。

css代碼卸載html商，嵌入方式：

1、行嵌入：style 在html上的任何標簽都有style屬性，css代碼作為style的值。修飾範圍小。

2、頁內嵌入：style，stle作為一個標簽卸載head裡面，給這個標簽設定一個type="text/css"有三種方式：

(1) 標簽選擇器：p{} font{} table{} div{}

(2) 類選擇器：.className{} 可以寫多個

(3) Id選擇器：#identity{} 不可寫多個，並且不能有重覆id.

優先順序：行>id>class>標簽

3、css中常用屬性：

文本修飾：

邊框修飾：

寫法：多個元素共用一個樣式：

p,font,span{}

p,#spanStyle,.fontStyle{}

p span{} 表示p中的span服從{}內的樣式。

padding和margin用以定邊距。

修改list中的圖片樣式：{list-style-image:(url)}

div可以用來佈局，可以使用更加複雜的佈局方式。Div是塊級標簽。預設一個就是一行。

span預設不換行，沒有寬高，以內容為準。

Float屬性。

1、如果有層疊，有定位的在上面。

2、如果都有定位方式，誰出現在body最後面，誰出現在上面。

3、z-index：number 誰的number大，誰在上面。

4、有嵌套的話，裡面的顯示在上面。

練習利用css+div實現電子筆記本的佈局。

示例代碼：

和對應效果：

不同瀏覽器效果不同。

段落中的常見屬性：

color:#660; background-color:#9CF;width:500px;height:800px;text-align:center;text-decoration:underline; font-size:16px; font-family:"Lucida Console", Monaco, monospace; white-space:pre-line;line-height:normal; letter-spacing:normal;word-spacing:10px;

有需求再詳細查詢。

border:0; border-bottom:#00F 5px dotted;

這兩句話的前後位置還是比較有講究的：

這裡面都沒得顯示了，如果前後位置顛倒的話：

border-bottom:#00F 5px dotted;border:0;

table{ border:#9F6 20px inset;}

得加上inset才能有邊框

不同的瀏覽器效果不同，不要想了。根本不行。

絕對和相對錶示當前元素是否放棄自己之前的位置。

相對則保有之前的位置，

絕對則放棄之前的位置。

段落常見屬性：

字體顏色 font-color

段落所在背景顏色 background-color

段落寬：width

段落高：height

段落文本對齊方式： text-align

文本修飾：text-decoration:下劃線

字體大小：font-size 

字體樣式：font-family

留白：（據上一個單元的物理長度）white-space

行高：line-height

字間距：letter-spacing

單詞間距：word-spacing

代碼與效果：

1、

<input  type="text"  style=" border:0;border-bottom:#00F 5px dotted; "/>

    <hr/>

    <br/>

<input type="button" value="test" width="200px" height="150px" style="  border:#060 5px solid; background:#360;border:#00F 5px outset"/>

效果：

2、

<style type="text/css">

#one{width:300px;height:200px;background-color:#090; position:absolute; top:180px;left:280px;}

#two{width:300px;height:200px;background-color:#F00;float:left}

</style>

</head>

<body>

<div id="one">   

    </div>

   

    <div id="two">    

    </div>

<span>

    你好

    </span>   

    <span>

    Hello

    </span>

</body>

3、

<style type="text/css">

#one{width:300px;height:200px;background-color:#090; position:absolute; top:180px;left:280px;}

#two{width:300px;height:200px;background-color:#F00;position:relative;top:-20px;left:-20px;}

</style>

</head>

<body>

<div id="one">

        <div id="two">    

        </div>

    </div>

<span>

    你好

    </span>

    <span>

    Hello

    </span>

</body>

4、

<style type="text/css">

#one{width:300px;height:200px;background-color:#090;}

#two{width:300px;height:200px;background-color:#F00;}

</style>

</head>

<body>

<div id="one">   

    </div>

    <div id="two">  

    </div>

<span>

    你好

    </span>    

    <span>

    Hello

    </span>

</body>

5、

<style type="text/css">

table{border:#090 2px solid; witdh:500px;height:300px}

 

td{border-color:#33c;border-width:2px;border-style:solid}

 

.tdStyle{border-left:#f03 5px double}

</style>

</head>

<body>

<table>

    <tr>

        <td>nihao</td><td class="tdStyle">hello</td>

        </tr>

        <tr>

        <td>dajiahao</td><td>tahao</td>

        </tr>

    </table>

</body>

6、

<style type="text/css">

table{ border:#9F6 20px inset;margin-top:0px}

img{margin-top:0px;}

</style>

</head>

<body>

<table align="center">

    <tr>  

        <td>            

                <img src="../../picture/劍聖.jpg"  width="640"/>       

            </td>    

        </tr> 

    </table>

</body>

7、

<style type="text/css">

/* 超鏈接 偽類*/

a:link{color:#F00;text-decoration:none;}

a:hover{color:#F60;text-decoration:underline; font-size:18px}

a:active{color:#FF0;}

a:visited{color:#0F0}

</style>

</head>

<body>

<a href="#" >汪汪汪</a>

</body>

8、

<style type="text/css">

font,p,span{ font-size:24px; font-family:Verdana, Geneva, sans-serif; color:#0C3}

font,#classstyle,.idstyle{font-size:36px}

p span{font-size:48px}

</style>

</head>

<body>

<font >

    這是字體部分

    </font>   

    <p class="idstyle">

    這是段落部分

    </p>  

    <p >

    這是段落部分

    </p>

    <span>

    這是區間部分

    </span>

    <span id="classstyle">

    id和區間搞反了！

    </span>

    <p>

        <span>

            這是區間部分

        </span>

</p>

</body>

9、

<style type="text/css">

li{ list-style:none;float:left; padding-left:5px}

</style>

</head>

<body>

<ul>  

    <li>

        相冊

        </li>

        <li>

        |

        </li>

        <li>

        留言板

        </li>

        <li>

        |

        </li>       

        <li>

        說說

        </li>

        <li>

        |

        </li>

        <li>

日誌        

        </li>

        <li>

        |

        </li>

       

        <li>

        個人中心

        </li> 

    </ul>

</body>

10、

<style type="text/css">

li{list-style-image:url(../../picture/arrow3.png)}

</style>

</head>

<body>

 <ul>

 <li>

    lifei

 </li>

    <li>

    jiyongc

 </li>    

 </ul>

</body>

 


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

-Advertisement-
Play Games
更多相關文章
  • iOS開發之應用儲存（沙盒機制）
    iOS開發之應用儲存（沙盒機制） === 目錄 一、沙盒基本機制 二、plist儲存 三、偏好設置 四、NSKeydeArchiver歸檔 多年壓在印象筆記里的一些筆記，整理了下拿出來和大家一起分享吧 一、沙盒基本機制（sandbox） iOS系統相對於Android系統，或者相對於Windows系
  • Android對話框自定義標題
    Android自帶的對話框標題不好看，如果我們需要給彈出的對話框設置一個自己定義的標題，可以使用AlertDialog.Builder的setCustomTitle()方法。 定義一個對話框標題的title.xml文件： <?xml version="1.0" encoding="UTF-8"?>
  • 如何使用dos命令打開當前用戶、當前日期、當前時間以及當前用戶加當前時間？
    1、dos命令安裝mysqld --stall、啟動net start mysql、進入MySQL資料庫mysql -uroot -p後,輸入select user();當前用戶 select current_date();當前日期 select current_time();當前時間 select
  • 如何使用dos命令查看MySQL當前使用的資料庫？
    1、dos命令安裝mysqld --stall、啟動net start mysql、進入MySQL資料庫mysql -uroot -p後,輸入select database(); 如圖：
  • MacOS下Express安裝過程中遇到的問題
    問題描述： 使用nmp install express -g命令全局安裝express後，在終端使用express -V命令可以獲取到express的版本號，但在引用express的項目運行時，會報缺少express的錯誤，如下圖 解決方案： 在配置文件/etc/profile中添加Node的路徑
  • 利用屬性封裝複雜的選項
    1、考慮這樣一個場景。 我們的程式中有一個“選項”視窗，這個視窗包含很多選項。其中有一個選項是單選類型的，用戶可以從N個選項值中選擇一個。 我們需要在用戶單擊“確定”按鈕後把用戶選擇的值保存到文件中，程式下次啟動時再讀取到記憶體中。 2、不好的解決方案 通常情況下，我們會在按鈕單擊事件中寫類似下麵的代
  • 初學HTML 常見的標簽(三) 列表標簽
    第三篇博客, 這次說的是插入鏈接類標簽, 我們平常在網頁中經常能看到藍色的鏈接類標簽, 或者是一張圖片, 一個電郵, 這些都是插入鏈接類的標簽起的作用. <a></a>鏈接標簽 <a>鏈接標簽可實現超鏈接, 它在網頁中是無處不在的, 只要有鏈接的地方, 就會有這個標簽, 它的語法和其他的標簽不太相同
  • AngularJS中的http攔截
    $http服務允許我們與服務端交互，有時候我們希望在發出請求之前以及收到響應之後做些事情。即http攔截。$httpProvider包含了一個interceptors的數組。我們這樣創建一個interceptor。 app.factory('myInterceptor', ['$log', func
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類