书签分享收藏举报版权申诉 / 19

立即下载加入VIP,免费下载

当前位置：首页 > PPT模板 > 商务科技 > CSS初步尝试.docx

CSS初步尝试.docx

文档编号：16845327
上传时间：2023-07-19
格式：DOCX
页数：19
大小：21.13KB

CSS初步尝试.docx

《CSS初步尝试.docx》由会员分享，可在线阅读，更多相关《CSS初步尝试.docx（19页珍藏版）》请在冰点文库上搜索。

CSS初步尝试.docx

CSS初步尝试

1login

用户名:

密码:

2盒子模型

Padding相对于自己向外一般是text

Margin在它自己身上的，margin相对于自己往内

solid;width:

111px;height:

50px;"/>

red;height:

50px;padding-top:

10px;box-sizing:

border-box;">

—-box-sizing:

border-box盒子大小不变化-->

我是div

red;height:

50px;">

hello

blue;z-index;-1;position:

absolute；">

--div里面有元素才能撑起position:

absolute绝对定位位于之上-->

world

3div布局

100px;width:

33%;background:

yellow;position:

absolute;">

100px;width:

33%;background:

blue;float:

right;">

--最开始在右边被挤出去-->

100px;width:

33%;background:

red;float:

right;">

4简单XX界面

DOCTYPEhtml>

搜索设置|登录|登录

—图片p或div统一每个加p标签-->

新闻网页

贴吧知道音乐

图片视频地图

--p文字包含一行div是个盒子-->

--submit是提交写在form里input写在一起-->

--form不用p包含-->

--底下有许多的一块设置-->

百科文库hao123更多>>

把XX设置为主页安装XX浏览器

©right2013Baidu使用XX前必读123123

5登录窗口

DOCTYPEhtml>

--form中可以套table-->

账号

--类属性可以重名-->

密码

--空一列-->

记住我




	忘记密码

6关于浮动和css布局

标准流从左到右从上到下

选择器优先级id>class>标签选择器

100px;width:

100px;background:

red;float:

left;">box1

100px;width:

100px;background:

blue;float:

left">box2

100px;width:

100px;background:

green;float:

left;">box3

--在HTML中，可以通过float属性将块级元素向左或向右浮动，直至其外边缘碰到包含它的元素或另一个浮动元素的边框为止。

多个浮动的元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置。

当float取值为left时表示向左浮动，此时元素会脱离标准文档流，不占文档流中的位置空间。

-->

100px;width:

100px;background:

red;float:

left;">box1

100px;width:

100px;background:

blue;float:

left;position:

relative;left:

10px;top:

20px;">box2

100px;width:

100px;background:

green;float:

left;">box3

--relative原有位置仍然存在设置为相对定位的元素按照标准文档流的规则在网页中排列，但是相对定位的元素可以设置其left、right、top和bottom属性来进行偏移。

偏移时参照该元素在标准文档流中的原位置，偏移后仅在显示上出现了坐标变化，但其在标准文档流中的位置没有发生任何变化。

-->

100px;width:

100px;background:

red;float:

left;">box1

100px;width:

100px;background:

blue;float:

left;position:

absolute;left:

10px;top:

20px;">box2

100px;width:

100px;background:

green;float:

left;">box3

--absolute以页面方式绝对定位绝对定位的元素将脱离标准文档流，挨着，不受标准文档流的限制绝对定位的元素在标准文档流中不占用其空间，不影响标准文档流中的元素，看似悬浮于页面之上如果多个绝对元素出现了重叠，则可以通过设置z-index属性修改他们显示的层次关系，z-index取值大的层会压住z-index取值小的层

-->

DOCTYPEhtml>

100px;width:

100px;background:

red;float:

left;">box1

100px;width:

100px;background:

blue;float:

left;position:

absolute;right:

100px;top:

100px;opacity:

0.3;z-index:

1;">box2

100px;width:

100px;background:

green;float:

left;position:

absolute;top:

100px;right:

120px;z-index:

-1;">box3

--元素可以通过设置left、right、top和bottom属性并以页面为参照来进行偏移，绝对定位的元素在标准文档流中不占用其空间，不影响标准文档流中的元素，看似悬浮于页面之上如果多个绝对元素出现了重叠，则可以通过设置z-index属性修改他们显示的层次关系，z-index取值大的层会压住z-index取值小的层

-->

DOCTYPEhtml>

100px;width:

100px;background:

red;float:

left;position:

fixed;">box1

--固定fixed参照窗口同absolute不占位置-->

100px;width:

100px;background:

blue;float:

left;position:

absolute;right:

100px;top:

100px;opacity:

0.3;z-index:

1;">box2

100px;width:

100px;background:

green;float:

left;position:

absolute;top:

100px;right:

120px;z-index:

-1;">box3

--absolute，right统一浏览器定位-->

2000px;width:

100px;background:

green;float:

left;">box4

100px;width:

100px;background:

red;float:

left;position:

relative;">box10

--relative不覆盖-->

7环绕字体

--一般先写布局先分析风格有那几个部分，完全不同的设置为div单独的分离css，有格式需求的先写出来其他的先不管-->

登陆

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: CSS 初步尝试

冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：CSS初步尝试.docx
链接地址：https://www.bingdoc.com/p-16845327.html

CSS初步尝试.docx

热门标签