• CSS教程:css属性之媒体(Media)类型_CSS教程_CSS_网页制作

    2020-01-16 北海365网小编 技术记录 CSS_网页制作

    CSS教程:css属性之媒体(Media)类型_CSS教程_CSS_网页制作 样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"font-size"属性只对可卷动的媒体类型有效(屏幕)。 声明一个媒体属性可以用@import或@media引入: @import url(loudvoice.css) speech; @media print { /* style sheet for print goes here */ } 也可以在文档标记中引入媒体: <lin...

    707 次 0 条

  • CSS实现鼠标移至图片上显示遮罩层效果_CSS教程_CSS_网页制作

    2019-11-20 北海365网小编 技术记录 CSS_网页制作

    CSS实现鼠标移至图片上显示遮罩层效果_CSS教程_CSS_网页制作 1、将遮罩层html代码与图片放在一个div 我是放在 .img_div里。 <div class="img_div"> <img src="./images/paella-dish.jpg"> <a href="#"> <div class="mask"> <h3...

    782 次 0 条

  • CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)_CSS教程_CSS_网页制作

    2019-11-18 北海365网小编 技术记录 CSS_网页制作

    CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)_CSS教程_CSS_网页制作 效果图   在网上查阅相关资料后,发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现,而没有渐变色边框围绕内容区域进行旋转的效果,于是我做了一个这样的demo供大家参考。 实现原理   首先将内容区域嵌套进一个DIV盒子中并设置overflow:hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度,然后将内容区域居中,这样内容区域和父元素之间就有一个看似是边框的空白区域。 &...

    719 次 0 条

  • 基于html+css做一个好看的可翻转登录注册界面_CSS教程_CSS_网页制作

    2019-11-18 北海365网小编 技术记录 CSS_网页制作

    基于html+css做一个好看的可翻转登录注册界面_CSS教程_CSS_网页制作 做一个好看的可翻转登录注册界面 前言   最近在尝试做网盘,使用的技术栈大概是 .net core + MVC + Mysql + Layui,主要目的是通过这个具体的项目,熟悉熟悉 .net core 开发,.net 的未来就是他了! 我的设想 在完成后端的一部分 建设 之后,我把目光投向了前端——登陆注册,由于这个网盘是用来试手的个人项目,我并不想用曾经用过的制作方式——登录和注册界面分开来做。我试图讲这两个功能合到一个页面...

    1069 次 0 条

  • CSS拾遗之箭头,目录,图标的实现代码_CSS教程_CSS_网页制作

    2019-11-14 北海365网小编 技术记录 CSS_网页制作

    CSS拾遗之箭头,目录,图标的实现代码_CSS教程_CSS_网页制作 1. CSS拾遗之图标 图标有三种制作方法: 图片 css(小箭头用CSS搞定) 自己画font(fontawsome插件) fontawsome插件下载之后,解压,新版的与老版不一样。 2. html文件的目录结构 xxx project - app - s1.html - s2.html - css - commons.css - script - comm...

    949 次 0 条

  • CSS实现半透明边框与多重边框的场景分析_css3_CSS_网页制作

    2019-11-13 北海365网小编 技术记录 CSS_网页制作

    CSS实现半透明边框与多重边框的场景分析_css3_CSS_网页制作 场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border。 半透明边框被主调色影响, 实现的效果为 解决方案: 使用background-clip 属性规定背景的绘制区域,使得绘制区域仅限制在content+padding。 Div { border:10px solid rgba(0,0,0,.5); background: lightblue; background-clip: padding-box;...

    970 次 0 条

  • CSS3 新增选择器的实例_css3_CSS_网页制作

    2019-11-13 北海365网小编 技术记录 CSS_网页制作

    CSS3 新增选择器的实例_css3_CSS_网页制作 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式​ li:...

    972 次 0 条

  • css实现流程导航效果(三种方法)_CSS教程_CSS_网页制作

    2019-11-13 北海365网小编 技术记录 CSS_网页制作

    css实现流程导航效果(三种方法)_CSS教程_CSS_网页制作 css实现流程导航效果,具体内容如下所示: ::tip 使用纯css线上 流程导航效果。    本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 :::   ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip-path: polygon(),直接画出一个三角 唯一一点需要算出大致百分比就可以画出来   <!DOCTYPE html> <html> <...

    764 次 0 条

  • CSS3制作轮播图的一种方法_css3_CSS_网页制作

    2019-11-11 北海365网小编 技术记录 CSS_网页制作

    CSS3制作轮播图的一种方法_css3_CSS_网页制作 轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种 下面是style部分: 这几行都能明白吧 <style> *{margin:0;padding:0;} a{text-decoration:none} li{list-style:none;} 设计宽度不要超过轮播图片的总宽度再加不到第一张1张图片的宽度(加第一张1张图片的宽度是为了轮播效果看得见)我的是1500宽度和200的高度,再设置溢出隐藏(消除移动出显示区域...

    1072 次 0 条

  • 手把手教你CSS水平、垂直居中的10种方式(小结)_CSS教程_CSS_网页制作

    2019-11-07 北海365网小编 技术记录 CSS_网页制作

    手把手教你CSS水平、垂直居中的10种方式(小结)_CSS教程_CSS_网页制作 面试必备,工作一定会用到。emmm大家都懂的,话不多说,先直接贴一个总结和效果图。 总结 PC端有兼容性要求,子元素宽高固定,推荐absolute + 负margin PC端有兼容要求,子元素宽高不固定,推荐absolute + transform PC端无兼容性要求,推荐flex 移动端推荐使用flex 要怎么实现上面这幅图的效果呢,下面为大家总结了10中常用的方法。首先我先创建一个公共的模板样式 <template>...

    616 次 0 条

  • css :not的多个条件的写法详解_CSS教程_CSS_网页制作

    2019-11-06 北海365网小编 技术记录 CSS_网页制作

    css :not的多个条件的写法详解_CSS教程_CSS_网页制作 :not 伪类选择器可以筛选不符合表达式的元素 例子 table tbody tr:not(:first-child):not(:last-child) td { text-align: right; } 以上代码可以选择table表格中tbody部分非首个、非最后一个的tr,并设置其子元素td文本样式居右 这里面需要注意not的语法格式: 单个的not写法: /*选中非段落元素*/ :not(p) { } 多个not...

    1027 次 0 条

  • CSS3实现图片抽屉式效果的示例代码_css3_CSS_网页制作

    2019-11-06 北海365网小编 技术记录 CSS_网页制作

    CSS3实现图片抽屉式效果的示例代码_css3_CSS_网页制作 老规矩,先放图片效果图:  这个效果实现原理很简单:只要你掌握css3动画和过渡相关知识就行,不用js代码; HTML代码: <div> <ul id="list"> <li > <a href="">国际美妆抢先看</a> <img src="i...

    1030 次 0 条

  • css3给背景图片加颜色遮罩的方法_css3_CSS_网页制作

    2019-11-05 北海365网小编 技术记录 CSS_网页制作

    css3给背景图片加颜色遮罩的方法_css3_CSS_网页制作 前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。 方法一:通过定位叠加(注意层级) <div class="wrap1"> <div class="inner"> </div> </div> .wrap1 { position: relative; width: 1200px; height: 400px...

    1072 次 0 条

  • uni-app中使用scss的示例代码_CSS教程_CSS_网页制作

    2019-11-04 北海365网小编 技术记录 CSS_网页制作

    uni-app中使用scss的示例代码_CSS教程_CSS_网页制作 遇到的坑 整个一个下午我都在解决uni-app中使用scss的坑,首先说一下我的问题,在用scss时一直不能使用@mixin,然后百度各种办法调试: 代码写法问题(完全按官网的写法来的不可行): 官网demo 浏览器问题(换火狐不行)。 语法版本问题(换了写法同样不行): scss使用mixin不生效,浏览器无法编译出来 插件没有安装上(重装还是不好使)。 把<style type='css'> 改成了 scss , 还是不行。 使用scss新语法还时不行 整个一下...

    958 次 0 条

  • css清除默认样式和设置公共样式的方法_CSS教程_CSS_网页制作

    2019-10-31 北海365网小编 技术记录 CSS_网页制作

    css清除默认样式和设置公共样式的方法_CSS教程_CSS_网页制作 CSS 清除默认样式 通常的清除默认样式: *{ margin:0; padding:0 } li{ list-style:none } img{ vertical-align:top; border:none } 设置默认字体 body, button, input, select, textarea /* for ie */ { font: 14px/1.5 tahoma, 5b8b4f53, s...

    804 次 0 条

  • CSS 阴影动画优化技巧_CSS教程_CSS_网页制作

    2019-10-31 北海365网小编 技术记录 CSS_网页制作

    CSS 阴影动画优化技巧_CSS教程_CSS_网页制作 本技巧来自这篇文章 --How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。 box-shaodw在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这样一个盒子: div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)...

    965 次 0 条

  • css 之空格处理的方法_CSS教程_CSS_网页制作

    2019-10-30 北海365网小编 技术记录 CSS_网页制作

    css 之空格处理的方法_CSS教程_CSS_网页制作 1、空格规则 HTML 代码的空格通常会被浏览器忽略。 <p> hello world </p> 上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。 浏览器的输出结果如下: hello world 可以看到,文字的前部和后部的空格都会忽略,内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。 如果希望空格原样输出,可以使用 <pre> 标签。 <pre> hello world...

    1064 次 0 条

  • CSS3中的display:grid,网格布局介绍_css3_CSS_网页制作

    2019-10-30 北海365网小编 技术记录 CSS_网页制作

    CSS3中的display:grid,网格布局介绍_css3_CSS_网页制作 1.网格布局(grid):         它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念:         容器和项目,如图所示: <div class="content"> <div class="b">1</div> <div class="b">2</div>...

    661 次 0 条

  • 利用css制作3D照片墙效果_CSS教程_CSS_网页制作

    2019-10-29 北海365网小编 技术记录 CSS_网页制作

    利用css制作3D照片墙效果_CSS教程_CSS_网页制作 利用css制作3D照片墙,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div> <img src="#"/> <img src="#&...

    790 次 0 条

  • 详解CSS盒子塌陷的5种解决方法_CSS教程_CSS_网页制作

    2019-10-28 北海365网小编 技术记录 CSS_网页制作

    详解CSS盒子塌陷的5种解决方法_CSS教程_CSS_网页制作 一,盒子塌陷是什么? 本应该在父盒子内部的元素跑到了外部。 二,为什么会出现盒子塌陷? 当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是CSS高度塌陷。 下图下方两个子元素的盒子分别设置了左浮动和右浮动,顶端的长条盒子出现了塌陷 ex : 三,关于盒子塌陷的几种解决方法 最简单,直接,粗暴的方法就是盒子大小写死,给每...

    808 次 0 条