小编Sup*_*rDJ的帖子

HTML中"role"属性的目的是什么?

我一直在看某些人的工作中的角色属性.我也用它,但我不确定它的效果.

例如:

<header id="header" role="banner">
    Header stuff in here
</header>
Run Code Online (Sandbox Code Playgroud)

要么:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>
Run Code Online (Sandbox Code Playgroud)

要么:

<section id="main" role="main">
     Main content stuff in here
</section>
Run Code Online (Sandbox Code Playgroud)

这个角色属性是否必要?

这个属性对于语义更好吗?

它改善了SEO吗?

可以在这里找到角色列表,但我看到有些人自己组成.是允许还是正确使用角色属性?

有什么想法吗?

html

1122
推荐指数
4
解决办法
56万
查看次数

使用css3的SVG投影

是否可以使用css3为svg元素设置投影,例如

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
Run Code Online (Sandbox Code Playgroud)

我看到了一些关于使用滤镜效果创建阴影的评论.有一个单独使用css的例子.下面是一个工作代码,其中正确应用了cusor样式,但没有阴影效果.请帮我用最少的代码获得阴影效果.

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	
Run Code Online (Sandbox Code Playgroud)

css html5 svg css3 svg-filters

327
推荐指数
4
解决办法
35万
查看次数

文件上传vuetify

我在Vuejs中使用vuetify组件作为前端.我想创建一个带文件上传的用户注册表单.我可以v-text-field在vuetify中创建一个表单但是如何上传文件.使用哪个组件或任何其他替代方式.

javascript frameworks vue.js vuetify.js

41
推荐指数
4
解决办法
4万
查看次数

使用Jquery Ajax将对象作为数据发布

我试过的代码如下:

var dataO = new Object();
dataO.numberId = 1;
dataO.companyId = 531;

$.ajax({
 type: "POST",
 url: "TelephoneNumbers.aspx/DeleteNumber",
 data: "{numberId:1,companyId:531}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(msg) {
 alert('In Ajax');
 }
});
Run Code Online (Sandbox Code Playgroud)

我想将对象dataO作为ajax数据传递,我该怎么办呢?

jquery

23
推荐指数
4
解决办法
17万
查看次数

从Sass元素中仅选择直接子元素

可以说我有以下html:

<header class="header">
    <div class="title">
        <h1>Home</h1>
    </div>

    <div class="logo">
        <img src="#" alt="Logo">
    </div>

    <div class="account">
        <div class="options">
        </div>

        <div class="search">
        </div>
    </div>
</header>
Run Code Online (Sandbox Code Playgroud)

我有以下SCSS:

