**CSS定义网页样式** ```

My First CSS Example

This is a paragraph.

``` > 运行结果： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200512-1589297550229) **CSS中的选择器p** ```

Hello World!

These paragraphs are styled with CSS.

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200512-1589297749391) **id选择器** ```

Hello World!

These paragraphs are styled with CSS.

``` **class类选择器** ```

Hello World!

These paragraphs are styled with CSS.

``` **通用选择器** ```

Hello World!

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

Me too!

And me!

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589450716483) **分组选择器** ```

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

Me too!

And me!

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589450997904) **盒子模型** ```

Demonstrating the Box Model

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

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

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589451090834) **CSS链接** ```

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 ahter a:hover in the CSS definitionin order to be effective.

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589466549261) **CSS表单** ```

Using CSS to style an HTML Form

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589467009919) **给输入框添加图片或图标** ```

Input with icon:

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589467905812) **给搜索输入框添加动画** ```

Animated search input:

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589468036610) **下拉列表菜单加样式** ```

A styled select menu.

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589468140071) **CSS布局** ```

The display Property

display: inline

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

display: inline-block

display: block

``` > 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589468216868) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200514-1589468230398)

“Web开发基础”实验报告