web前端基础 - 随笔分类(第2页) - 2237774566

绝对定位

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red 阅读全文

posted @ 2021-07-06 10:53 2237774566 阅读(47) 评论(0) 推荐(0)

相对定位

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red 阅读全文

posted @ 2021-07-05 21:54 2237774566 阅读(93) 评论(0) 推荐(0)

开班信息练习

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } /*统一页面中字体*/ body{ 阅读全文

posted @ 2021-07-05 21:13 2237774566 阅读(41) 评论(0) 推荐(0)

清除浮动（塌陷问题最终解决方案）

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: #BB 阅读全文

posted @ 2021-07-05 15:45 2237774566 阅读(155) 评论(0) 推荐(0)

导航条练习

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条练习</title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } /*设置ul*/ .nav 阅读全文

posted @ 2021-07-05 15:42 2237774566 阅读(36) 评论(0) 推荐(0)

高度塌陷问题及解决方法

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ border: 10px solid red; /* 在页面中，元素都有一个隐含属性叫Block F 阅读全文

posted @ 2021-07-05 14:55 2237774566 阅读(212) 评论(0) 推荐(0)

简单布局

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定布局和自适应布局</title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } /*头部*/ . 阅读全文

posted @ 2021-07-05 11:47 2237774566 阅读(22) 评论(0) 推荐(0)

浮动二

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动二</title> <style type="text/css"> .box1{ /* 文档流中，子元素的宽度默认占父元素的全部 */ /* width: 100px; */ 阅读全文

posted @ 2021-07-05 11:12 2237774566 阅读(24) 评论(0) 推荐(0)

浮动一

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 600px; height: 200px; background-color: red 阅读全文

posted @ 2021-07-05 10:44 2237774566 阅读(34) 评论(0) 推荐(0)

文档流

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ background-color: #BBFFAA; padding-left: 200px; } 阅读全文

posted @ 2021-07-04 18:19 2237774566 阅读(30) 评论(0) 推荐(0)

overflow

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #BBF 阅读全文

posted @ 2021-07-04 15:21 2237774566 阅读(108) 评论(0) 推荐(0)

display和visibility

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ background-color: #BBFFAA; /* 将一个内联元素变成块元素通过display样式阅读全文

posted @ 2021-07-04 15:08 2237774566 阅读(57) 评论(0) 推荐(0)

内联元素盒子模型

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ background-color: #BBFFAA; } .box1{ width: 100px; h 阅读全文

posted @ 2021-07-03 20:56 2237774566 阅读(50) 评论(0) 推荐(0)

默认浏览器样式

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除浏览器默认样式 */ *{ margin: 0; padding: 0; } .box1{ width: 阅读全文

posted @ 2021-07-03 20:38 2237774566 阅读(38) 评论(0) 推荐(0)

垂直外边距的重叠

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color:red 阅读全文

posted @ 2021-07-03 20:37 2237774566 阅读(34) 评论(0) 推荐(0)

外边距

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #BB 阅读全文

posted @ 2021-07-03 20:22 2237774566 阅读(46) 评论(0) 推荐(0)

盒子模型（边框）

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ /* width内容区宽度 height 内容区高度 width和height只是设置盒子内容区大小阅读全文

posted @ 2021-07-01 21:14 2237774566 阅读(75) 评论(0) 推荐(0)

文本样式

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本标签及样式</title> <style type="text/css"> /* text-transform可以用来设置文本大小写可选值： none 默认值，不做任何处理阅读全文

posted @ 2021-07-01 20:03 2237774566 阅读(92) 评论(0) 推荐(0)

行高

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*css中没有直接设置行间距的方式通过设置行高进行设置行间距 line-height设置行高行间距 = 行高阅读全文

posted @ 2021-07-01 16:43 2237774566 阅读(124) 评论(0) 推荐(0)

字体其他样式（字体二）

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体其他样式</title> <style type="text/css"> .p1{ color: #FF0000; font-size: 30px; font-family: 阅读全文

posted @ 2021-07-01 15:01 2237774566 阅读(79) 评论(0) 推荐(0)

2237774566

随笔分类 - web前端基础

公告