header {
    height: 4.1rem;

    div {
        width: 33%;
        float: left;
        height: 4.1rem;
        line-height: 4.1rem;
        color: #fff;

        &.title {
            h1 {
                font-weight: normal;
                font-size: 3rem;
                padding: 0;
                margin: 0;
            }
        }

        &.logo {
            text-align: center;
        }

        &.account {
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

现在我遇到的问题是divs options,search其中33%account是逻辑,就像我一样div {width: 33%}.我知道我可以选择直接子元素:

header {
  > div { …
Run Code Online (Sandbox Code Playgroud)

css sass

20
推荐指数
3
解决办法
3万
查看次数

使用php filter_var和mysql_real_escape_string

我想开始我的问题说,我意识到PDO/mysqli是新标准,并且已被广泛涵盖在SO上.但是在这种特殊情况下,我没有时间在启动客户端站点之前将所有查询转换为PDO.

以下内容已在网站上的大多数查询中使用(不是我可以添加)

  $userEmail = filter_var($_POST['fEmail'], FILTER_SANITIZE_EMAIL);
   $userEmail = mysql_real_escape_string($userEmail);
   $sql ="SELECT email FROM members WHERE email = '$userEmail'";
   :
   :
Run Code Online (Sandbox Code Playgroud)

我想知道:

在上面的例子中使用filter_varmysql_real_escape_string一起是好/可以练习吗?我主要担心的是,这两个函数可以一起使用还是在执行/上传到DB时会产生某种冲突/错误?

使用两者有什么好处?

提前致谢

php mysql

14
推荐指数
1
解决办法
1554
查看次数

包含小于儿童的div

鉴于HTML

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}
Run Code Online (Sandbox Code Playgroud)

和CSS

<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>
Run Code Online (Sandbox Code Playgroud)

(见:http://jsfiddle.net/ericjohannsen/JCPEH/1/)

为什么container显然没有任何区域(也就是说,它的高度为零,加上边框)?我天真地期望它和div它所包含的孩子一样高.

设置这个的正确方法是什么,以便div包含两个孩子和孩子一样高?

css

12
推荐指数
1
解决办法
1万
查看次数

如何用函数中的SCSS变量计算

我有一个将px转换为rem的函数.例如:

height: rem-calc(14px); // makes height: 1rem;
Run Code Online (Sandbox Code Playgroud)

现在我想用变量来计算它.例如:

$switch-track-width: rem-calc(50px);
$switch-thumb-size: $switch-track-width / 2; // making it 25px or 1.7857rem in this case
Run Code Online (Sandbox Code Playgroud)

这不起作用所以我尝试了别的东西:

$switch-thumb-size: ($switch-track-width / 2) + 0rem;
$switch-thumb-size: (#{$switch-track-width} / 2) + 0rem;
Run Code Online (Sandbox Code Playgroud)

这两个$switch-thumb-size例子都不起作用.现在这是分裂,但我也无法得到times (*),plus (+)并且minus (-)工作.

用2个变量计算时我也遇到了问题.例如:

$switch-track-height: rem-calc(14px);
$switch-track-width: rem-calc(50px);
$switch-thumb-right: $switch-track-height - $switch-track-width;
Run Code Online (Sandbox Code Playgroud)

我prever保持功能属性的变量内,而不是像:height: rem-calc($switch-track-height);.

如果有人可以告诉我如何用两个例子中的SCSS变量进行计算,这将非常有帮助.

提前致谢

sass

11
推荐指数
2
解决办法
2万
查看次数

VueJS CKeditor5 上传图片

在 Vuejs 中使用 CKeditor5 上传图片时遇到问题。

首先尝试了简单上传适配器,它给了我以下错误:

原因:CKEditorError: ckeditor-duplicated-modules: 某些 CKEditor 5 模块重复。阅读更多:https : //ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

我尝试制作上传适配器。作为上传适配器,我拿了这个例子并修改了 url。uploadadapter.js 文件如下所示:

    export default class UploadAdapter {
        constructor( loader ) {
            // The file loader instance to use during the upload.
            this.loader = loader;
        }
    
        // Starts the upload process.
        upload() {
            return this.loader.file
                .then( file => new Promise( ( resolve, reject ) => {
                    this._initRequest();
                    this._initListeners( resolve, reject, file );
                    this._sendRequest( file );
                } ) );
        }
    
        // Aborts …
Run Code Online (Sandbox Code Playgroud)

ckeditor vue.js ckeditor5

9
推荐指数
1
解决办法
5585
查看次数

如何使用babel-preset-env设置webpack.config.js?

有没有人知道或者有一个使用babel-preset-env的webpack.config.js文件?如果是,请分享.

这是配置文件:

const path = require('path');
const webpack = require('webpack');
const APP_DIR = path.resolve(__dirname, 'js');

module.exports = {
    entry: {
        app: "./app/javascript/app-one.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include : [
                APP_DIR,
                path.resolve(__dirname, 'node_modules/jquery')
            ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        modules: true,
                        presets: ['env',
                            {
                                "targets": {
                                    "node": "current"
                                }
                            }
                        ]
                    }
                }
            }
        ]
    },
    node: {
        fs: "empty"
    },
    output: {
        path: path.resolve("./app/temp/scripts"),
        filename: "[name].bundle.js"
    }
};
Run Code Online (Sandbox Code Playgroud)

webpack

8
推荐指数
1
解决办法
6940
查看次数