- 博客(14)
- 收藏
- 关注
原创 综合案例(体育新闻)-CSS字体、外观属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { font-size: 16px; } /* h1 { font: normal 400 30px "宋体" } */ .title { font-size: 30px; font-we
2021-10-29 22:30:00
180
原创 表格+表单+列表综合案例
1、表格+表单+列表综合案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>青春</title> </head> <body> <table width="600" align="center"> <caption><h3>青春不常在</h3></caption&
2021-09-30 21:00:00
279
原创 清除浮动的方法
1.额外标签法;2.父级添加overflow属性方法;3.使用after伪元素清除浮动;4.使用双伪元素清除浮动。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* .clear { clear: both; } */ /* 使用after伪元素清除元素 */ /*
2020-05-11 21:46:40
159
原创 浮动元素与父盒子、兄弟盒子的关系
1.浮动元素与父盒子的关系:子盒子的浮动参照父盒子对齐;不会与父盒子的边框重叠,也不会超过父盒子的内边距。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .father { width: 500px; height: 500px; background-color: pink
2020-05-11 21:00:14
1185
原创 浮动+小米案例+导航栏案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .one, .three { width: 200px; height: 200px; background-c...
2020-05-05 22:32:26
514
原创 新闻列表案例(盒子)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding:0; } li { list-style: none; ...
2020-05-04 17:03:53
474
原创 圆角边框 盒子阴影
盒子阴影box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;注:水平阴影:越大越右;垂直阴影:越大越下;模糊距离(虚实):越大越模糊;内外阴影:默认外阴影(不用写) 内阴影inset<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t...
2020-05-03 20:56:49
124
原创 外边距合并
1、相邻块元素垂直合并:解决:尽量只给一个盒子添加margin值。2、嵌套块元素垂直外边距的合并:若父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。解决:为父元素定义上边框(透明)border-top;为父元素定义上内边距padding-top;为父元素添加overflow:hidden;<!DOCTYPE html>&l...
2020-05-03 19:12:16
178
原创 外边距( 清除元素的默认内外边距 块级盒子水平居中 插入图片和背景图片区别)
块级盒子水平居中左右外边距设置为auto<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* 清除盒子默认的内外边距 */ * { margin: 0; paddin...
2020-05-03 18:58:47
591
原创 新浪导航栏案例(盒子)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <base target="_blank" /> <style> * { margin: 0; padding: 0; ...
2020-05-03 15:58:18
1037
原创 内边距padding 内盒尺寸计算 padding不影响盒子大小情况
内边距padding简写:1个值 ,上下左右内边距;2个值 ,上下 左右;3个值 ,上 左右 下;4个值 上 右 下 左(顺时针)。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <styl...
2020-04-30 16:58:22
1611
原创 盒子边框 表格的细线边框
表格的细线边框:表格cellspacing="0"会重叠,使边框变粗,设置table { border-collapse: collapse;}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> ...
2020-04-30 15:25:41
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人