样式_样式表 - CSDN
  • 小程序好看的表单样式

    万次阅读 多人点赞 2020-03-25 16:50:47
    配合上划线的一个样式,麻雀虽小五脏俱全吧,先看样子 直接用会出错,因为我这里封装了一些东西在common.js文件里面,比如common.SHOWTIPS就是一个wx.showToast的封装,如果感兴趣这种简洁的写法的话可以翻阅我往期...

    配合上划线的一个样式,麻雀虽小五脏俱全吧,先看样子

    直接用会出错,因为我这里封装了一些东西在common.js文件里面,比如common.SHOWTIPS就是一个wx.showToast的封装,如果感兴趣这种简洁的写法的话可以翻阅我往期

    wxml

    <view class="container">
      <view class="bg-fff p-lr30 border-t">
        <view class="ipt-wrap border-b flex ai-center">
          <label for="" class="font14">姓名</label>
          <input type="text" class="ml40 flex1" placeholder="请输入姓名" bindinput="getNameValue"></input>
        </view>
    
        <view class="ipt-wrap border-b flex ai-center">
          <label for="" class="font14">手机号码</label>
          <input type="text" class="ml40 flex1" maxlength="11" placeholder="请输入手机号码" bindinput="getPhoneValue"></input>
        </view>
    
        <view class="ipt-wrap border-b flex ai-center jc-sb">
          <view class="flex ai-center">
            <label for="" class="font14">所在地区</label>
            <picker mode="region" class="ml40 flex1 region" placeholder="省、市、区" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
              <view class="picker flex1 texthide">
                {{region[0]}} {{region[1]}} {{region[2]}}
              </view>
            </picker>
          </view>
          <view class="flex">
            <text wx:if="{{regionFlag}}">请选择</text>
            <text class="iconfont icon-youjiantou color-a5a5a5 ml20"></text>
          </view>
        </view>
    
        <view class="ipt-wrap border-b">
          <textarea name="" id="" class="textarea _w100 p-tb30 lh10" maxlength="50" placeholder="请输入详细地址,精确到门牌号"      bindinput="getTextareaValue"></textarea>
        </view>
    
        <view class="ipt-wrap border-b flex ai-center jc-sb ">
          <view class="flex ai-center">
            <label for="" class="font14">所在楼层</label>
            <input type="text" class="ml40 flex1" placeholder="请输入楼层号" bindinput="getFloorValue"></input>
          </view>
          <view class="flex">
            <view class="default-wrap">
              <text class="{{elevatorFlag == 0 ? 'icon-xuanzekuang iconfont color-767676 default-icon' : 'icon-selected1 iconfont color-279efd default-icon'}}" bindtap="changeIconStatu"></text>
              <text class="font14 color-363636 ml10">电梯</text>
            </view>
          </view>
        </view>
    
        <view class="ipt-wrap border-b">
          <textarea name="" id="" class="textarea _w100 p-tb30 lh10" maxlength="50" placeholder="可在此处填写备注说明" bindinput="getRemarksValue" ></textarea>
        </view>
      </view>
    
      <view class=" bg-fff p30 flex ai-center jc-sb mt20">
        <view class="flex ai-center">
          <label for="" class="font14">设为默认地址</label>
        </view>
        <view class="flex">
          <switch class="switch" bindchange="defaultChange" color="#279efd"></switch>
        </view>
      </view>
    
      <view class="combtn font16 color-fff _w100 bg-btn" data-url="../addNewAddress/addNewAddress" bindtap="saveNewAddress">
        保存
      </view>
    </view>

    wxss

    /*  */
    .ipt-wrap{
      min-height: 100rpx;
      line-height: 100rpx;
    }
    .ipt-wrap label{
      min-width: 120rpx;
    }
    .icon-youjiantou{
      position: relative;
      top: 1rpx;
    }
    .textarea{
      height: 100rpx;
    }
    /*swtich样式-start*/
    /*swtich整体大小*/
    .wx-switch-input{
      width:82rpx !important;
      height:40rpx !important;
    }
    /*白色样式(false的样式)*/
    .wx-switch-input::before{
      width:80rpx !important;
      height: 36rpx !important;
    }
    /*绿色样式(true的样式)*/
    .wx-switch-input::after{
      width: 40rpx !important;
      height: 36rpx !important;
    }
    .ipt-wrap:last-child{
      border-bottom:none;
    }
    /*swtich样式end*/
    .region{
      width: 500rpx;
      position: absolute;
      left: 150rpx;
    }

    js

    const common = require('../../utils/common');
    const api = require('../../utils/api');
    const app = getApp();
    
    Page({
      data: {
        elevatorFlag: 0,
        nameValue: '',
        phoneValue: '',
        region: ["省", "市", "区"],
        regionFlag: 1,
        textareaValue: '',
        floorValue: 0,
        remarksValue: '',
        addressStatus: 0,
        userID: 0
      },
      onLoad: function (){
        let self = this;
        this.setData({ userID: app.globalData.userID });
      },
      changeIconStatu: function () {
        var self = this;
        this.setData({ elevatorFlag: !self.data.elevatorFlag});
      },
      getNameValue: function (e) {
        this.setData({ nameValue: e.detail.value });
      },
      getPhoneValue: function (e) {
        this.setData({ phoneValue: e.detail.value });
      },
      bindRegionChange: function (e) {
        this.setData({ region: e.detail.value, regionFlag: 0 });
      },
      getTextareaValue: function (e) {
        this.setData({ textareaValue: e.detail.value });
      },
      getFloorValue: function (e) {
        this.setData({ floorValue: e.detail.value });
      },
      getRemarksValue: function (e) {
        this.setData({ remarksValue: e.detail.value });
      },
      defaultChange: function (e){
        if (e.detail.value){
          this.setData({ addressStatus: 1 });
        }else{
          this.setData({ addressStatus: 0 });    
        }
      },
      saveNewAddress: function () {
        let self = this,
            regionFlag = self.data.regionFlag,
            addressStatus = self.data.addressStatus,
            region = self.data.region,
            str = '';
        for (let i = 0, len = region.length; i < len; i++){
          if (region[i].length == 1){region[i] = region[i-1];}
          str += region[i] + ' ';
        }
        let byUrl = api.INTERFACES.findByAddress, byData = { areaName: str};
        if (!common.ISNAME(self.data.nameValue)){
          common.SHOWTIPS('请输入真实的姓名', 'none'); return;
        } else if (!common.ISPHONE(self.data.phoneValue)){
          common.SHOWTIPS('请输入正确的11位手机号码', 'none'); return;
        } else if (self.data.regionFlag) {
          common.SHOWTIPS('请选择省市区', 'none'); return;
        } else if (!self.data.textareaValue){
          common.SHOWTIPS('请输入详细地址', 'none'); return;
        } else if (!self.data.floorValue){
          common.SHOWTIPS('请输入楼层号', 'none'); return;
        } 
      }
    });

    如果对你有用,麻烦顺手给我个赞,这个对我真的很重要

    app.wxss

    .container {height: 100%; min-height: 100vh; display: flex;flex-direction: column; box-sizing: border-box;
      background: #f5f5f5;overflow-x:hidden;} 
    view,text{font-size: 13px;}
    
    /* Previous version */
    .flex-center{display: flex;justify-content: center;align-items: center;}
    .flex-vertical-center{display: flex;align-items: center;}
    .flex-horizontal-center{display: flex;justify-content: center;}
    
    .relative{position: relative;}
    .absolute{position: absolute;}
    .t0{top: 0;}
    .r0{right: 0;}
    .b0{bottom: 0;}
    .l0{left: 0;}
    
    .absolute-center{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .absolute-centerY{position: absolute;top: 50%;transform: translateY(-50%);}
    .absolute-centerX{position: absolute;left: 50%;transform: translateX(-50%);}
    
    .relative-center{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .relative-centerY{position: relative;top: 50%;transform: translateY(-50%);}
    .relative-centerX{position: relative;left: 50%;transform: translateX(-50%);}
    
    .color-279efd{color: #279efd;}
    .color-24a9e2{color: #24a9e2;}
    .color-0cf{color: #00ccff;}
    .color-767676{color: #767676;}
    .color-a9987b{color: #a9987b;}
    .color-363636{color: #363636;}
    .color-a5a5a5{color: #a5a5a5;} 
    .color-ffd452{color: #ffd452;}
    .color-ffd700{color: #ffd700;}
    .color-ff0000{color: #ff0000;}
    .color-eb3324{color: #eb3324;}
    .color-fa9c3e{color: #fa9c3e;}
    
    .bg-279efd{background: #279efd;}
    .bg-0cf{background: #00ccff;}
    .bg-66ded0{background: #66ded0;}
    .bg-ffd452{background: #ffd452;}
    .bg-fff{background: #ffffff;}
    .bg-e7f2ff{background: #e7f2ff;}
    .bg-f5f5f5{background: #f5f5f5;}
    .bg-c9c9c9{background: #c9c9c9;}
    .bg-f1f1f1{background: #f1f1f1;}
    .bg-fa9c3e{background: #fa9c3e;}
    .bg-24a9e2{background: #24a9e2;}
    
    .bg-btn{background: linear-gradient(to right, #66ded0, #229dfe);}
    
    
    .font-w-b{font-weight: bold;}
    /* ------------------- */
    
    /* 2v common css */
    .flex{display: flex;}
    .jc-s{justify-content: flex-start;}
    .jc-sa{justify-content: space-around;}
    .jc-sb{justify-content: space-between;}
    .jc-center{justify-content: center;}
    .ai-center{align-items: center;}
    .ai-s{align-items: flex-start;}
    .jc-ai-center{justify-content: center;align-items: center;}
    .as-center{align-self: center;}
    .flex1{flex:1;}
    .f-column{flex-direction: column;}
    .f-wrap{flex-wrap: wrap;}
    
    .a-center-xy{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .a-center-y{position: absolute;top: 50%;transform: translateY(-50%);}
    .a-center-x{position: absolute;left: 50%;transform: translateX(-50%);}
    
    .r-center-xy{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .r-center-y{position: relative;top: 50%;transform: translateY(-50%);}
    .r-center-x{position: relative;left: 50%;transform: translateX(-50%);}
    
    .fixed{position: fixed; top: 0; left: 0;}
    .fix{position: fixed;}
    
    .font12{font-size: 12px;}
    .font13{font-size: 13px;}
    .font14{font-size: 14px;}
    .font15{font-size: 15px;}
    .font16{font-size: 16px;}
    .font18{font-size: 18px;}
    .font20{font-size: 20px;}
    .font22{font-size: 22px;}
    .font24{font-size: 24px;}
    .font26{font-size: 26px;}
    .font28{font-size: 28px;}
    .font30{font-size: 30px;}
    .font-b{font-weight: bold;}
    
    .color-a{color: #aaa;}
    .color-f00{color: #f00;}
    .color-fff{color: #fff;}
    
    .abg{background: #aaa;}
    .bbg{background: #bbb;}
    .cbg{background: #ccc;}
    .dbg{background: #ddd;}
    .ebg{background: #eee;}
    .bg-f00{background: #f00;}
    .bg-333{background: #333;}
    
    .w5{width: 5rpx;}
    .w10{width: 10rpx;}
    .w20{width: 20rpx;}
    .w30{width: 30rpx;}
    .w50{width: 50rpx;}
    .w60{width: 60rpx;}
    .w70{width: 70rpx;}
    .w100{width: 100rpx;}
    .w120{width: 120rpx;}
    .w130{width: 130rpx;}
    .w140{width: 140rpx;}
    .w150{width: 150rpx;}
    .w175{width: 175rpx;}
    .w200{width: 200rpx;}
    .w300{width: 300rpx;}
    .w400{width: 400rpx;}
    .h5{height: 5rpx;}
    .h10{height: 10rpx;}
    .h20{height: 20rpx;}
    .h30{height: 30rpx;}
    .h40{height: 40rpx;}
    .h50{height: 50rpx;}
    .h70{height: 70rpx;}
    .h80{height: 80rpx;}
    .h100{height: 100rpx;}
    .h110{height: 110rpx;}
    .h120{height: 120rpx;}
    .h130{height: 130rpx;}
    .h140{height: 140rpx;}
    .h150{height: 150rpx;}
    .h200{height: 200rpx;}
    .h300{height: 300rpx;}
    .h400{height: 400rpx;}
    .h500{height: 500rpx;}
    
    .p-tb5{padding: 5rpx 0;}
    .p-tb10{padding: 10rpx 0;}
    .p-tb15{padding: 15rpx 0;}
    .p-tb20{padding: 20rpx 0;}
    .p-tb30{padding: 30rpx 0;}
    .p-tb40{padding: 40rpx 0;}
    .p-tb50{padding: 50rpx 0;}
    .p-lr10{padding: 0 10rpx;}
    .p-lr20{padding: 0 20rpx;}
    .p-lr30{padding: 0 30rpx;}
    .p-lr40{padding: 0 40rpx;}
    .p-lr50{padding: 0 50rpx;}
    .pl10{padding-left:10rpx;}
    .pl20{padding-left:20rpx;}
    .pl30{padding-left:30rpx;}
    .pl40{padding-left:40rpx;}
    .pl50{padding-left:50rpx;}
    .pr10{padding-right:10rpx;}
    .pr20{padding-right:20rpx;}
    .pr30{padding-right:30rpx;}
    .pr40{padding-right:40rpx;}
    .pr50{padding-right:50rpx;}
    .pt5{padding-top:5rpx;}
    .pt10{padding-top:10rpx;}
    .pt20{padding-top:20rpx;}
    .pt30{padding-top:30rpx;}
    .pt40{padding-top:40rpx;}
    .pt50{padding-top:50rpx;}
    .pb10{padding-bottom:10rpx;}
    .pb20{padding-bottom:20rpx;}
    .pb30{padding-bottom:30rpx;}
    .pb40{padding-bottom:40rpx;}
    .pb50{padding-bottom:50rpx;}
    .pb80{padding-bottom:80rpx;}
    .pb100{padding-bottom:100rpx;}
    .pb130{padding-bottom: 130rpx;}
    .pb140{padding-bottom: 140rpx;}
    .pb150{padding-bottom: 150rpx;}
    .p5{padding: 5rpx;}
    .p10{padding: 10rpx;}
    .p20{padding: 20rpx;}
    .p30{padding: 30rpx;}
    .p40{padding: 40rpx;}
    .p50{padding: 50rpx;}
    
    .ml5{margin-left: 5rpx;}
    .ml10{margin-left: 10rpx;}
    .ml20{margin-left: 20rpx;}
    .ml30{margin-left: 30rpx;}
    .ml40{margin-left: 40rpx;}
    .ml50{margin-left: 50rpx;}
    .mr5{margin-right: 5rpx;}
    .mr10{margin-right: 10rpx;}
    .mr20{margin-right: 20rpx;}
    .mr30{margin-right: 30rpx;}
    .mr40{margin-right: 40rpx;}
    .mr50{margin-right: 50rpx;}
    .mt5{margin-top: 5rpx;}
    .mt10{margin-top: 10rpx;}
    .mt20{margin-top: 20rpx;}
    .mt30{margin-top: 30rpx;}
    .mt40{margin-top: 40rpx;}
    .mt50{margin-top: 50rpx;}
    .mb5{margin-bottom: 5rpx;}
    .mb10{margin-bottom: 10rpx;}
    .mb20{margin-bottom: 20rpx;}
    .mb30{margin-bottom: 30rpx;}
    .mb40{margin-bottom: 40rpx;}
    .mb50{margin-bottom: 50rpx;}
    .mb60{margin-bottom: 60rpx;}
    .mb70{margin-bottom: 70rpx;}
    .mb80{margin-bottom: 80rpx;}
    .mb90{margin-bottom: 90rpx;}
    .mb100{margin-bottom: 100rpx;}
    .m-tb10{margin: 10rpx 0;}
    .m-tb20{margin: 20rpx 0;}
    .m-tb30{margin: 30rpx 0;}
    .m-tb40{margin: 40rpx 0;}
    .m-tb50{margin: 50rpx 0;}
    .m-lr10{margin: 0 10rpx;}
    .m-lr20{margin: 0 20rpx;}
    .m-lr30{margin: 0 30rpx;}
    .m-lr40{margin: 0 40rpx;}
    .m-lr50{margin: 0 50rpx;}
    
    ._w10{width: 10%;}
    ._w15{width: 15%;}
    ._w20{width: 20%;}
    ._w25{width: 25%;}
    ._w50{width: 50%;}
    ._w70{width: 70%;}
    ._w75{width: 75%;}
    ._w80{width: 80%;}
    ._w90{width: 90%;}
    ._w95{width: 95%;}
    ._w100{width: 100%;}
    ._h100{height: 100%;}
    
    .no-b-l{border-left: none;}
    .no-b-r{border-right: none;}
    .no-b-t{border-top: none;}
    .no-b-b{border-bottom: none;}
    .border-t{border-top:1px solid #e4e4e4;}
    .border-b{border-bottom:1px solid #e4e4e4;}
    .border-r{border-right:1px solid #e4e4e4;}
    .border-l{border-left:1px solid #e4e4e4;}
    .border-tb{border-bottom:1px solid #e4e4e4; border-top:1px solid #e4e4e4;}
    .border-rl{border-right:1px solid #e4e4e4; border-left:1px solid #e4e4e4;}
    .border-all{border:1px solid #e4e4e4;}
    
    .circle-6{border-radius: 6rpx;}
    .circle-8{border-radius: 8rpx;}
    .circle-10{border-radius: 10rpx;}
    .circle-15{border-radius: 15rpx;}
    .circle-20{border-radius: 20rpx;}
    .circle-30{border-radius: 30rpx;}
    .circle-40{border-radius: 40rpx;}
    .circle{border-radius: 50%;}
    
    .lh10{line-height: 1;}
    .lh15{line-height: 1.5;}
    .lh20{line-height: 2;}
    
    .z99{z-index: 99;}
    .z100{z-index: 100;}
    .min-w120{min-width: 120rpx;}
    
    .textcenter{text-align: center;}
    .textright{text-align: right;}
    .texthide{overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}
    .v-middle{vertical-align: middle;}
    .block{display: block;}
    .i-block{display: inline-block;}
    .over-x{overflow-x: hidden;}
    .over{overflow: hidden;}
    .fl{float: left;}
    .clear::after{content: "";display: block;clear:both;visibility: hidden;height: 0;}
    
    .container .icon-biaoqingwunai3{
      font-size: 50px;
      color: #363636;
    }
    .combtn{
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      margin: 0 auto;
      border-radius: 5rpx;
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

     

    展开全文
  • HTML三种样式引入方式

    千次阅读 2017-12-14 09:27:24
    本文对HTML有三种样式引入方式进行了介绍,包括行内样式(Inline Styles)、嵌入式样式表(Embedded Style Sheets)、外部样式表(External Style Sheets)。

    HTML三种样式引入方式

    文章博客园地址

      HTML有三种样式引入方式:行内样式(inline Styles)、嵌入式样式表(Embedded Style Sheets)、外部样式表(External Style Sheets)。

    一、行内样式(Inline Styles)

      又称内联表单样式,它直接写在标签内部,用style属性声明。行内样式不能实现所有的样式,比如hover@import

    <p style="color: red; background: yellow;">Look out!This text is alarmingly presented!</p>
    

    二、嵌入式样式表(Embedded Style Sheets)

      又称内部样式表,必须写在<head>标签中,用<style>标签申明。需要注意,XML语言有可能不支持嵌入式表单的写法,一定要检查语言的DTD。

    <html>
    <head>
    <title>Stylin'!</title>
    <style type="text/css">
    h1 {color: purple;}
    p {font-size: smaller; color: gray;}
    </style>
    </head>
    ...
    </html>
    

    三、外部样式表(External Style Sheets)

      外部样式表较其他两种方式,优势在于:1. 利用通用样式表,减少重复样式的冗余编码和修改;2. 内容与样式分开存储,加快了编码的效率,同时增加了文档的可读性;3.外部样式表可以被缓存,减少了带宽的使用,加快了网页打开的速度。

      外部样式表有三种引入格式,具体如下:

    1. @import 指令

      @import url(site.css);
      
    2. link 元素

      <link rel="stylesheet" type="text/css" href="web.css" media="screen">
      

        rel表示文档与被链接文档之间的关系,比如rel="stylesheet"表示链接文档为文档的外部样式表,rel="contents"表示链接文档为文档的目录;type表示文档的MIME类型,href表示被链接文档的位置;media表示被链接文档可显示的设备类型。

    3. XML样式表处理指令:只适用于XML文档

      <?xml-stylesheet type="text/css" href="basic.css" media="all"?>
      
    4. HTTP链接:有些浏览器不支持这种方式

      注意:样式表的加载顺序应当满足:a)被引用的样式表要在引用它的样式表前面;b)样式优先级高的样式表在优先级低的样式表的后面,比如局部定义表单section.css要在全局样式定义表单mian.css的后面。

    参考资料:

    [1] CSS Pocket Reference

    展开全文
  • CSS清除样式

    万次阅读 2018-08-31 22:44:21
    /* …………………………………………^_^………………………………………… 清除默认样式 …………………………………………^_^………………………………………… */ /* *{margin:0; padding:0;font-size:12px;font-...
    /*
     * 日期:2018年08月27日
     * 时间:15点16分
     * 名称:qReset
     * 版本:1.0.0
    */
    
    /* …………………………………………^_^………………………………………… 清除默认样式 …………………………………………^_^………………………………………… */
    /*
    *{margin:0; padding:0;font-size:12px;font-family:"微软雅黑";color: #666;  border: none;}
    */
    /*去掉所有元素的边框*/
    /*
    *:focus { outline: none; }
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video, input, button, textarea,select{
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-family: "微软雅黑";
        font-weight: normal;
        color: #666;
        border: none;
        vertical-align: baseline;
    }
    
    body{ line-height: 1; }
    ul,ol{ list-style: none; }
    input,button,textarea,select,input:focus,textarea:focus{ background:none; outline:none; }
    textarea{ resize: none; overflow: auto;}
    select{ border: none; }
    a,button{ cursor: pointer; }
    a{ text-decorattion: none; blr:expression(this.onFocus=this.blur());}
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: none; }
    
    /* 合并表格线 && 去掉间隙 */
    table{ border-collapse: collapse; border-spacing:0; }
    
    /* 去掉webkit默认的表单样式 */
    button,input,optgroup,select,textarea { -webkit-appearance:none; }
    
    /* 去掉a、input和button点击时的蓝色外边框和灰色半透明背景 */
    a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); }
    
    /* 禁止长按链接与图片弹出菜单 */
    a,img { -webkit-touch-callout: none; }
    
    /* img,video下面产生间隙清除 */
    video,img{ vertical-align:top; }
    
    /* …^_^… 重置 HTML5 元素搜索 */
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { display: block; margin: 0; padding: 0; }
    
    /* 去掉mark默认背景颜色 */
    mark{ background: none; }
    
    /* 清除上下标位置 */
    sub,sup{ vertical-align: baseline; }
    
    /* 其它清除 */
    :link, :visited,ins{
        text-decoration: none;
    }
    :focus {
        outline: 0;
    }
    /* 禁止页面选中复制 *IE10、Oprea15以下不支持,若需要,要在需要禁止选中的元素上面添加一个属性unselectable="on" */
    /*
    html,body{ -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
    */
    
    /* 选中颜色修改 *IE10以下不支持*/
    ::selection { background: #FF8888; color: #FFFFFF; }
    ::-moz-selection { background: #FF8888; color: #FFFFFF; }
    ::-webkit-selection { background: #FF8888; color: #FFFFFF; }
    
    
    /* …………………………………………^_^………………………………………… 自定义样式 …………………………………………^_^………………………………………… */
    
    /* 设置浮动 */
    .fl{ float: left; }
    .fr{ float: right; }
    
    /* 清除浮动 引用了bootstrap可以使用clearfix */
    .clear{ clear: both; }
    
    /* 用下面的代码去掉你要去掉的元素的边框 */
    .clearoutline:focus { outline:none; }
    
    /* …………………………………………^_^………………………………………… 其它样式清除 …………………………………………^_^………………………………………… */
    
    /* 清除bootstrap中a的下划线 */
    a:link{ text-decoration: none;  color: #666; }
    

     

    展开全文
  • CSS三种样式

    千次阅读 2019-04-02 20:05:04
    CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式 内联式css样式 内联式css样式表就是把css代码直接写在现有的HTML标签中: <p style = "color:#000099">这是一个段落标记</p> 采用style...

    CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式

    1. 内联式css样式
      内联式css样式表就是把css代码直接写在现有的HTML标签中:
    <p style = "color:#000099">这是一个段落标记</p>
    

    采用style属性。范围只针对此标签适用。

    该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

    1. 嵌入式css样式
      在HTML文档中的< head >中使用< style >标记,,被称为内嵌式。
    <head>
    <style>
    /*选择符{ 属性:属性值 ;属性:属性值;}*/
    a{color:#FF0000 ;}
    
    #img1{width:800px;}  /*id选择器*/
    
    .img2{ width:800px;} /*类选择器*/
    
    </style>
    </head>
    
    <body>
    <a href="#">超链接</a>
    
    <img src="xx.jpg" id="img1">
    
    <img src="xxx.jpg" class="img2">
    
    </body>
    

    在head标签中加入< style >标签,对多个标签进行统一修改,范围针对此页面。

    该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。

    1. 外部式css样式
      采用< link >标签。例如:< link href = “a.css” type = “text/css” rel = “stylesheet” >< /link >
      a.css的代码如下
    /*选择符{ 属性:属性值 ;属性:属性值;}*/
    a{color:#FF0000 ;}
    
    #img1{width:800px;}  /*id选择器*/
    
    .img2{ width:800px;} /*类选择器*/
    

    html中引入css

    <head>
    
    <link href="a.css" type="text/css" rel="stylesheet">
    
    </head>
    
    <body>
    <a href="#">超链接</a>
    
    <img src="xx.jpg" id="img1">
    
    <img src="xxx.jpg" class="img2">
    
    </body>
    

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名(也可以为调用其他网站CSS)。

    展开全文
  • 设置div样式

    千次阅读 2019-04-16 17:18:55
    <!--div样式--> <div style="width:100px; margin:0 5px 0 5px;"></div> <!--span样式--> <span id="brower_info" style="color:red; font-size:11pt;" >
  • CSS三种样式

    千次阅读 2019-06-10 11:29:07
    CSS三种样式表外部样式表内部样式表内联样式样式表的格式: 外部样式表 外部样式表的作用:设置一个外部样式表,在Html页面的head中引用,此样式表应用于当前整个页面效果,其用法如下:略。。。 内部样式表 内部...
  • 勾的css样式

    2019-03-04 13:48:45
    工作积累:勾的css样式 ✔ /*勾的css样式 左侧部分 */ .ok-icon { display: inline-block; width: 10px; height: 3px; background: #00a5e0; line-height: 0; font-size: 0; font-weight: 100; ...
  • CSS样式大全

    2019-09-18 13:23:51
    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line...
  • 去除a标签默认样式

    万次阅读 2019-11-04 20:36:21
    a标签一个有以下几种状态: 每种的设置方法如下: /*包含以下五种的链接*/ a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ ......
  • Qt 之 QSS(样式表语法)

    万次阅读 多人点赞 2018-05-30 10:22:32
    简述Qt样式表的术语和语法规则几乎和CSS相同。如果你熟悉CSS,可以快速浏览以下内容。简述 样式规则 选择器类型 子控件 伪选择器 冲突解决方案 级联 继承 命名空间中的部件 设置对象属性 更多参考样式规则样式表包含...
  • CSS 鼠标样式和手指样式整理

    千次阅读 2014-06-11 17:09:53
    巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下:  任意标签中插入 style="cursor:*"  例 子:文本或其它页面元素 文本或其它页面元素 注意把 * 换成如下...
  • js外部样式和style属性的添加移除

    万次阅读 2015-09-18 14:22:28
    在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用...
  • 修改 input type=file 的样式的最简单方法

    万次阅读 多人点赞 2018-07-01 22:42:39
    先卖个关子,有些人是这么做的,另外写一个按钮的样式,然后将自己写的按钮和这个默认的样式的定位改为重合,并将默认的按钮设置opacity:0,即设置透明度为完全透明,这样就可以在表面上是点击自己定义...
  • Qt 之 样式表的使用——设置样式的方法

    万次阅读 多人点赞 2017-03-20 22:36:33
    一、简述我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面,关于如何使用样式表的资料也很多,样式表的使用方法也千变万化。为了搭建一个漂亮的界面那么必须学会如何使用样式表,Qt帮助文档中提供了非常...
  • intellij idea设置主题、字体样式和背景色

    万次阅读 多人点赞 2019-01-30 17:49:06
    引言:所谓工欲善其事必先利其器,idea就是这样的利器,刚装好的intellij idea主题样式是白的,字体也很小,看起来很不舒服,接下来看下如何修改intellij idea的主题、字体样式和背景色。 设置主题 快捷键Ctrl+Alt...
  • word 2016样式设置及样式集保存

    万次阅读 2018-07-19 23:00:21
    建立此模块,是为了记录自己学习到的一些word排版技巧,因为刚开始使用的一些技巧不容易记住,仅作为自己的学习笔记使用。...2、重命名样式名,在这里设置摘要部分样式,就将样式名字设置为“摘要”。后...
  • visio_连接线样式设置:如箭头线

    万次阅读 2015-12-29 09:04:20
    如下:在默认为直线连接时,右键,选择“样式”,如下: 然后在弹出的选项中,选择“线条”,会弹出下一级菜单,再选择“箭头”,如下: 最后点击,完成设置。如上的几步操作,我们就可以人为定义visio中连接...
  • 使用css修改input框中checkbox的样式

    万次阅读 多人点赞 2018-04-19 11:14:34
    由于界面设计的需要,我们需要修改复选框的样式,使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂,通常修改的方式有两种,一个是链入图片,另一个是使用纯css的方法进行修改。链入图片的设计方式...
  • js改变style样式和css样式

    万次阅读 2012-10-07 21:47:09
    js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: Change.html --> function test4(event) { if(event....
  • VC,VB程序按钮、图标样式美化

    千次阅读 2014-06-09 09:00:44
    此处的“美化”指的不是通过代码进行美化你的程序。...1、Windows2000按钮样式转为Windows XP按钮样式 两种按钮的差别比较容易区分,典型的就是VC6和VS2010开发出的MFC程序界面。前者的按钮是黑白的,后者有渲染效果
1 2 3 4 5 ... 20
收藏数 1,147,863
精华内容 459,145
关键字:

样式