九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

Headline with the h2 Element

標(biāo)題                 元素

Inform with the Paragraph Element

獲取             段落

Uncomment HTML

刪除注釋

Comment out HTML

注釋掉

Fill in the Blank    with    Placeholder Text

填空                         占位符      文本

Use CSS Selectors to Style Elements

用css選擇器給元素定義樣式

<style>

  h2 {color: blue;}

</style>

h2是一個css選擇器

Use a CSS Class to Style an Element

用       類     定義元素樣式

<style>

  .red-text {

    color: red;

  }

</style>

 類選擇器前面加.

Style Multiple Elements with a CSS Class

用css class給元素附加樣式

Change the Font Size of an Element

改變元素字體尺寸

<style>

  .red-text {

    color: red;

  }

  .p{

    font-size=16px;

    

  }    

</style>

Set the Font Family of an Element

設(shè)置元素字體

h2 {

  font-family: Sans-serif;

}

Import a Google Font

導(dǎo)入谷歌字體

復(fù)制下面的代碼片斷并將其粘貼到你的代碼編輯器的頂部：

<link rel="stylesheet" type="text/css">

Specify How Fonts Should Degrade

說明如何降級字體

p {

  font-family: Helvetica, Sans-Serif;

}

添加圖片

<img src="https://www.your-image-source.com/your-image.jpg">

設(shè)置圖片尺寸

<style>

  .smaller-image {

    width: 500px;

  }

</style>

<img class="smaller-image" src="/images/relaxing-cat.jpg" >

Add Borders Around your Elements 

    邊框

<style>

  .thin-red-border {

    border-color: red;

    border-width: 5px;

    border-style: solid;

  }

</style>

Add Rounded Corners with a Border Radius

給邊框添加圓角 半徑

border-radius: 10px; 50%（圓形圖片）

Link to External Pages with Anchor Elements

鏈接 到  外部    也沒  用   錨     元素

Nest an Anchor Element within a Paragraph

嵌套一個錨元素         在段落里面

Turn an Image into a Link

轉(zhuǎn)換圖片為鏈接

Create a Bulleted Unordered List

創(chuàng)建一個 符號、無序 列表

<ul>

  <li>milk</li>

  <li>cheese</li>

</ul>

Create an Ordered List

有序列表

<ol>

  <li>Garfield</li>

  <li>Sylvester</li>

</ol>

Create a Text Field 

創(chuàng)建文本字段

<input type="text">

你可以用如下方式創(chuàng)建占位符：

Add Placeholder Text to a Text Field

添加占位符到文本框

<input type="text" placeholder="this is placeholder text">

Create a Form Element

使用HTML來構(gòu)建可以跟服務(wù)器交互的Web表單(form)，通過給你的form元素添加一個action屬性來達(dá)到此目的。

action屬性的值指定了表單提交到服務(wù)器的地址。

例如：

<form action="/url-where-you-want-to-submit-form-data"></form>

Add a Submit Button to a Form

<button type="submit">this button submits the form</button>

Use HTML5 to Require a Field 

必填字段

<input type="text" required>

Create a Set of Radio Buttons

創(chuàng)建    一組    單選  按鈕

多選一的場景就用radio button(單選按鈕)

單選按鈕只是input輸入框的一種類型。

每一個單選按鈕都應(yīng)該嵌套在它自己的label(標(biāo)簽)元素中。

注意：所有關(guān)聯(lián)的單選按鈕應(yīng)該使用相同的name屬性。

下面是一個單選按鈕的例子：

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

Create a Set of Checkboxes

復(fù)選框 （label意思是標(biāo)簽）

<label><input type="checkbox" name="personality"> Loving</label>

Check Radio Buttons and Checkboxes by Default

默認(rèn)選項

<input type="radio" name="test-name" checked>

Nest Many Elements within a Single Div Element 

嵌套 更多元素在單個div層元素中

Give a Background Color to a Div Element 

<style>

  .green-background {

  background-color: green;

}

</style>

Use an ID   Attribute to Style an Element 

使用 ID選擇器 賦予 元素樣式

#cat-photo-element {

  background-color: green;

}

Adjusting the Padding of an Element 

調(diào)整          內(nèi)邊距

有三個影響HTML元素布局的重要屬性：padding(內(nèi)邊距)、margin(外邊距)、border(邊框)。

元素的 padding 控制內(nèi)容t和邊框 border 之間的距離。

       margin 控制邊框

Add Different Padding to Each Side of an Element

增加不同方向的距離控制

