03 2021 档案

CSS样式-圆角文字边框
摘要：原理： 1.只有一个比较长的背景图片 2.用两个元素，一个表示左边，一个表示右边 3.长度自适应，撑开相应的宽度 练习： <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> b 阅读全文
posted @ 2021-03-29 23:31 #Friday 阅读(246) 评论(0) 推荐(0)
CSS样式-CSS精灵图，CSS雪碧图
摘要：原理：当网页需要多张背景的小图时，将多张背景图合并为一张大图，一次请求拉到本地，然后不同元素使用CSS的background-position进行定位。 优点： 减少请求次数，缩短页面加载时间 <!DOCTYPE html> <html lang="en"> <head> <title>Docume 阅读全文
posted @ 2021-03-28 22:50 #Friday 阅读(66) 评论(0) 推荐(0)
CSS样式-文字标题过长的处理
摘要：一、white-space: nowrap;强制不折行，除非遇到<br>标签 没使用之前的效果： <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> li { list-sty 阅读全文
posted @ 2021-03-28 18:58 #Friday 阅读(322) 评论(0) 推荐(0)
CSS样式-如何消除img下的空白
摘要：默认情况下，图片是以基线对齐的，也就是下方会留有一条白色的边 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { border: 2px solid #000; } 阅读全文
posted @ 2021-03-28 18:07 #Friday 阅读(255) 评论(0) 推荐(0)
CSS样式-轮廓
摘要：outline： 0 none： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view 阅读全文
posted @ 2021-03-28 16:03 #Friday 阅读(59) 评论(0) 推荐(0)
CSS样式-鼠标样式
摘要：cursor： default（缺省状态） <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; backg 阅读全文
posted @ 2021-03-28 15:26 #Friday 阅读(60) 评论(0) 推荐(0)
CSS样式-溢出
摘要：overflow： visible ：不剪切内容，不出滚动条（缺省） <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { width: 200px; height: 阅读全文
posted @ 2021-03-28 14:31 #Friday 阅读(105) 评论(0) 推荐(0)
CSS样式-土豆视频页面.html
摘要：方式一： <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> .container { width: 212px; height: 318px; position: relat 阅读全文
posted @ 2021-03-28 14:28 #Friday 阅读(362) 评论(0) 推荐(0)
CSS样式-显示（完善）
摘要：CSS显示： 一、display：none <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; } .re 阅读全文
posted @ 2021-03-21 00:10 #Friday 阅读(55) 评论(0) 推荐(0)
CSS样式-z-index练习
摘要：练习题：当鼠标hover到每个div上时，div的边框颜色变为淘宝红 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> .container { width: 1010px; 阅读全文
posted @ 2021-03-20 21:55 #Friday 阅读(67) 评论(0) 推荐(0)
CSS样式-叠放次序: z-index
摘要：作用：用于设定重叠元素的覆盖关系的； 设定方式：设定为一个数值，没有单位； 特点： 1.数值越大，越靠上，可以覆盖数值小的元素； 2.如果没有预先设定z-index，那么缺省是0，后定义的元素在新定义的元素之上（是指在html中的定义）。 <!DOCTYPE html> <html lang="en 阅读全文
posted @ 2021-03-20 21:50 #Friday 阅读(122) 评论(0) 推荐(0)
CSS样式-固定定位以及能脱离标准流的总结
摘要：fixed：固定定位 1.脱离标准流，不和滚动条一起滚动 2.偏移起作用：top right bottom left 3.不受父元素的影响（即使父元素的定位是relative），只依据浏览器的可视区定位。 4.当一个元素被设定为固定定位时，会产生模式转换，转化为行内块元素，所以如果开始没有设定宽度， 阅读全文
posted @ 2021-03-20 16:11 #Friday 阅读(294) 评论(0) 推荐(0)
CSS样式-position为absolute的情况下如何居中
摘要：第一步：设定top，left为50% 第二步：通过margin-left，margin-top设定负值 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { widt 阅读全文
posted @ 2021-03-14 16:00 #Friday 阅读(617) 评论(0) 推荐(0)
CSS样式-position（父r子a）的练习
摘要：<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { width: 674px; height: 674px; border: 1px solid #ccc; mar 阅读全文
posted @ 2021-03-14 15:42 #Friday 阅读(300) 评论(0) 推荐(0)
CSS样式-定位
摘要：定位方式+偏移： static：所有不设定定位的元素，定位方式都是static（缺省） <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> .div1 { width: 100px; height: 100px; backg 阅读全文
posted @ 2021-03-11 23:34 #Friday 阅读(118) 评论(0) 推荐(0)
CSS样式-清除浮动
摘要：一、为什么要清除浮动？ 在某些情况下，我们不能设置父元素的高度，但是所有的子元素都是浮动的（脱标），父元素的高度为0，父元素后面的元素会上提。 二、清除浮动的四种方法： 1.额外标签法： a.在最后增加一个额外的div，用clear: both去掉浮动属性 b.W3C推荐的一种方法 c.增加了一个莫 阅读全文
posted @ 2021-03-07 00:01 #Friday 阅读(100) 评论(0) 推荐(0)
CSS样式-实战练习2
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-03-06 18:51 #Friday 阅读(108) 评论(0) 推荐(0)