Bootstrap/Html5/Css3 问答社区

css居中的几种实现方式

CSS/SASS/SCSS/LESS • boloog 发表了文章 • 0 个评论 • 1617 次浏览 • 2017-04-18 18:33 • 来自相关话题

1.?使用padding<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
background-color: pink;
padding: 100px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
使用padding让文本垂直居中显示
</div>
</body>
</html>2.?使用绝对定位<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="wrap">
使用绝对定位让.wrap垂直居中显示
</div>
</body>
</html>3.?使用CSS3 transform<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="wrap">
使用CSS3 transform让 .wrap垂直居中显示
</div>
</body>
</html>4.?使用伪元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
text-align: center;
}
.wrap::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
使用伪元素实现垂直居中
</div>
</body>
</html> 查看全部

1.?使用padding

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap {

            width: 300px;

            background-color: pink;

            padding: 100px 0;

            text-align: center;

        }

    </style>

</head>

<body>

<div class="wrap">

    使用padding让文本垂直居中显示

</div>

</body>

</html>

2.?使用绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap {

            width: 300px;

            height: 300px;

            line-height: 300px;

            text-align: center;

            background-color: red;

            color: #fff;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-left: -150px;

            margin-top: -150px;

        }

    </style>

</head>

<body>

<div class="wrap">

    使用绝对定位让.wrap垂直居中显示

</div>

</body>

</html>

3.?使用CSS3 transform

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap {

            width: 300px;

            height: 300px;

            line-height: 300px;

            text-align: center;

            background-color: red;

            color: #fff;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

        }

    </style>

</head>

<body>

<div class="wrap">

    使用CSS3 transform让 .wrap垂直居中显示

</div>

</body>

</html>

4.?使用伪元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap {

            width: 400px;

            height: 300px;

            margin: 0 auto;

            background-color: #ccc;

            text-align: center;

        }

        .wrap::before {

            content: '';

            display: inline-block;

            height: 100%;

            vertical-align: middle;

        }

    </style>

</head>

<body>

<div class="wrap">

    使用伪元素实现垂直居中

</div>

</body>

</html>

CSS浏览器兼容

CSS/SASS/SCSS/LESS • boloog 发起了问题 • 0 人关注 • 0 个回复 • 2806 次浏览 • 2017-04-17 19:10 • 来自相关话题

理解HTML

HTML • boloog 发起了问题 • 2 人关注 • 0 个回复 • 2920 次浏览 • 2017-04-17 18:50 • 来自相关话题

vue-cli打包

VUE • lopo1983 发表了文章 • 0 个评论 • 1733 次浏览 • 2017-04-15 17:00 • 来自相关话题

1.要是项目直接放网站根目录直接npm run build2.放到指定目录
? 修改：config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/XXX/', // 项目发布的目录
...
},3.放任意目录
? 修改：config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
},4.修改js/css打包名称
build/webpack.prod.conf.js output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
[name]：名称
[id]:懒加载编号
[hash] 随机码（项目正式上线可删除） new ExtractTextPlugin({
filename: utils.assetsPath('css/[name][hash].css')
}),name：名称
hash 随机码查看全部

1.要是项目直接放网站根目录直接

npm run build

2.放到指定目录
? 修改：config/index.js

build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: '/XXX/',  // 项目发布的目录

    ...

  },

3.放任意目录
? 修改：config/index.js

build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: './',

    ...

  },

4.修改js/css打包名称
build/webpack.prod.conf.js

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].[hash].js'),

    chunkFilename: utils.assetsPath('js/[id].[hash].js')

  },

[name]：名称
[id]:懒加载编号
[hash] 随机码（项目正式上线可删除）

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name][hash].css')

    }),

name：名称
hash 随机码

VUE 开发环境搭建

VUE • lopo1983 发表了文章 • 0 个评论 • 1985 次浏览 • 2017-04-15 16:05 • 来自相关话题

安装Node.js
.......忽略点点自己百度?
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cil
cnpm install -g vue-cli 切换到你的项目目录如www
cd www新建vue项目
vue init webpack demo01 一路回车（第4步ESLint 可以一路n，大师请忽略n）
?
进入新建项目
cd demo01 cnpm?install?

npm run dev
?
? 查看全部

安装Node.js

.......忽略点点 自己百度

?
安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cil

cnpm install -g vue-cli

切换到你的项目目录如www

cd www

新建vue项目

vue init webpack demo01

一路回车（第4步ESLint 可以一路n，大师请忽略n）
?
进入新建项目

cd demo01

cnpm?install?



npm run dev

?
?

vue 滚动到底部

VUE • lopo1983 发表了文章 • 0 个评论 • 3091 次浏览 • 2017-04-13 03:04 • 来自相关话题

