选项卡的两种实现方式 IE6 BUG的解决 移动端适配meta标签 link与@import的不同 css实现三角形(等边三角形) 梯形 六边形
选项卡的两种实现方式
第一种
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<style>
.wrap {
width: 500px;
height: 500px;
margin: 50px auto;
}
.tab {
height: 50px;
}
.tab .item {
float: left;
width: 100px;
height: 100%;
text-align: center;
line-height: 50px;
}
.tab .item.current {
background-color: #000;
color: #fff;
}
.page {
position: relative;
height: 450px;
border: 1px solid #000;
}
.page .item {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 100px;
text-align: center;
line-height: 450px;
}
.page .item.active {
display: block;
}
style>
head>
<body>
<div class="wrap">
<div class="tab J_tab">
<div class="item current">选项1div>
<div class="item">选项2div>
<div class="item">选项3div>
div>
<div class="page J_page">
<div class="item active">页面1div>
<div class="item">页面2div>
<div class="item">页面3div>
div>
div>
<script>
(function (doc) {
var oTab = doc.getElementsByClassName('J_tab')[0],
oPage = doc.getElementsByClassName('J_page')[0],
tabItems = oTab.getElementsByClassName('item'),
pageItems = oPage.getElementsByClassName('item'),
curIdx = 0;
var init = function () {
bindEvent();
};
function bindEvent() {
oTab.addEventListener('click', tabClick, false);
}
function tabClick(e) {
var e = e || window.event,
tar = e.target || e.srcElement,
className = tar.className;
if (className === 'item') {
tabItems[curIdx].className = 'item';
pageItems[curIdx].className = 'item';
curIdx = Array.prototype.indexOf.call(tabItems, tar);
tabItems[curIdx].className += ' current';
pageItems[curIdx].className += ' active';
}
}
init();
})(document);
script>
body>
html>
第二种
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<style>
.wrap {
width: 500px;
height: 500px;
margin: 50px auto;
}
.tab {
height: 50px;
}
.tab .item {
float: left;
width: 100px;
height: 100%;
text-align: center;
line-height: 50px;
}
.tab .item.current {
background-color: #000;
color: #fff;
}
.page {
position: relative;
height: 450px;
border: 1px solid #000;
}
.page .item {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 100px;
text-align: center;
line-height: 450px;
}
.page .item.active {
display: block;
}
style>
head>
<body>
<div class="wrap">
<div class="tab J_tab">
<div class="item current">选项1div>
<div class="item">选项2div>
<div class="item">选项3div>
div>
<div class="page J_page">
<div class="item active">页面1div>
<div class="item">页面2div>
<div class="item">页面3div>
div>
div>
<script>
(function (doc) {
var oTab = doc.getElementsByClassName('J_tab')[0],
oPage = doc.getElementsByClassName('J_page')[0],
tabItems = oTab.getElementsByClassName('item'),
pageItems = oPage.getElementsByClassName('item');
var init = function () {
bindEvent();
};
function bindEvent() {
oTab.addEventListener('click', tabClick, false);
}
function tabClick(e) {
var e = e || window.event,
tar = e.target || e.srcElement,
className = tar.className;
if (className === 'item') {
var curIdx = Array.prototype.indexOf.call(tabItems, tar);
for (var i = 0; i < tabItems.length; i++) {
tabItems[i].className = 'item';
pageItems[i].className = 'item';
}
tar.className += ' current';
pageItems[curIdx].className += ' active';
}
}
init();
})(document);
script>
body>
html>
IE6 BUG的解决
盒子浮动 margin * 2
解决方法 display:inline / block
元素浮动 有三个元素的间隙
解决 都加float
外部盒子相对定位 内部盒子绝对定位 right left bottom top 任何一个值等于0 只要设置了计数宽高 就会有一像素的间隙
解决方法 设置偶数宽高
img 下方有白色间隙 解决 img 定义为block 调整vertical-align 使用font-size:0(尽量不用)
空元素 如
解决 overflow:hidden 加一个空注释 就一个 空格 font-size:0
z-index 失效
解决 父级元素加position:relative和z-index:1
清除浮动后字体换行
解决 一行所有元素 加inline margin-right 给负值
移动端适配meta标签
renderer
<meta name="renderer" content="webkit" />
默认的IE兼容模式
<meta name="renderer" content="ie-comp" />
默认ie标准模式
<meta name="renderer" content="ie-stand" />
让IE浏览器使用最高配置渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
视口
设置user-scalable=no就不允许缩放
width=device-width 视口的宽度就是设备的宽度
initial-scale=1.0当前页面打开后是本身页面缩放的几倍
maximum-scale=1,minimum-scale=1 最大最小缩放倍数
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
link与@import
1.从属关系不同
link-html标签 @import CSS关键字
2.加载顺序不同
link 引入CSS 同时加载
@import 页面加载完毕后才会被加载
3.兼容性
link 不存在兼容性
@import css2.1出现 IE5+才兼容
4.DOM操作
link 可以通过DOM操作
@import 不行
5.link引入的样式权重大于@import引入的样式 但这句话不是这样理解的
因为@import是在页面加载完毕才会加载 主要原因是加载的位置是最上面 如果下面有对相同元素做了不同的样式 他就被忽略了
css实现三角形
css实现边框填充
方式一
.triangle {
width: 100px;
height: 100px;
border-top: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid orange;
border-right: 50px solid purple;
box-sizing: border-box;
}
方式二
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
普通三角形
三角形1
.triangle {
width: 0;
height: 0;
/* border-top: 50px solid transparent; */
border-bottom: 50px solid green;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
三角形2
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
/* border-right: 50px solid transparent; */
}
三角形3
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
/* border-left: 50px solid green; */
border-right: 50px solid green;
}
三角形4
.triangle {
width: 0;
height: 0;
border-top: 50px solid green;
/* border-bottom: 50px solid transparent; */
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
三角形5
.triangle {
width: 0;
height: 0;
/* border-top: 50px solid transparent; */
border-bottom: 50px solid green;
/* border-left: 50px solid transparent; */
border-right: 50px solid transparent;
}
三角形6
.triangle {
width: 0;
height: 0;
/* border-top: 50px solid transparent; */
border-bottom: 50px solid green;
border-left: 50px solid transparent;
/* border-right: 50px solid transparent; */
}
三角形7
.triangle {
width: 0;
height: 0;
border-top: 50px solid green;
/* border-bottom: 50px solid green; */
border-left: 50px solid transparent;
/* border-right: 50px solid transparent; */
}
三角形8
.triangle {
width: 0;
height: 0;
border-top: 50px solid green;
/* border-bottom: 50px solid green; */
/* border-left: 50px solid transparent; */
border-right: 50px solid transparent;
}
等边三角形
只要长比宽 1:根号3
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid purple;
}
梯形
.triangle {
width: 100px;
height: 100px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid purple;
}
六边形
方式一
.hexagon-1 {
position: relative;
width: 100px;
height: 173.2px;
background-color: red;
margin: 0 auto;
}
.hexagon-1::before,
.hexagon-1::after {
content: '';
display: block;
position: absolute;
top: 0;
width: 0;
height: 0;
border-top: 86.6px solid transparent;
border-bottom: 86.6px solid transparent;
}
.hexagon-1::before {
left: -50px;
border-right: 50px solid green;
}
.hexagon-1::after {
right: -50px;
border-left: 50px solid green;
}
方式二
旋转三个矩形
.hexagon-1 {
position: relative;
width: 100px;
height: 173.2px;
background-color: red;
margin: 0 auto;
}
.hexagon-1::before,
.hexagon-1::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 173.2px;
}
.hexagon-1::before {
background-color: green;
transform: rotate(60deg);
}
.hexagon-1::after {
background-color: orange;
transform: rotate(-60deg);
}
因为伪元素是在元素内所以连接处可能会有间隙 所以加以个像素的top
解决方式可以用三个元素来做不用伪元素也可以
.hexagon-1 {
position: relative;
width: 100px;
height: 173.2px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: 0 auto;
}
.hexagon-1::before,
.hexagon-1::after {
content: '';
display: block;
position: absolute;
top: 1px;
left: 0;
width: 100px;
height: 173.2px;
box-sizing: border-box;
}
.hexagon-1::before {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(60deg);
}
.hexagon-1::after {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(-60deg);
}
