随笔分类 -  CSS

CSS动态伪类
摘要：伪类 一、超链接伪类 伪类 说明 :link 指代用作超链接的锚记（即具有href属性），而且尚未访问的地址 :visited 指代指向已访问地址的超链接。处于安全考虑，能应用到已访问链接上的样式十分有限。 二、用户操作伪类 伪类 说明 :focus 指代当前获得输入焦点的元素，即可以接收键盘输入或 阅读全文
posted @ 2021-03-08 13:15 Mr-Yao 阅读(315) 评论(0) 推荐(0)
CSS选择器
摘要：CSS选择器 一、元素选择符 html{color: black;} h1{color: gray;} h2{color: silver}; 二、群组选择符 h2, p{color: gray;}; 三、通用选择符 *{color: red}; 四、类选择符 <p class="one" class 阅读全文
posted @ 2021-03-07 20:40 Mr-Yao 阅读(63) 评论(0) 推荐(0)
CSS绝对定位实战
摘要：效果： 源码： <!DOCTYPE> <html> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> < 阅读全文
posted @ 2020-05-21 23:55 Mr-Yao 阅读(155) 评论(0) 推荐(1)
CSS搜索框
摘要：源码： <!DOCTYPE> <html> <head> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } header { font-family: helvetica, arial, sans- 阅读全文
posted @ 2020-05-20 18:38 Mr-Yao 阅读(482) 评论(0) 推荐(0)
CSS下拉菜单
摘要：一级菜单 二级菜单 三级菜单 源码： <!DOCTYPE> <html> <head> <meta charset="utf-8"> <style type="text/css"> /*去掉默认的内边距和外边距*/ .multi_drop_menu * { margin: 0; padding: 0 阅读全文
posted @ 2020-05-20 00:45 Mr-Yao 阅读(233) 评论(0) 推荐(0)
CSS横向菜单
摘要：源码： <!DOCTYPE> <html> <head> <meta charset="utf-8"> <style type="text/css"> /*去掉默认的内边距和外边距*/ * { margin: 0; padding: 0; } /*设置菜单的大小和位置*/ .list1 ul { m 阅读全文
posted @ 2020-05-19 19:30 Mr-Yao 阅读(392) 评论(0) 推荐(0)
CSS纵向菜单
摘要：代码如下 <!DOCTYPE> <html> <head> <meta charset="utf-8"> <style type="text/css"> /*去掉默认内边距和外边距*/ * { margin: 0; padding: 0; } /*设置菜单的大小和位置*/ .list1 ul { w 阅读全文
posted @ 2020-05-19 19:04 Mr-Yao 阅读(479) 评论(0) 推荐(0)
CSS（行内样式，嵌入样式，链接样式）
摘要：样式表（Style Sheets） 为了设计出精美的页面，你需要许多不同的CSS样式。CSS样式的集和组成了样式表。样式可以是内部或者外部的两种类型，这取决于样式表是位于网页本身还是位于链接到网页的单独文件中。 链接样式 大多数情况下，链接样式表是最佳的选择。因为它使网页的构建更加简单，网页的加载更 阅读全文
posted @ 2020-05-18 13:56 Mr-Yao 阅读(940) 评论(0) 推荐(0)