木子小世界的博客_前端开发

v12_定位

定位静态定位static 默认值相对定位relative ：相对自己原始位置且原始位置仍空置留未脱离绝对定位absolute ：相对于界面脱离原始位置固定定位fixed：类似广告窗口，固定定位相对位置是当前浏览器界面如果写成绝对定位是针对当前页绝对定位，会随着进度条滚动而变动粘性定位sticky：吸顶效果模块栏的置顶效果<style> div{

绝对定位

相对定位

粘性定位

静态定位

原创 2023-01-04 15:00:21 125 阅读

v11_元素显示类型

元素类型分类块元素默认有标识 display:block/list-item行内(内联)元素默认标识 display:inline span行内元素可设置左右边距不可设置上下边距行内块元素 inline-block元素类型互相转换案例情景，网站首页横向模块，将链接转换成行内块展示... a{ background-color: black;

块元素

行内元素

行内块

原创 2023-01-04 11:17:45 61 阅读

v10_溢出属性

溢出属性overflow : auto... .b1{ width: 200px; height: 100px; background-color: bisque; /* overflow: visible; 默认值溢出内容显示在元素之外 */ /* overflow:

溢出

溢出隐藏

溢出省略号

溢出滚动显示

原创精选 2023-01-04 09:41:12 287 阅读

v9_盒子模型

内边距 padding.b1{ width: 500px; height: 100px; background: darksalmon; text-align: center; padding: 10px 20px 30px 40px; /*内边距 1.一个值

外边距

内边距

边框

原创 2022-12-29 15:35:49 286 阅读

v8_浮动

浮动作用 float: left right none定义网页中其他文本如何环绕该元素显示让竖着的内容横着来清浮动，又称高度塌陷： clear: none允许 left/ right /both不允许左/右/有浮动原本块浮动后下边的块会往界面上边移动，如此做会导致下边的块内容被漂浮块覆盖，想不被覆盖，添加清浮动，clear设置需添加在被覆盖的块上清除浮动只是改变元素

清除浮动

浮动

float

原创 2022-12-29 15:06:48 282 阅读

v7_列表、背景属性

列表前样式属性定义列表符合样式list-style-type：none去掉符号 disc 实心 circle空心 square实心方块列表前边用图片符号list-style-image:url(图片地址)设置符号的放置位置list-style-position:outside/inside以上可简写list-style:none a.img inside; none去掉符号

列表属性

图片背景属性

样式属性

原创 2022-12-29 15:01:47 328 阅读

v6_css文本属性

字体大小 font-size：px 浏览器默认16 设计图常用12字体 font-family：可同时设定多个字体，逗号分隔，直到识别匹配字体颜色color：3种可表示：颜色英文 16进制写法 rgb(0,0,255)调比例加粗 font-weight倾斜font-style文本水平对齐 text-align：多行文本也适用，center多行全居中显示 justify两端对齐行高 line-

css

文本属性

原创 2022-12-29 14:43:38 318 阅读

v5_选择器

选择器：要使用css对HTML页面种的元素实现一对一，一对多，多对一的控制元素选择符、类型选择符即使用结构种元素名称作为选择符例如div p img span h1.....div{ [对div一类型做设置 ]

选择器

类选择器

伪类选择器

超链接标签各环节状态

原创 2022-10-08 10:35:41 326 阅读

v4_表单标签

表单作用：收集用户信息 <form actinotallow="https://www.baidu.com" method="post"> 账号：<input type="text" placeholder="用户名" name="username"> <br> 密码：<in

css

表单

行内标签

优先级

原创 2022-10-08 10:13:13 125 阅读

v3_表格

建表格<table>  <tr>  <td>1</td>  <td>2</td> </tr> </table>表格table属性宽

建表

table

tr

td

表格合并

原创 2022-10-08 09:52:37 309 阅读

v2_列表、图片、超链接标签

列表无序列表 <ul type='circle'> <li>aaaa</li> <li&

鼠标悬停

超链接

列表

图片

原创 2022-09-08 12:26:31 531 阅读

v1_初识html5，vscode、文本标签、特殊符号

前端小白报道做了几年运维，体验了7*24小时的应急，明白了整个项目的步骤逻辑，理解了整个系统框架，结合之前的了解与思维，决定学习前端，开始新的篇章。WEB网页的组成部分HTML--结构 CSS--表现 JS--行为趁手兵器-写前端代码的工具Sublime Text webstorm HBuilderX &nbs

html

前端技术

原创 2022-09-07 10:17:21 441 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

tianyi_666的博客