您现在的位置是：网站首页> 编程资料编程资料

详解常用css样式(布局)使用CSS的clip-path属性实现不规则图形的显示使用css实现特殊标志或图形css如何绘制特殊图形的方法示例详解CSS3中常用的样式【基本文本和字体样式】编程式处理Css样式的示例代码使用CSS伪元素控制连续几个元素的样式方法纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式css样式常见图形效果展示的实例代码

2021-09-03 995人已围观

简介 这篇文章主要介绍了常用css样式(布局)及CSS常用样式汇编的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

兼容css3新属性

在css3中，我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性，使我们不用为每个css3新属性再加上属性（需要用到大量css3的项目时再引入）

content布局

当h5内嵌在app里面的时候，在iso手机下，底部（头部）固定按钮会跟着一起滚动，需要使用content布局，然后使用padding-bottom或者padding-top，把相应的位置空出来！！！

当需要在content里面滚动的时候，需要将body和html设置height:100%;然后content也需要设置height:100%,这样才可以实现在content里面里面滚动，当需要在body里面滚动的时候，需要将html、body中的height:100%;设置去掉！！不然body会被限制住，内容只显示一半不能滚动！！！

还有一种解决弹窗遮罩层底部出现滚动的方法就是，当出现弹窗的时候，通过js控制底下的内容为body{height:100%;overflow:hidden;},然后关闭弹窗的时候移除掉这个样式！！！

 .content { padding-top: .88rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 750px; width: 100%; margin: 0 auto; overflow-x: hidden; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;

使用这种布局方式可以解决，单页面滚动的时候，点击弹窗，弹窗会被遮住滚动问题！！！

注意：当需要计算body的高度的时候，不能使用，还有当页面中，有表单，需要使用position：relative时，来使安卓键盘不被挡住！！！！但是为解决弹窗不滚动问题，可以通过，弹窗的时候，增加content布局，关闭弹窗的是移除content布局！！！

 //点击领取 $(".reward-btn").click(function(){ $(".reward-page").wrap("
"); $(".insurance-box").show(); $(".dialog2").show(); }); //点击关闭大弹窗按钮 $(".closeDia").click(function(){ $(this).parent().parent().hide(); $(".dialog2").hide(); $(".reward-page").unwrap("
"); });

场景二：在content布局下，需要给页面设置背景图，可以在content下面在包裹一层大的div，然后对这个div进行全页面背景图设置，这样背景图才会随着内容超出一屏幕而滚动，而不是直接在content这个容器上设置背景图，如果直接在这个容器上设置背景图，那背景图不会滚动!!!

常见头部布局

两边有时候有文字或者图标，但是中间的标题固定居中，大概位置如下，就是内容会变化！！

布局如下

设置个人中心更多
 css: .head{ position:relative; width:100%; height:88px; line-height:88px; text-align:center; } .head-left, .head-right{ position:absolute; height:88px; line-height:88px; } .head-left { left:30px; } .head-right { right:30px; }

模拟上拉加载

 $(window).scroll(function() { var winH = $(window).height(); var scrH = $(window).scrollTop(); var htmH = $(document).height(); //解决滚动到下面，遮罩层一半 $(".fixed").height(htmH); if(winH + scrH >= htmH) { console.info(tabActive); if(tabActive==0){ console.info(1111); if(next_page){ if(ajax_lock == true) { ajax_lock = false; page++; getRecord(page,0); } } } });

1.美化复选框

效果

html代码

css代码

 .hidden { display: none; } .checkbox:checked ~.icon-checkbox { background: url(../images/yes_15.png) no-repeat; background-size: 0.3rem 0.25rem; } .icon-checkbox { width: 0.3rem; height: 0.3rem; margin-right: 0.1rem; border: 0.02rem solid #d7d7d7; border-radius: 0.06rem; } .icon { display: inline-block; vertical-align: middle; }

js

 if(!$('#agreeTerm').is(":checked")){ $.alert('请勾选同意《保险条款》和《重要告知与申明》'); return; };
 .allCheck { padding:0 .1rem 0 .3rem; } .check-icon { display: inline-block; width:1.5rem; padding-left:.5rem; background:url("../../assets/select-no.png")no-repeat left center; background-size:.42rem .42rem ; } .check:checked ~ .check-icon { background:url("../../assets/selected.png")no-repeat left center; background-size:.42rem .42rem ; }

 

2.模拟单选按钮

类似效果

html代码

选择补偿金额补偿金说明

css代码

 .selection-rd:checked ~ .selection-lb { color: #e44; border:1px solid #e44; } .selection-lb { display: inline-block; margin:33px 30px 30px 0; width:150px; height: 64px; line-height: 64px; white-space: nowrap; background-color: #fff; border:1px solid #bbc; border-radius: 5px; text-align: center; font-size: 32px; }

jq代码

 var payLevel=$("input[name='money_type']:checked").val();

3.中间文字，两边横线居中

效果

代码

学生信息
 /*中间文字两边横线效果*/ .title-center { position:relative; width:100%; text-align: center; height: 100px; line-height: 100px; font-size: 28px; color: #4d72e2; } .title-center div{ display: inline-block; padding:0 20px; } .title-center:before ,.title-center:after{ display: inline-block; position: relative; content:""; height:2px; width:48px; top:-6px; background-color:#4d72e2; } 当设置rem为单位时，1px，会显示偏大，将.title-center:before ,.title-center:after修改为如下： .title-center:before, .title-center:after { display: inline-block; position: relative; content: ""; height: 1px; width: 1.88rem; top: -.1rem; background-color: #fd734f; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 终极版，rem单位，横线自适应长度！！！！ 
我要居中，两边横线对齐
 .border-center{ /*display:inline-block; 使用flexchild布局的时候，不能给元素设置这个属性，不然， -webkit-box-flex: 1;会失效*/ height: 1px; background-color: #fd734f; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

中间文字，两边横线居中方法2

效果图

不辜负你比较快糖果盒如果好

css

 .card-title { padding-top: .4rem; font-size: .34rem; color: #3c3c3c; text-align: center; font-weight: bold; } .card-title .text { position: relative; } .card-title .text:before ,.card-title .text:after { content: ""; display: inline-block; position: absolute; width: .4rem; height: .32rem; background: url('../images/card-title.png')no-repeat; background-size: 100% 100%; top: 50%; margin-top: -.16rem; } .card-title .text:before{ left: -.51rem; } .card-title .text:after{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); right: -.51rem; }

4.怎么实现图标水平垂直居中（rem单位）

利用background-size来设置背景图的本身大小尺寸，然后利用background-position:center center;来设置背景图相对元素的水平垂直居中,其中元素的宽是背景图的宽，高就是原来的高

 sass的写法 @mixin headerIcon($width,$height,$url,$position) { position: absolute; $position: .3rem; top: 0; width: $width; //图标的宽度 height: .88rem; //头部的高度 background: url($url) no-repeat; background-position:left center; background-size:$width $height; font-size: .3rem; text-align: left; }

方法二，

 html: 首页 css: a{display:inline-block;} .foot-nav1{ width: .66rem; height: .66rem; display: block; margin: 0 auto; background:url(); } span { display: block; line-height: .24rem; text-align: center; font-size: .24rem; height: .24rem; margin-bottom: .8rem; color: #666; }

5.头部常用样式设置

我是标题
 .header{ width: 100%; height: .88rem; position: absolute; left: 0; top: 0; z-index: 998; border-bottom: 1px solid #f1f1f1; text-align: center; h1{ font-size: .36rem; font-family: PingFangSC-Medium, sans-serif; } .left-icon{ position: absolute; width: .88rem; height: .88rem; left: .3rem; top: 0; background: url('../../assets/back-icon.png') no-repeat; background-size:.17rem .35rem; background-position: left center; } .right-icon{ position: absolute; width: .88rem; height: .88rem; right: .3rem; top: 0; background: url('../../assets/back-icon.png') no-repeat; background-size:.17rem .35rem; background-position: left center; }

6.常用表单布局

效果：

代码：

请认真填写以下信息
  • 收货地址:

css：

 .section2 li { list-style: none; position: relative; width: 500px; margin: 0 auto; border: 1px solid #ffd6b9; box-sizing: border-box; padding: 17px 30px; background-color: #fff; margin-top: 20px; border-radius: 40px; } .section2 li input { background-color: transparent; border: 0 none; color: #333; outline: none; position: relative; font-size: 26px; width: 435px; z-index: 102; }

html：

    • css：

     .sec3 li { position: relative; height: .88rem; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; box-sizing: border-box; } .sec3 li label { padding-bottom: .2rem; } .sec3 li input { position: relative; width: 4.86rem; background: transparent; border: 0 none; border-bottom: 1px solid #dc115b; padding-bottom: .2rem; color: #efc283; font-size: .28rem; border-radius: 0; }

    7、上方图片下方文文字，水平居中布局

    效果

    css样式

     .mall .details-foot .details-kefu { width: 1.56rem; height: .99rem; border-right: 1px solid #f1f1f1; } .mall .details-foot .details-kefu i { display: block; width: .42rem; height: .42rem; margin: .12rem auto .06rem; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAGXRFW…7oxfKRixjo4VSJhW/sUYi1M9kR4RNoUZHpQEuX+Z/pXwEGAHRzn0c9HGr7AAAAAElFTkSuQmCC) no-repeat; background-size: 100% 100%; } .mall .details-foot .details-kefu-name { text-align: center; }

    8、答题进度条

    就是用来展示答题进度的进度条，效果如下

    其中img是形状底色（小圆圈是透明的）。而recommend-jd-bg是进度条背景色，recommend-jd-ks是控制进度的颜色！！，其中img的z-index>recommend-jd-bg>recommend-jd-ks

    html：

    css：

     .recommend-jd { width: 6.43rem; position: absolute; top: 1.59rem; left: .54rem; } .recommend-jd-bg { width: 100%; height: .31rem; background: #fff; position: absolute; top: 0; z-index: 97; } .recommend-jd-ks { width: 12.5%; //这个是js控制，根据题数的进度来控制！ height: .31rem; background: #4a90ff; position: absolute; top: 0; z-index: 98; } .recommend-jd img { width: 100%; display: block; position: absolute; top: 0; z-index: 99; height: .31rem; }

    进度条2

    ¥0.01
     .progressBar { margin: .3rem auto .1rem; width: 6.3rem; height: .1rem; background-color: rgb(72, 11, 29); } .progressPer { position: relative; top: 0; left: 0; display: inline-block; width: 0; height: .1rem; background-color: #efc283; } .moneyBox { position: absolute; right: -.53rem; top: .3rem; display: inline-block; width: 1.06rem; height: .4rem; background: url(../images/moneyBox.png)no-repeat; background-size: 100% 100%; } .moneyBox .moneyText { position: absolute; bottom: 0; left: 0; width: 1.04rem; height: .34rem; line-height: .34rem; text-align: center; color: #efc283; font-size: .26rem; }

    9.答题测试1-10题都在同一个页面

    10、去掉selected自带的下拉框标识，增加如下属性

     select { background: transparent; border: 0 none; outline:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; }

    11、修改input的placeholder样式

     .detail-page input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ font-size: .26rem; color:#b2b2b2; opacity: 1; } .detail-page input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: .26rem; color:#b2b2b2; opacity: 1; } .detail-page input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: .26rem; color:#b2b2b2; opacity: 1; } .detail-page input:-ms-input-placeholder { /* Internet Explorer 10-11 */ font-size: .26rem; color:#b2b2b2; opacity: 1; }

    12.input中增加disabled会自带灰色，修改颜色如下

     input:disabled{ border:1px solid #DDD; background-color:#F5F5F5; color:#ACA899; }

    13、多行文字左右对齐：

     p { text-align: justify; text-justify: inter-ideograph; }

    效果

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：浅析CSS3 用text-overflow解决文字排版问题CSS的writing-mode文字排版属性使用教程css网页布局中文字排版的属性和用法CSS教程:CSS控制网页文字排版实例

    下一篇：css实现六种自适应两栏布局方式css display table 自适应高度、宽度问题的解决详解CSS多种三列自适应布局实现CSS实现背景图片屏幕自适应的实现css3实现自适应浏览器图片布局特效CSS实现表格首行首列固定和自适应窗口的实例代码CSS将img图片填满父容器div并自适应容器大小css实现两栏布局，左侧固定宽，右侧自适应的多种方法

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网