樣式常用屬性

来源: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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類