前端技术之CSS课程介绍和目标

阳光穿透心脏的1/2处 2023-09-27 15:11 112阅读 0赞

HTML可以让我们实现静态页面效果，但是页面没有炫酷好看的效果，通过CSS技术可以对静态页面进行“装修”，让页面更加好看美观。本套课程了解前端体系方向，为后续深入打下基础。课程通俗易懂，理论结合实战，课堂感染力丰富，轻松掌握必会技能，真正做到学以致用。

**浮动效果**

![bd848db9c96f05f69de998ed8a03bb3b361d01c5_X-Kss-Credential_AKLTU7N1_ODQ4KKf-YhOK9iwg_2F20230228_2FBEIJING_2Fks3_2Fkss4_request_X-Kss-Date_20230228T130839Z_X-Kss-Expires_10800_X-Kss-SignedHeaders_host_response-content-disposition_attachment_3Bfilename_2A_3Dutf-8_27_27WdTXawCZe8sqqLQvu2j8US.png_response-content-type_image_2Fpng_X-Kss-Signature_7a1fd3e0aaf2aa7f8e1b6e9e75d0fd58886770d36c1c3ab4cd73bd2b7d744d36_X-Kss-Algorithm_KSS4-HMAC-SHA256][]

**定位类型**

![9f998ceed15ed60a738603fdd27185256a176c4a_X-Kss-Expires_10800_X-Kss-SignedHeaders_host_response-content-disposition_attachment_3Bfilename_2A_3Dutf-8_27_27bRLvfrmgjKyc867TFW72u3.png_response-content-type_image_2Fpng_X-Kss-Signature_f3d532f9e4681340241af617e6758a42d52fca7fa24003e1241ea0f749376d37_X-Kss-Algorithm_KSS4-HMAC-SHA256_X-Kss-Credential_AKLTU7N1_ODQ4KKf-YhOK9iwg_2F20230228_2FBEIJING_2Fks3_2Fkss4_request_X-Kss-Date_20230228T130839Z][]

**盒子模型**

![compatible][]

### 价值与收获 ###

获取前端技能点：

掌握CSS的基本概念

掌握CSS的使用

掌握CSS选择器，浮动，定位，盒子模型的使用

### 课程内容 ###

CSS
        1.CSS的引入
        2.CSS的三种书写方式
        3.明白学习CSS的重点
        4.选择器_基本选择器
        5.选择器关系选择器
        6.选择器_属性选择器
        7.选择器_伪类选择器
        8.练习百度导航栏
        9.浮动的原理
        10.消除浮动影响
        11.定位_静态定位相对定位
        12.定位绝对定位
        13.定位_固定定位
        14.盒子模型引入
        15.盒子模型代码演示
        16.盒子模型练习题

[bd848db9c96f05f69de998ed8a03bb3b361d01c5_X-Kss-Credential_AKLTU7N1_ODQ4KKf-YhOK9iwg_2F20230228_2FBEIJING_2Fks3_2Fkss4_request_X-Kss-Date_20230228T130839Z_X-Kss-Expires_10800_X-Kss-SignedHeaders_host_response-content-disposition_attachment_3Bfilename_2A_3Dutf-8_27_27WdTXawCZe8sqqLQvu2j8US.png_response-content-type_image_2Fpng_X-Kss-Signature_7a1fd3e0aaf2aa7f8e1b6e9e75d0fd58886770d36c1c3ab4cd73bd2b7d744d36_X-Kss-Algorithm_KSS4-HMAC-SHA256]: https://wpsfile.ks3-cn-beijing.ksyun.com/bd848db9c96f05f69de998ed8a03bb3b361d01c5?X-Kss-Credential=AKLTU7N1__ODQ4KKf-YhOK9iwg%2F20230228%2FBEIJING%2Fks3%2Fkss4_request&X-Kss-Date=20230228T130839Z&X-Kss-Expires=10800&X-Kss-SignedHeaders=host&response-content-disposition=attachment%3Bfilename%2A%3Dutf-8%27%27WdTXawCZe8sqqLQvu2j8US.png&response-content-type=image%2Fpng&X-Kss-Signature=7a1fd3e0aaf2aa7f8e1b6e9e75d0fd58886770d36c1c3ab4cd73bd2b7d744d36&X-Kss-Algorithm=KSS4-HMAC-SHA256
[9f998ceed15ed60a738603fdd27185256a176c4a_X-Kss-Expires_10800_X-Kss-SignedHeaders_host_response-content-disposition_attachment_3Bfilename_2A_3Dutf-8_27_27bRLvfrmgjKyc867TFW72u3.png_response-content-type_image_2Fpng_X-Kss-Signature_f3d532f9e4681340241af617e6758a42d52fca7fa24003e1241ea0f749376d37_X-Kss-Algorithm_KSS4-HMAC-SHA256_X-Kss-Credential_AKLTU7N1_ODQ4KKf-YhOK9iwg_2F20230228_2FBEIJING_2Fks3_2Fkss4_request_X-Kss-Date_20230228T130839Z]: https://wpsfile.ks3-cn-beijing.ksyun.com/9f998ceed15ed60a738603fdd27185256a176c4a?X-Kss-Expires=10800&X-Kss-SignedHeaders=host&response-content-disposition=attachment%3Bfilename%2A%3Dutf-8%27%27bRLvfrmgjKyc867TFW72u3.png&response-content-type=image%2Fpng&X-Kss-Signature=f3d532f9e4681340241af617e6758a42d52fca7fa24003e1241ea0f749376d37&X-Kss-Algorithm=KSS4-HMAC-SHA256&X-Kss-Credential=AKLTU7N1__ODQ4KKf-YhOK9iwg%2F20230228%2FBEIJING%2Fks3%2Fkss4_request&X-Kss-Date=20230228T130839Z
[compatible]: https://ksc-bj.ag.wps.cn/api/object/2_76da1fee12594aa08e64c4a3690eca84/compatible