template<div class="mix" ref="chatbox">....</div>
datadata() {
return {
userMsg:
}
}
?
?
methodsgoBottom(e) {
e.scrollTop = e.scrollHeight
}mounted(如果需要进入就滚动）mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
watch（如果响应）watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略因为出现了邪恶分割线
?
CSS3 FLEX 布局解决display: flex;
flex-flow: column-reverse;
align-items: baseline; 查看全部

template

<div class="mix" ref="chatbox">....</div>

data

data() {

	return {

		userMsg: 

	}

}

?
?
methods

goBottom(e) {

	e.scrollTop = e.scrollHeight

}

mounted(如果需要进入就滚动）

mounted: function() {

	this.$nextTick(function() {

		let e = this.$refs.chatbox;

		this.goBottom(e);

	})

}

watch（如果响应）

watch: {

	userMsg() {

		this.$nextTick(() => {

			let e = this.$refs.chatbox;

			this.goBottom(e);

		})

	}

}

?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略因为出现了邪恶分割线
?
CSS3 FLEX 布局解决

display: flex;

flex-flow: column-reverse;

align-items: baseline;

vue multiple type="file" 多文件上传

VUE • lopo1983 发表了文章 • 0 个评论 • 2842 次浏览 • 2017-04-13 02:56 • 来自相关话题

template<input class="hide" multiple type="file" name="fileup" id="upfile" accept="application/x-zip-compressed" value="" @change="onFileChange" multiple="multiple" />
<label class="btn btn-default" for="upfile">选择文件</label>?
methodsonFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
let a =
Array.from(files, item => {
a.push({
name: item.name,
type: item.name.split('.')[1]
})
});
this.arrfile = a;
}
发送（使用axios FormData）addChat(oid, def) {
let data = new FormData(def);
data.append('uid', window.USER_ID);
data.append('oid', oid);
data.append('guest',true)
return fetch('chat', data);
}sendChat() {
let def = this.$refs.chatform;
api.addChat(this.getOid, def).then(response => {
if(!!response) {
this.getChat()
} else {
alert("非法操作")
}
}), response => {
this.loading = false;
this.errorinfo = "加载失败....服务器出小差了"
}
}
? 查看全部

template

<input class="hide" multiple type="file" name="fileup" id="upfile" accept="application/x-zip-compressed" value="" @change="onFileChange" multiple="multiple" />

<label class="btn btn-default" for="upfile">选择文件</label>

?
methods

onFileChange(e) {

	const files = e.target.files || e.dataTransfer.files;

	let a = 

	Array.from(files, item => {

		a.push({

			name: item.name,

			type: item.name.split('.')[1]

		})

	});

	this.arrfile = a;

}

发送（使用axios FormData）

addChat(oid, def) {

	let data = new FormData(def);

	data.append('uid', window.USER_ID);

	data.append('oid', oid);

	data.append('guest',true)

	return fetch('chat', data);

}

sendChat() {

	let def = this.$refs.chatform;

	api.addChat(this.getOid, def).then(response => {

		if(!!response) {

			this.getChat()

		} else {

			alert("非法操作")

		}

	}), response => {

		this.loading = false;

		this.errorinfo = "加载失败....服务器出小差了"

	}

}

?

子元素点击靠前（jq dom操作）

javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1356 次浏览 • 2017-03-29 11:08 • 来自相关话题

$("li").click(function() {$(this).insertBefore($(this).siblings().first());});
<ul>
<li>div1</li>
<li>div2</li>
<li>div3</li>
</ul> 查看全部

$("li").click(function() {$(this).insertBefore($(this).siblings().first());});

		<ul>

			<li>div1</li>

			<li>div2</li>

			<li>div3</li>

		</ul>

又丢刀了关于bootstrap2.3.2 dropdown 移动端下无法使用的问题

bootstrap2.x • lopo1983 发表了文章 • 0 个评论 • 1649 次浏览 • 2017-03-08 00:53 • 来自相关话题

几天公司一同事女朋友到新公司上班公司要求用bootstrap2.3.2 构筑页面（可满足IE8的最大兼容这无可厚非虽然bs 官网一直推荐用最新版的3.x 国内的话呵呵其实2.3.2 才是最适合的），期间遇到navbar 的问题蛮以为页头版本 jq 之类的问题草率回答之结果均告知无法实现dropdown 跳转。。。。。。。。。。
?
晚上自己链接了很久没用的2.x 一看满以为是他女朋友犯了常识性错误结果并不然?
我尝试切换jq 版本从1.7.3 到1.11.1 结果还是一样 what a fu*k！
?
baidu 用中文搜索知道逼逼 ?唉还是打开大蓝灯 e文吧
果不其然这尼玛居然是bs2.3.2的bug 建议使用3.0.0 日你dog了
?
从源头开始找问题点击后不跳转?
1.a 为blcok 状态不存在点不了的问题 ?所以a 没问题
2.qie切换到模拟模式 ios what a fu*k 点不了?
? 祭出chrome F12 大bao宝剑一看马丹

这是什么鬼来来马丹还z-index 990 ?改改改 position:static;? .dropdown-backdrop {
position: static;
}哎哟我了个********** 查看全部

几天公司一同事女朋友到新公司上班公司要求用bootstrap2.3.2 构筑页面（可满足IE8的最大兼容这无可厚非虽然bs 官网一直推荐用最新版的3.x 国内的话呵呵其实2.3.2 才是最适合的），期间遇到navbar 的问题蛮以为页头版本 jq 之类的问题草率回答之结果均告知无法实现dropdown 跳转。。。。。。。。。。
?
晚上自己链接了很久没用的2.x 一看满以为是他女朋友犯了常识性错误结果并不然?
我尝试切换jq 版本从1.7.3 到1.11.1 结果还是一样 what a fu*k！
?
baidu 用中文搜索知道逼逼 ?唉还是打开大蓝灯 e文吧
果不其然这尼玛居然是bs2.3.2的bug 建议使用3.0.0 日你dog了
?
从源头开始找问题点击后不跳转?
1.a 为blcok 状态不存在点不了的问题 ?所以a 没问题
2.qie切换到模拟模式 ios what a fu*k 点不了?
? 祭出chrome F12 大bao宝剑一看马丹

这是什么鬼来来马丹还z-index 990 ?改改改 position:static;?

			.dropdown-backdrop {

				position: static;

			}

哎哟我了个**********

求一个较全的三级联动

javascript/jQuery • Jerry24 发起了问题 • 1 人关注 • 0 个回复 • 1938 次浏览 • 2017-03-03 17:10 • 来自相关话题

通知设置新通知

发现