随笔分类 -  html+css

1 2 下一页

主要用于总结知识点，案例及实战锦集
day7 09 拼出自己名字
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-31 15:06 竹石君 阅读(216) 评论(0) 推荐(0)

day7 07 溢出文字部分显示省略号
摘要：主要是以下三步： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA- 阅读全文

posted @ 2020-01-23 16:53 竹石君 阅读(158) 评论(0) 推荐(0)

day7 06 vertical-align 垂直方向对齐
摘要：1.vertical-align:bottom 文字与图片底部对齐； 2.vertical-align:baseline 文字与图片基线对齐； 3.vertical-align:middle 文字与图片居中对齐； 4.vertical-align：top 文字与图片顶部对齐； 1.vertical- 阅读全文

posted @ 2020-01-23 16:36 竹石君 阅读(216) 评论(0) 推荐(0)

day7 03 轮廓线
摘要：以下介绍轮廓线： 1.表单的边框称为轮廓 2.resize: none; 防止拖拽 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc 阅读全文

posted @ 2020-01-23 15:03 竹石君 阅读(150) 评论(0) 推荐(0)

day7 03 overflow溢出
摘要：以下介绍overflow的常用方法： 1.overflow：hidden 溢出隐藏； 2.overflow：scroll 出现滚动条； 3.overflow：auto 自动调整格式； <html lang="en"> <head> <meta charset="UTF-8"> <meta name= 阅读全文

posted @ 2020-01-23 12:05 竹石君 阅读(464) 评论(0) 推荐(0)

day7 02 土豆做法
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-23 11:53 竹石君 阅读(139) 评论(0) 推荐(0)

day7 01 显示与隐藏
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-23 10:47 竹石君 阅读(108) 评论(0) 推荐(0)

day6 19 一个有趣的例子
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-22 17:11 竹石君 阅读(113) 评论(0) 推荐(0)

day6 18 z-index层叠次序
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-22 16:51 竹石君 阅读(106) 评论(0) 推荐(0)

day6 固定定位与模式转换
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-20 22:03 竹石君 阅读(134) 评论(0) 推荐(0)

day6 固定定位 fixed
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=" 阅读全文

posted @ 2020-01-20 20:16 竹石君 阅读(126) 评论(0) 推荐(0)

day6 淘宝定位
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-20 19:59 竹石君 阅读(127) 评论(0) 推荐(0)

子绝父相-哈根达斯例子
摘要：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl 阅读全文

posted @ 2020-01-19 20:14 竹石君 阅读(320) 评论(0) 推荐(0)

day6 相对定位：position:relative
摘要：相对定位：position:relative 特点：a.相对于自己原来位置的定位，以自己的左上角为基准。 b.相对定位原来的位置仍然算位置，不会出现浮动现象。 以下为初始位置：（可以看出设置margin和position的区别） 效果图如下： 设定相对定位之后的效果图： top设置相对定位，bott 阅读全文

posted @ 2019-09-25 17:50 竹石君 阅读(313) 评论(0) 推荐(0)

day6 云道页面 知识点梳理（1）
摘要：关于块级元素、行内元素、行内块元素的梳理 （1）块级元素 特点： a.可以设置宽高,行高,外边距和内边距 b.块级元素会独占一行 c.宽度默认是容器的100% d.可以容纳内联元素和其他的块级元素 举例：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> （2）行内元素:不占有独立 阅读全文

posted @ 2019-09-23 21:52 竹石君 阅读(272) 评论(0) 推荐(0)

认识内边距
摘要：效果图如下： 要搞清以下概念： 1.text-align：表示文字在盒子里水平位置； 2.line-height：行距，表示文字在盒子里垂直距离； 3.padding：表示边框与文字之间的距离。 4.span 是行内元素，无法设置宽和高；div是块级元素可以设置宽和高。 div 设置为 displa 阅读全文

posted @ 2019-07-23 17:27 竹石君 阅读(253) 评论(0) 推荐(0)

表格细边框
摘要：主要是学习合并单元格边框，要对已学的内容不断梳理和复习。 阅读全文

posted @ 2019-07-23 16:40 竹石君 阅读(156) 评论(0) 推荐(0)

border 边框
摘要：边框初步认识，定义大小、样式、颜色。 阅读全文

posted @ 2019-07-21 11:38 竹石君 阅读(197) 评论(0) 推荐(0)

类选择器练习：Google 案例
摘要：效果图如下： 注意点： 标签选择器和类选择器的区别 阅读全文

posted @ 2019-07-21 10:23 竹石君 阅读(410) 评论(0) 推荐(0)

导航栏制作
摘要：实现效果如下: 注意点： 1.background image :url()，相对路径，文件夹名称最好用英文。 2.选择器的使用； 3.文本居中对齐，text-align 4.行内元素 display:inline-block 阅读全文

posted @ 2019-07-21 09:30 竹石君 阅读(187) 评论(0) 推荐(0)

1 2 下一页