.green-box {

    background-color: green;

    padding-top: 40px;

    padding-right: 20px;

    padding-bottom: 20px;

    padding-left: 40px;

Use Clockwise Notation to Specify the Padding of an Element 

用  順時針    標(biāo)記法      指定        內(nèi)邊距

padding: 20px 40px 20px 40px;

Inherit Styles from the Body Element

繼承    樣式    從      

Prioritize One Style Over Another

優(yōu)先于

注意：在 HTML 中這些 class 如何排序是無所謂的。

然而，在 <style> 部分中 class 聲明的順序卻非常重要，第二個聲明總是比第一個具有優(yōu)先權(quán)，但是 id 屬性總是具有更高的優(yōu)先級。

Override Class Declarations by Styling ID Attributes

用ID屬性 覆蓋 重寫 class樣式

 id 屬性總是具有更高的優(yōu)先級。

很多情況下，你會使用 CSS 庫，這些庫可能會意外覆蓋掉你自己的 CSS。所以當(dāng)你需要確保某元素具有指定的 CSS 時，你可以使用 !important。 會覆蓋所有樣式

.pink-text {

    color: pink !important;

  }

Use Abbreviated Hex Code

用縮寫16進(jìn)制編碼 #f00 #FF0000 background-color: rgb(255, 165, 0);

Use Responsive Design with Bootstrap Fluid Containers

用 bootstrap框架 進(jìn)行響應(yīng)式設(shè)計

Bootstrap將會根據(jù)你的屏幕的大小來調(diào)整HTML元素的大小 —— 強調(diào) 響應(yīng)式設(shè)計的概念。

通過響應(yīng)式設(shè)計，你無需再為你的網(wǎng)站設(shè)計一個手機版的。它在任何尺寸的屏幕上看起來都會不錯。

你僅需要通過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應(yīng)用中：

<link rel="stylesheet" />

Make Images Mobile Responsive

使圖片響應(yīng) 移動端

<img class="img-responsive" src="/images/running-cat.jpg">

Create a Bootstrap Button

<button class="btn">like</button>

Create a Block Element Bootstrap Button

創(chuàng)建一個塊元素的bootstrap 按鈕

 <button class="btn btn-block">Like</button>

Taste the Bootstrap Button Color Rainbow

品嘗彩色 bootstrap框架按鈕

btn-primary（意思是深藍(lán)色屬性）

<button class="btn btn-block btn-primary">Like</button>

Bootstrap自帶了一些預(yù)定義的按鈕顏色。紅色btn-danger被用來提醒用戶該操作具有“破壞性”

淺藍(lán)色 btn-info 被用在那些用戶可能會采取的操作上

Bootstrap 使用一種響應(yīng)式網(wǎng)格布局——可輕松實現(xiàn)將多個元素放入一行并指定各個元素的相對寬度的需求。Bootstrap 中大多數(shù)的class屬性都可以設(shè)置于 div 元素中。

下面這張圖表顯示了 Bootstraps 的12列網(wǎng)格布局是如何起作用的：

請注意，在這張圖表中，class屬性 col-md-* 正被使用。在這里，md 表示 medium (中等的)，* 代表一個數(shù)字，它指定了這個元素所占的列寬。通過此圖表的屬性設(shè)置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了。

在我們創(chuàng)建的 Cat Photo App 中，將會使用 col-xs-* ，其中 xs 是 extra small 縮寫（應(yīng)用于較小的屏幕，比如手機屏幕），* 是你需要填寫的數(shù)字，代表在一行中,各個元素應(yīng)該占的列寬。

把 Like, Info 和 Delete 三個按鈕一并放入一個 <div class="row"> 元素中；然后，其中的每一個按鈕都需要各自被一個 <div class="col-xs-4">元素包裹。

當(dāng)div 元素設(shè)置了 class 屬性 row 之后，那幾個按鈕便可嵌入其中。

grid 格子  row 行  columns 列

你可以用 span 標(biāo)簽來創(chuàng)建行內(nèi)元素。還記得我們是怎樣使用 .btn-block來創(chuàng)建填滿整行的按鈕嗎？

這張圖展示了 inline 元素與 block-level 塊級元素的區(qū)別：

通過使用 span 元素，你可以把幾個元素放在一起。你甚至可以用此為一個元素的不同部分指定樣式。

把 "Things cats love" 中的 "love" 放到 span 標(biāo)簽下。然后為其添加 text-danger class 來使文字變成紅色。

舉例，"Top 3 things cats hate" 元素的寫法如下：

<p>Top 3 things cats <span class = "text-danger">hate:</span></p>







Add Font Awesome Icons to our Buttons 

給按鈕加 fontawesome圖標(biāo)

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。