css 实战快速开发杂记

作者: squidbrother | 来源:发表于2020-08-18 11:06 被阅读0次

css 实战快速开发杂记
Vue.js仿eleme项目(2)
OO CSS（面向对象的CSS）
PyQt5快速开发与实战电子书
CSS高效开发实战
css杂记
046_wz_hm_项目实战——飞机大战之游戏窗口
Kotlin + Spring Boot 2 + Spring
Django快速开发实战
uni-app----图标分类组件化开发

页面不被点击
pointer-events
属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
使元素看起来像什么，如：表单元素变化为普通元素
appearance
隐藏滚动条
::-webkit-scrollbar { display: none; }
*::-webkit-scrollbar { display: none; }
比例与固定值的样式风格
如：宽度为100%减去95像素
width: calc(100% - 95px);
改变外观

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

浏览器支持
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性

图片CSS3裁切方式 object-fit
object-fit的可能值有：fill, contain, cover, none, scale-down

img { object-fit:cover; object-position:50% 50%; }

<picture>
    <source srcset="large.jpg" media="(min-width: 800px)" />
    <source srcset="medium.jpg" media="(min-width: 500px)" />
    <img src="small.jpg" />
</picture>

横向布局
描边嵌套拼接，且支持外边距溢出，支持折行，兼容 IE+
代码：

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>列表</title>
        <style type="text/css">
            html,body{font:Microsoft YaHei,"微软雅黑",Arial,Helvetica,sans-serif 12px/1.5em}
            body,ul,li,p{margin:0;padding:0}
            li{list-style:none}
            a{text-decoration:none}
            #warp{width:960px;padding:0 10px 10px;background:#f1f1f1;margin:10px auto 0}
            #warp .list1{width:100%;overflow:hidden}
            #warp .list1 ul{width:980px;overflow:hidden}
            #warp .list1 li{float:left;width:231px;margin:10px 10px 0 0;border-width:1px 0 0 1px;border-style:solid;border-color:#ccc}
            #warp .list1 li .box {border-width:0 1px 1px 0;border-style:solid;border-color:#ccc;min-height:200px;padding:70px
            0;background:#FFF;font-size:20px;color:#333;text-align:center}
            .p1{text-align:center;margin-top:10px}
        </style>
    </head>
    <body><div id="warp"><!--list1--><div class="list1"><ul><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li></ul></div></div><p class="p1">下一个模块</p></body>
</html>

flex兼容布局
flexBox -- flexBox，flexXC -- 横向居中，flexYC -- 垂直居中，flex_between -- 两侧抵近平铺，flex_wrap -- 折行

.flexBox { display:-webkit-flex; display:-moz-flex;  display:-ms-flexbox; display:-webkit-box;  display:-moz-box; display:flex;  }
.flexXC { -webkit-box-pack:center; -ms-flex-pack:center;
-webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;}
.flexYC { -webkit-box-align:center; -ms-flex-align:center;
-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;
}
.flex_between {-webkit-box-pack:justify; -ms-flex-pack:justify;
-webkit-justify-content:space-between;  -moz-justify-content:space-between; -ms-justify-content:space-between; -o-justify-content:space-between;  justify-content:space-between;}
.flex_wrap { -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; -o-flex-wrap:wrap; flex-wrap:wrap;}

8-1. flex布局

display:-webkit-flex; display:-moz-flex;  display:-ms-flexbox; display:-webkit-box;  display:-moz-box; display:flex;

8-2. 水平居中、垂直居中

-webkit-box-pack:center; -ms-flex-pack:center;
-webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;

-webkit-box-align:center; -ms-flex-align:center;
-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;

8-3. 两侧均分排版

-webkit-box-pack:justify; -ms-flex-pack:justify;
-webkit-justify-content:space-between;  -moz-justify-content:space-between; -ms-justify-content:space-between; -o-justify-content:space-between;  justify-content:space-between;

8-4. 两侧均分排版 (均分间距)

-webkit-justify-content: space-around;  -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around;  justify-content: space-around;

颜色渐变

