随笔分类 -  CSS

CSS-好玩的样式（用高斯模糊制作平缓突起）
摘要：一、效果图： 应用： 二、上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文
posted @ 2020-07-15 12:39 SCAU-gogocj 阅读(350) 评论(0) 推荐(0)
Day7-JS-flex布局
摘要：（本文参考菜鸟教程，感谢菜鸟教程） 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局” 任何一个容器都可以指定为Flex布局 .box{ display: flex; } .box{ display: inline-flex; } 注意，设为Flex布局以后，子元素 阅读全文
posted @ 2020-06-18 07:56 SCAU-gogocj 阅读(655) 评论(0) 推荐(0)
Day2-CSS- 网页布局
摘要：一、基本知识 1、头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo 2、菜单导航条包含了一些链接，可以引导用户浏览其他页面 阅读全文
posted @ 2020-06-10 22:45 SCAU-gogocj 阅读(144) 评论(0) 推荐(0)
Day2-CSS- CSS计数器
摘要：（本文是查看了 菜鸟教程之后的学习笔记） 感谢菜鸟教程 一、前期基本知识 CSS 计数器使用到以下几个属性： counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content - 插入生成的内容 counter() 或 counters() 函数 阅读全文
posted @ 2020-06-10 22:22 SCAU-gogocj 阅读(147) 评论(0) 推荐(0)
Day2-CSS- 响应式表单实例！
摘要：（本文参考 菜鸟教程 实例并做些许改变） 感谢菜鸟教程 一、效果(这个是在还没缩小的时候，如果是手机或者是放大的话，通过media设计了） 二、知识点 1、可以通过对class命名为 col-25 表示等等要在CSS里面给这个元素定义width为25% 2、把每一个label和input的组合都放进 阅读全文
posted @ 2020-06-10 20:59 SCAU-gogocj 阅读(90) 评论(0) 推荐(0)
Day2-CSS 表单
摘要：（本文为在 菜鸟教程--中学习之后的笔记，感谢菜鸟教程） 知识补充： ①在表单input属性中 placeholder是设置提示文字，而value是初始化文字 ②一般要设置圆角的话都是：border-radius：4px ③如果是在微信小程序中的话，”上交按钮“一般初始化的颜色是 #4caf50 然 阅读全文
posted @ 2020-06-10 17:50 SCAU-gogocj 阅读(235) 评论(0) 推荐(0)
Day2-CSS 属性 选择器
摘要：（本文是参考了 菜鸟教程 的学习笔记） 具有特定属性的HTML元素样式不仅仅是class和id。 注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。 一、下面的例子是把包含标题（title）的所有元素变为蓝色： 属性选择器（当当对属性进行选择，值不同也无 阅读全文
posted @ 2020-06-10 15:32 SCAU-gogocj 阅读(130) 评论(0) 推荐(0)
Day2-CSS- 图像透明/不透明
摘要：（本文是在 菜鸟教程 中学习的学习笔记） 实例一、创建透明图像 - 悬停效果 1、（技）：opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度 IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opa 阅读全文
posted @ 2020-06-10 10:48 SCAU-gogocj 阅读(181) 评论(0) 推荐(0)
Day2-CSS- 图片廊
摘要：一、以下是使用 CSS 创建图片廊： 效果就是“这样的点击图片之后，就可以打开新的页面显示高清图片了” <div class="responsive"> <div class="img"> <a href="../image/view1.jpg" target="_blank"> <img src= 阅读全文
posted @ 2020-06-10 10:18 SCAU-gogocj 阅读(206) 评论(0) 推荐(0)
Day1-CSS 提示工具(Tooltip)
摘要：一、基础提示框(Tooltip) <body style="text-align:center"> <div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div> </body> <style> .tooltip{ p 阅读全文
posted @ 2020-06-09 18:02 SCAU-gogocj 阅读(175) 评论(0) 推荐(0)
Day1-CSS-下拉菜单
摘要：一、CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 1、基本下拉菜单 <div class="dropdown"> <span>鼠标移动到我这！</span> <div class="dropdown-content"> <p>菜鸟教程</p> <p>www.runoob 阅读全文
posted @ 2020-06-09 11:42 SCAU-gogocj 阅读(220) 评论(0) 推荐(0)