随笔分类 -  html+css

主要用于总结知识点,案例及实战锦集
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)