![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589296691733) ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589296703081) ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589296712773) ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589296723233) ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589296734402) ```

My First CSS Example

This is a paragraph.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589297035919) ```

Hello world!

These paragraghs are styled with CSS.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589297234866) ```

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589297672702) ```

Demonstrating the Box Model！

The CSS model is essentially a box that wraps around every HTML elemnt. It consists of :borders,padding, margins,and the actual content.

This text is the content of the box. We have sdded ax50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamce laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate esse cillum dorlore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt qui officia deserunt mollit anim id est laborum.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589298364157) ```

This is a link

Note:a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note:a:active MUST come after a:hover in the CSS definition in order to be effective.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589298852519) ```

Link Button

A link styled as a button:

This is a link ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200512-1589299134529) ```

Using CSS to style an HTML Form

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589299207257) ```

A full-width input field:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589334316890) ```

Padded text fields

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589335322893) ```

Text fields with borders

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589335278908) ```

Text fields with borders

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589335524948) ```

Input with icon:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589336072938) ```

Animated search input:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589336325569) ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589336318201) ```

A Style select menu.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589336589609) ```

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing wlit. Vestibulum consequat scelerisque sit amet consequat. Aliquam erat volutpat. Aliquamveneatisgravide nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

display: block

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370464-20200513-1589337261340)

“Web开发基础”实验报告