原文:CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了浮动基本介绍#在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。其实浮动是通过float属性来实现的。float属性值说明表：属性值描述left设置元素向左浮动。right设置元素向右浮动。右浮...
在做移动端项目的时候，有些时候需要元素超出屏幕可以滚动，为了美观需要隐藏滚动条。如果只需兼容chrome和safari，可以使用自定义滚动条的伪对象选择器——：：webkit-scrollbar。 具体使用即： element::webkit-scrollbar{display:none} 或者 element::webkit-scrollbar{width:0!important} 那要在pc端实现同样的功能怎么办呢？参考 Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Sa...
一般来说，DIV没有悬浮一说，更准确的应为层叠或者固定。最简单的方法是采用CSS定位属性。 1、DIV层叠，即一个层叠加在另外一个层上 利用相对定位和绝对定位来实现: 在父对象上设置：position:relative; 在子对象上设置：position:absolute; top: 10px; left: 10px; 这样如果父对象里面有其他元素的话。上面设置的子对象就可以"悬浮"在父对象上面了。 2、元素固定在窗口的某个位置 使用固定定位: 在需要悬浮的元素上设置：position...
一、微云的实现网站有一些改动的时候，为了让用户熟知新的操作位置，往往会增加一个引导，常见的方式就是使用一个黑色的半透明蒙版，然后需要关注的区域是镂空的。然后上周五我去微云转悠的时候，也看到了引导层，于是职业病又犯了，去学习下别人是怎么实现的。下面是观测的结果：为了实现镂空蒙层效果，作者发挥了小时候拼积木的才能，使用两层HTML结构，内层使用5块独立区域拼接形成，至于中间镂空的区域的阴影则是使用的图片实现...
效果看下图： 左右的波浪边框用CSS搞定这个效果。利用CSS radial-gradient() 函数CSS 语法：background: radial-gradient(shape size at position, start-color, ..., last-color);直接上代码如下：<div class="coupon"></div>css部分：.coupon {position: relative;width: 400px;height: 160px;margin: 100px auto;text-align: -webkit-auto;background-image: radial-gradient(circle at 1px 8px,transparent 6px,#ff9e6d 6px,#f...
HTML代码： <div id="baymax"><!-- 头部 --><div id="head"><div id="eye"></div><div id="eye2"></div><div id="mouth"></div></div><!-- 躯干 --><div id="torso"><div id="heart"></div></div><!--腹部 --><div id="belly"><div id="cover"></div></div><!-- 手臂 --><div id="left-arm"><div id="l-bigfinger"></div><div id="l-smallfinger"></div></div><div id="right-arm"><div id="r-bigfinger"></div><div id="r-smallf...
近期流行的一种界面效果，是瀑布流的header固定，也叫sticky header或者parallax。对于UITableView，能够比較方便地让table header固定，可是对于UICollectionView，原生的iOS API比較难以实现。本文推荐一个开源组件。专门用于实现这样的效果：CSStickyHeaderFlowLayout总体效果贴个总体示意图配合autolayout使用首先须要注意的是，这个组件必须配合autolayout来使用。比方整个header分为4个部分。我想固定的是当中以下的2个subvi...
css实现水平居中<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>水平居中</title><style>.box1{border: 1px solid #000;text-align: center;}.box2{display: inline-block;background-color: green;}/*...............................*/.box3{border: 1px solid #000;}.box4{display: table;margin: 0 auto;background-color: yellow;}.box5{width: 100px;margin: 0 auto;text-align: center;}/*..............
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高。display:inline-block
即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie*display:inline;
*zoom:1;<...
效果图如下（鼠标放置显示二级导航）：先使用浮动和盒模型完成页面布局，再使用定位使二级导航不占据空间，不影响下面轮播图的布局，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级导航</title> <style> *{ margin: 0; padding: 0; } a{ t...
1.box-shadow:0 0 0 1px #feaa9e,0 0 0 5px #fd696f 2.border:1px solid #feaa9e;
outline:5px solid #fd696f; 原文：https://www.cnblogs.com/huanghuali/p/11450995.html
@font-face语法规则@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}说明：YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指...
1，向上的三角 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>border-radius</title> 6 <style> 7 div{ 8 width:0; 9 height:0;10 border-left:20px solid transparent;11 border-right:20px solid transparent;12 border-bottom:20px solid #ccc;13 }14 </style>15 </head>16 <body>17 <div>18 </div>19 </body>20 </html>2，向下的三角 1 <!doctype html> 2 <html> 3 <head>...
实现功能：隐藏浏览器滚动条，且不影响鼠标滚轮滚动页面适用：以大图片为背景或产品介绍页面（如果和视差滚动一起使用应该会效果更佳）所需技术：非常简单的css和js首先来看下对比效果（图1 => 图2，两者都能通过鼠标滚轮进行内容的滚动）（图1）（图2）可以明显的看到：图2的正文宽度明显比图1的宽度小，并发生了向右的偏移。这就是无滚动条页面的基本原理：移动(设置)正文的偏移量（margin/padding），使正文的滚动条出现在父节点...
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>账号注册</title><style>select {width: 100px;padding: 5px;font-size:16px;}</style>
</head>
<body>
<!--要实现的功能: 账号 密码 性别 <爱好> 地址出生年月 头像 相册 邮箱 电话 肤色 音量 个人简介-->
<form action="demo01.html"method="post">
<!--账号开始--><p>账号:<input type="text"name="userCode"required placeholder="请输入账号:...
