首页 > 作文

第四次web前端学习笔记

更新时间:2023-04-07 17:35:55 阅读：评论：0

学习目标：

掌握css背景图片和浮动样式

学习内容：

1、 css的背景图片 2、 css的浮动定位

学习时间：

2021年1月10日

学习产出：

1、技术笔记 1 遍 2、CSDN 技术博客 1 篇

css的背景图片

<!DOCTYPE html><html><head><meta chart="utf-8"><title></title><style type="text/css"> body{  width: 100%; height: 500px; /* 添加背景图片 url：统一资源定位符，需要指定路劲 none 背景图片默认会在水皮和垂直方向重复出现，这么效果称为墙纸效果 */ /* background-image: url(img/2.jpg); */ /* 设置背景图的平铺效果background-repeat 属性值：repeat-x水平方向重复出现 repeat-y 垂直方向重复出现 no-repeat 仅出现一次 */ /* background-repeat: no-repeat; */ padding: 0; margin: 0; } .airplane{  width: 100%; /* 使用padding-top喀斯特地貌形成原因来撑起容器的高度 （容器高度=高/宽*100%） */ padding-top: 50%; margin: 0 auto; background-image: url("//img.58cdn.com.cn/ui6/my/images/reg-bg.png"); background-repeat: no-repeat; /* 默认填充满屏幕 */ background-size: 100%; /* 设置背景图的位置固定 */ background-attachment: fixed; /* 调整图片的位置 */ background-position: right; } /* 图片位置的调试 .important{ background-image: url(img/2.jpg); background-repeat: no-r优秀共产党员评选epeat; width: 600px; height: 400px; background-position: top; } */ </style></head><body><div class="airplane"></div><div class="important社会治安综合治理工作制度"></div></body></html>

css的浮动定位

<!DOCTYPE html><html><head><meta chart="utf-8"><title></title><style type="text/css"> /* 流定位：默认的定位方式，页面中的元素按照块元素和内联元素的方式排列 块元素：从上到下 内联元素：从左到右水平排列 浮动定位：浮动定位会脱离文档流 */ #d0,p{  width: 200px; border: 1px solid red;; } #d1,#d2,#d3{  width: 100px; height: 100px; margin: 5px; border: 1px solid red; } #d1,#d2,#d3{  /* 开启浮动定位 浮动定位只能左浮动和右浮动，浮动时不能超过父元素的边框 */ float: left; } </style></head><body><div id="d0"><div id="d1">d1</div><div id="d2">d2</div><div id适的文言文意思="d3">d3</div></div><p>定位时观察我的位置</p></body></html>