## css介绍代码： ```

Welcome to My Homepage

Use the menu to select different Stylesheets

Stylesheet 1
Stylesheet 2
Stylesheet 3
Stylesheet 4
No Stylesheet

Same Page Different Stylesheets

This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4.

No Styles

This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:
No Stylesheet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200513-1589337842074) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200513-1589337862423) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200513-1589337882683) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200513-1589337898055) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200513-1589337922570) ## css语法代码： ```

Hello World!

These paragraphs are styled with CSS.

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589645827091) ## css选择器 ## 元素选择器 id选择器 class类选择器代码： ```

Hello World!

Hello

World

This paragraph refers to two classes.

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589647509311) ### css通用选择器代码： ```

Hello World!

Hello

World

This paragraph refers to two classes.

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589647641726) ### 分组选择器代码： ```

hello

world

hello

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589647810519) ### css注释代码： ``` /* This is a multi-line comment */ ``` ### CSS盒子模型（Box Model）代码： ```

This text is the content of the box.

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589648333983) ### css链接代码： ```

This is a link

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589648925639) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589648934389) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589648991742) ### css表单代码： ```

Using CSS to style an HTML Form

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589649129010) ### 装饰 input 输入框 padding输入框给输入框加边框给输入框添加颜色聚焦输入框代码： ```

A full-width input field:

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589650373194) ### 给输入框添加图标或图片给搜索输入框添加动画代码： ```

Input with icon:

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589650926361) ### 下拉列表菜单加样式代码： ```

A styled select menu.

``` 截图： ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589650995901) ### CSS布局 display: inline-block 代码： ```

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/uid1374698-20200517-1589651090742) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374698-20200517-1589651099942)

Welcome to My Homepage

Same Page Different Stylesheets

No Styles

Side-Bar

hello

world

Using CSS to style an HTML Form

The display Property

display: inline

display: inline-block

display: block

“Web开发基础”实验报告