border | 易学教程

CSS清除浮动大全共8种方法

阅读更多关于 CSS清除浮动大全共8种方法

在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了，下面总结8种清除浮动的方法，测试已通过 ie chrome firefox opera，需要的朋友可以参考下清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）： 1、父级div定义 height 代码如下: <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height

如何利用border书写三角形，建议考虑正方形

阅读更多关于如何利用border书写三角形，建议考虑正方形

网页做三角形图片，你还在拿ps调整吗？out了，老铁，来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成，然后我想保留上边的三角形，那下边、左边、右边的三角形就没了（设置背景色transparent或者与背景相近的颜色），最终结果就是一个保留上边，方向朝下的三角形，需要注意一点的是设置的css样式中width=0，如果不是就不能构成正方形，而是一个梯形；此外还可以通HTML实体里的三角形符号，朝上&#9650朝下&#9660朝左&#9668朝右&#9658，最后通过font的大小颜色控制三角形！ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>怎样不用图片来做一个三角形图标</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 /* .box1,.box2,.box3,.box4{ 13 font-size: 66px; 14 color: lightcoral; 15 cursor: pointer; 16 } *//

css3 box-sizing属性

阅读更多关于 css3 box-sizing属性

box-sizing属性有3个值：content-box（default），border-box，inherit。 content-box：border和padding不计算入width之内 inherit：继承于父级 <style type="text/css"> div{ height:100px; width: 100px; padding:10px; border: 5px solid #000000; color:red; font-size: 14px; text-align: center; } .content-box{ box-sizing: content-box; } .border-box{ box-sizing: border-box; } </style> 来源： https://www.cnblogs.com/bruce-gou/p/5628324.html

博客园美化主题推荐之Bili

阅读更多关于博客园美化主题推荐之Bili

博客园美化主题推荐之Bili 一、前言本博客美化主题作者为： GShang ，本文仅在教导如何快速把该美化主题应用到自己的博客中，详细部署内容见博客园主题——Bili2.0来啦。二、博客预览以下为该美化主题的简单预览：三、部署美化主题 3.1.准备工作如果没有开通博客园页面js权限的，先要在博客设置页面申请权限，之后才能开始部署美化主题。（只要礼貌点，客服很快就会批准的😀）。获取js权限之后进入博客设置界面：在这里可以添加自定义的样式代码。 3.2.页面定制 CSS 代码在 "页面定制 CSS 代码" 框中输入以下样式代码： /* 导入符号字体 */ @import url(https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css) screen and (min-width:0px); @import url(https://at.alicdn.com/t/font_438759_kmvtb0te1nd.css) screen and (min-width:0px); textarea[title=js]{ display: none; } /* 此处可自定义修改 */ /* 设置全局变量 */ @media screen and (min-width:0px) { :root { /

下拉菜单项封装，使用图标字体实现

阅读更多关于下拉菜单项封装，使用图标字体实现

通过之前的站点导航案例，分离下拉菜单的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分离出dropdown公共样式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分离出nav的dropdown独有样式*/ .menu .dropdown-toggle{ display: block; padding:0 16px

jQuery---文档操作

阅读更多关于 jQuery---文档操作

一、相关知识点总结1、CSS .css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(["color", "border"]) -> 获取多个值 .offset - 获取相对位置 - 比较的对象是html (窗口) .position - 获取相对已经定位的父标签的位置 - 比较的是最近的那个做过定位的祖先标签 .scrollTop([val]) - 返回顶部的例子 .scrollLeft([val]) 尺寸： height([val|fn]) - 元素的高度 width([val|fn]) - 元素的宽度 innerHeight() - 带padding的高度 innerWidth() - 带padding的宽度 outerHeight([soptions]) - 在innerHeight的基础上再加border的高度 outerWidth([options]) - 在innerHeight的基础上再加border的高度2、文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A

关于sass的介绍和基本语法

阅读更多关于关于sass的介绍和基本语法

引入　　什么是sass？ sass是css预处理器。那预处理器又是什么？css本身不是一种编程语言，而预处理器是用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。如今主流的预处理器分Less、Sass 和 Stylus三种，我用过的就是less和sass，less和sass有很多语法上的不同，但是最根本的不同点是 less是基于javascript的，而 sass是基于ruby开发的。预处理器编译工具　鱿鱼引入提到的，sass文件最终还是要编译成正常的css文件才能为页面提供样式，所以这里需要一个sass的编译工具 koala ,一只可爱的小考拉。它可以实时编译less、sass、coffeScript和compass，编译后还可以进行代码压缩，当然还有其他很多的功能，可以到官网上去look look~ 　　　　使用方法简介：　　只要在项目文件夹（比如文件夹名为work）内创建基本的结构，有一个sass文件，里面放入.scss文件，然后将文件夹work拖入koala界面内，就会自动生成一个css文件夹，文件夹里有编译好的css文件。ps:别忘了在.html文件里引入你的css文件喔~这样你就可以放心地在你的.scss文件里写你的样式了，koala会帮你实时编译成.css文件的喔~就是这么强大~！~ 如果博主的解释你还是木有懂的话

SASS用法指南-转

阅读更多关于 SASS用法指南-转

作者：阮一峰日期： 2012年6月19日原文地址：http://www.ruanyifeng.com/blog/2012/06/sass.html 艹，没想到sass 2012年就有了。现在2016年，过去4年了，才知道。太落伍了。 ============================================ 学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种"CSS预处理器"之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。 ============================================ SASS用法指南作者：阮一峰一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

VC中鼠标拖动改变窗体大小

阅读更多关于 VC中鼠标拖动改变窗体大小

又好久没记录技术笔记了！首先在属性对话框中border选择resize属性。这时窗体就可以通过鼠标改变大小了，但难的是窗体改变时，窗体上的控件也相应地按比例改变大小。这里我将外国的人的源码贴在这里，大家一起学学（http://www.codeproject.com/KB/dialog/easysize.aspx） Introduction Have you ever thought of how annoying it actually was to spend a lot of time doing a basic GUI for your simple applications instead of focusing on the actual 'content'? Take for example a resizing dialog or property page. You need to write code for each control that will tell it where to go when the thing is resized, and this can take up a lot of time. Now I know that I'm not the first one to give a solution to this (

《自拍教程》软件接口及其输入输出

阅读更多关于《自拍教程》软件接口及其输入输出

软件接口及其输入输出电脑或其他智能终端设备，比如手机，车机，电视机等，其搭载的软件产品（包括操作系统软件，应用程序App等），这些软件产品的主要功能是计算处理功能，软件接口是预留的，允许外界数据（包括图像，文本，音视频，参数，变量等），按照一定的协议或者要求，输入到软件进行处理。主要包括以下几种软件接口： 1. UI界面接口 UI（User Interface）也叫用户操作接口，值得是界面上的各类人类可以识别的控件元素，包括按钮，文本输入框，标签，图像等... 所以我们经常把测试叫做界面测试，就是从界面UI提供的各类接口，进行点击事件输入或者文本输入，进行数据处理。 */ /*--> */ } 接口输入输出界面按钮点击登录按钮可跳转到登录界面图标按钮点击微信App图标一次可运行微信App 文本输入框 Wifi登录密码界面输入密码可成功输入密码文本录音按钮点击录音按钮，可数字音频输入完成录音并生成录音文件录像按钮点击录像按钮，可图像数据输入完成录像并生成视频文件 …… 2. Web服务接口 */ /*--> */ 接口输入输出注册用户接口地址_POST方式： http://zipython/api/UserManage/RegistUser json={ "AppCode":"Weixin", "UserName":"wusanren"

订阅 border