css
关注
分享
扫一扫
LLL_LH
记录一些学习心得
展开
-
css实现立方体效果
效果如图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&am原创 2019-03-03 16:06:09 · 1103 阅读 · 0 评论 -
css当图片加载失败时显示文字
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>当图片不能加载时显示文字</title> <style> /* 第一种方法 */原创 2019-02-28 19:24:04 · 3637 阅读 · 0 评论 -
css实现手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0&原创 2019-02-25 21:09:19 · 235 阅读 · 0 评论 -
CSS background属性
background： 1、backgound-color: 背景颜色（所有浏览器都支持）可能的值：background-color: lightblue;background-color: #ff0; background-color: rgb(255,0,0); background-color: transparent; //默认值,透明色背景范围：内容、...原创 2019-01-15 13:59:28 · 1948 阅读 · 0 评论 -
css实现简单图形
css<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{margin: 20px;float: left;} .box7{width: 1原创 2019-01-11 10:55:59 · 287 阅读 · 1 评论 -
css实现梯形等图形
css<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{margin: 20px;float: left;} .box,.box1{width:原创 2019-01-11 10:05:45 · 1453 阅读 · 0 评论 -
css两栏布局、三栏布局
1、css两栏布局，一列固定，另一列宽度auto<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*body存在8px的外边距*/ *{margin: 0;p原创 2019-01-10 10:51:03 · 474 阅读 · 0 评论 -
网站换肤css/js
<div> <button type="button" class="btn btn-blue" data-name="blue">蓝色</button> <button type="button" class="btn btn-orange" data-name="orange&qu原创 2018-10-25 14:45:31 · 379 阅读 · 0 评论 -
移动端1px问题border.css
@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft {...翻译 2018-08-10 21:54:00 · 692 阅读 · 0 评论 -
移动端reset.css
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding...翻译 2018-08-10 21:52:51 · 324 阅读 · 0 评论 -
js实现简单的滑动门选项卡
1、效果：html:<div class="tab"> <ul class="title"> <li class="active">新闻</li><li>体育</li><li>娱乐</li><原创 2018-07-05 15:56:35 · 1522 阅读 · 0 评论 -
CSS实现三角提示框
1、无边框的html:<div class="main"> <p>这是内容这是内容这是内容这是内容这是内容这是内容</p> </div> <div class="main2"> <p>这是内容这是内容这是内容这是内容这是内容这是内容</p> </d原创 2018-07-05 14:11:20 · 1847 阅读 · 0 评论 -
css实现实心三角形、有边框的三角形和空心三角形
1、实心三角形<div class="up"></div> <!--向上的三角形--> <div class="down"></div> <!--向下的三角形--> <div class="left"></div> &原创 2018-07-04 17:45:11 · 22517 阅读 · 0 评论 -
CSS calc()
calc() 用于动态计算长度值。 注意：运算符前后都需要保留一个空格，例如： width: calc(100% - 20px)； 支持+、-、*、/ 四则运算原创 2018-03-15 15:02:30 · 246 阅读 · 0 评论 -
css使用自定义字体
<div>myFirstFont</div>CSS3:@font-face{font-family: myFirstFont; //自定义的字体名称src: url('/fonts/RotisSansSerifStd.otf');自定义的字体的存放路径}//使用div{ font-family:myFirstFont;}原创 2018-03-01 17:51:51 · 612 阅读 · 0 评论 -
css实现溢出隐藏并显示省略号
<style> div { width: 150px; border: 1px solid #ccc; white-space: nowrap; //超出不换行 overflow: hidden; //超出隐藏，其余内容不可见 text-overflow: ellipsis; //文本溢出后用省略号显示原创 2018-01-23 16:41:03 · 1152 阅读 · 0 评论