background-image: -webkit-linear-gradient(to right, #5597f5, #5580e9);
background-image: -moz-linear-gradient(to right, #5597f5, #5580e9);
background-image: -ms-linear-gradient(to right, #5597f5, #5580e9);
background-image: -o-linear-gradient(to right, #5597f5, #5580e9);
background-image: linear-gradient(to right, #5597f5, #5580e9);
background-image: -webkit-gradient(linear,left,right,from(#5597f5),to(#5580e9));
background-color: #5597f5;

清明节网站CSS
如果网站不生效，可以使用标准协议:
XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。
不允许框架集（Framesets）。
必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或者使用HTML5协议

<!DOCTYPE html>

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray

css3 半弧，1/4圆弧
css

div { margin:10px;}
/*开口_半个圆弧*/
.box1 { display:block; width:100%; overflow:hidden;}
.box1 .floatL { float:left;}

.halfCircleBase { border:10px solid #F60; }
    /*左*/
.halfCircle_left { width:100px; height:200px; border-radius:100% 0 0 100%/50%; border-right:none; }
.halfCircle_left_close {  width:100px; height:200px; border-radius:100% 0 0 100%/50%; }
    /*右*/
.halfCircle_right { width:100px; height:200px; border-radius:0 100% 100% 0/50%; border-left:none; }
.halfCircle_right_close {  width:100px; height:200px; border-radius:0 100% 100% 0/50%; }
    /*上*/
.halfCircle_top { width:200px; height:100px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom:none; }
.halfCircle_top_close { width:200px; height:100px; border-radius: 50% 50% 0 0/100% 100% 0 0; }
    /*下*/
.halfCircle_btm { width:200px; height:100px; border-radius:0 0 50% 50%/0 0 100% 100%; border-top:none; }
.halfCircle_btm_close { width:200px; height:100px; border-radius:0 0 50% 50%/0 0 100% 100%; }

/*四分之一圆弧*/
.circleBase { width:100px; height:100px; background:#F60; }
.circleBase:after { display:block;  width:100%; height:100%; content:''; background-color:#FFF; }
    /*左上*/
.circleBase_lt { padding:10px 0 0 10px; border-radius:100% 0 0 0; }
.circleBase_lt:after {  border-radius:100% 0 0 0; }
    /*右上*/
.circleBase_rt { padding:10px 10px 0 0; border-radius:0 100% 0 0; }
.circleBase_rt:after {  border-radius:0 100% 0 0; }
    /*右下*/
.circleBase_rb { padding:0 10px 10px 0; border-radius:0 0 100% 0; }
.circleBase_rb:after {  border-radius:0 0 100% 0; }
    /*左下*/
.circleBase_lb { padding:0 0 10px 10px; border-radius:0 0 0 100%; }
.circleBase_lb:after {  border-radius:0 0 0 100%; }

html

<div class="box1">
    <div class="floatL halfCircleBase halfCircle_left"></div>
    <div class="floatL halfCircleBase halfCircle_left_close"></div>
    <div class="floatL halfCircleBase halfCircle_right"></div>
    <div class="floatL halfCircleBase halfCircle_right_close"></div>
    <div class="floatL halfCircleBase halfCircle_top"></div>
    <div class="floatL halfCircleBase halfCircle_top_close"></div>
    <div class="floatL halfCircleBase halfCircle_btm"></div>
    <div class="floatL halfCircleBase halfCircle_btm_close"></div>
</div>
<div class="box1">
    <div class="floatL circleBase circleBase_lt"></div>
    <div class="floatL circleBase circleBase_rt"></div>
    <div class="floatL circleBase circleBase_rb"></div>
    <div class="floatL circleBase circleBase_lb"></div>
</div>

效果图

圆角

.... 占坑

css 实战快速开发杂记
页面不被点击pointer-events属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 t...
Vue.js仿eleme项目(2)
五，项目实战，页面骨架开发 1. 组建拆封 static目录下加入文件css/reset.css，做css格式的重...
OO CSS（面向对象的CSS）
面向对象的CSS OO CSS的概念解读 OO CSS的作用和注意事项 OO CSS代码实战众多开发者忽视了CS...
PyQt5快速开发与实战电子书
《PyQt5快速开发与实战》既是介绍PyQt 5的快速入门书籍，也是介绍PyQt 5实战应用的书籍。PyQt 5是...
CSS高效开发实战
《CSS高效开发实战》本书写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈，确保读者可以运用一些工具、框架...
css杂记
title: css杂记date: 2017-05-21 15:52:05tags: css笔记 word-spa...
046_wz_hm_项目实战——飞机大战之游戏窗口
目标强化面向对象程序设计体验使用pygame模块进行游戏开发实战步骤 pygame快速体验飞机大战实战 p...
Kotlin + Spring Boot 2 + Spring
Kotlin + Spring Boot 2 + Spring 5 快速开发与项目实战 Kotlin 谷歌I/O开...
Django快速开发实战
从开发到部署，掌握项目开发全流程我平时也是比较爱学习的人，但是在学习和工作的实践中，会遇到很多问题。比如说买了...
uni-app----图标分类组件化开发
关键词: css封装好 flex 直接看效果图: 利用之前封装好css库,可实现快速开发