内部用的html5和css3资料

最新推荐文章于 2022-10-31 10:51:24 发布

生活在他方

最新推荐文章于 2022-10-31 10:51:24 发布

阅读量1.8k

点赞数

分类专栏： html5 前台开发资料文章标签： html5 css3 web前端

本文链接：https://blog.csdn.net/wuyt2008/article/details/50249347

版权

前台开发资料同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html5

18 篇文章 0 订阅

订阅专栏

以下内容基于Bootstrap

1、css的样式命名：

英文单词+减号+英文单词或者数字，例如：remove-row-padding。尽量不用缩写，用缩写的话必须用正确的英文缩写。

2、背景图里面套主体内容，

如下图效果

处理方式如下

<div class="container container-background">
  <div class="row">
    <div class="col-md-12">
     .... 
    </div>
    <div class="col-md-12 col-margin">
     .... 
    </div>
  </div>
</div>

.container-background {
	background-repeat:no-repeat;
	background-color:#5069bb;
	background-size:100% auto;
}
.col-margin {  
    padding-left: 40px;  
    padding-right: 40px;  
}  

@media screen and (max-width:768px){
	.container-background {
		background-image: url(../images/bg-xs.jpg);
	}
	.col-margin {
	padding-left: 15px;
	padding-right: 15px;
	}
}
@media screen and (min-width:768px) and (max-width:992px){
	.container-background {
		background-image: url(../images/bg-md.jpg);
	}
}
@media screen and (min-width:992px) and (max-width:1200px){
	.container-background {
		background-image: url(../images/bg-md.jpg);
	}
}
@media screen and (min-width:1200px){
	.container-background {
		background-image: url(../images/bg-lg.jpg);
	}
}

其中，bg-xs.jpg宽768px，bg-md.jpg宽992px，bg-lg.jpg宽1200px。

3、导航条调高度调低

/*调整导航条高度<<<*/
.navbar-toggle {
	margin:0px;
}
.navbar {
	min-height:0px;
	margin-bottom:0px;
}
@media screen and (min-width:768px){
.navbar-form {
	margin-top:0px;
	margin-bottom:0px;
}
.navbar-nav>li>a {
	padding-top:0px;
	padding-bottom:0px;
}
ul.navbar-nav {
	padding-top:5px;
}
}
/*调整导航条高度>>>*/

4、文字中间背景水平线

，如下图效果

处理方法：在背景利用css背景渐变画出水平线

<h3 class="title" ><span>NEWS</span></h3>

/*文字背后有横线<<<*/
h2 {
	text-align: center;
	background-image: -webkit-linear-gradient(270deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);
	background-image: -moz-linear-gradient(270deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);
	background-image: -o-linear-gradient(270deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);
	background-image: linear-gradient(180deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);
}
h2 span {
	background-color: white;
}
/*文字背后有横线>>>*/

5、列表页列表在右侧

效果图如下

红框部分是主要列表，当在手机界面显示时，应当显示在绿框内容上面。实现方式

<div class="row">
    <div class="col-md-9 col-md-push-3">列表内容...</div>
    <div class="col-md-3 col-md-pull-9">其他内容...</div>
</div>

6、图文列表

虽然bootstrap提供了媒体对象，但是用起来不很方便，或者我还不会用，暂时用以下方法解决。实现后效果

实现方法

              <li class="pic-text-list">
                <div class="col-md-3 col-sm-5 col-xs-6"><a href="#"><img src="images/pic1.png" class="img-responsive" alt=""/></a></div>
                <div class="col-md-9 col-sm-7 col-xs-6">
                  <h4>标标题标题标题标题标题标题标题标题标题标题标题标题标题题</h4>
                  <div class="extra hidden-xs"><small>时间：<span class="text-danger">2015-2-2</span>.；来源：网络抓取</small></div>
                  <div class="description hidden-xs">各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息各种各样的信息</div>
                  <a class="btn btn-default hidden-xs">详细信息</a> </div>
                <a href="/content.aspx?id=044016587487" class="btn btn-default btn-block visible-xs-block col-xs-12">详细信息</a>
                <div class="clearfix"></div>
                <div class="col-md-12">
                  <hr>
                </div>
              </li>

7、两列按钮

效果图

实现方式

<div class="row remove-row-padding tow-column-list">
              <div class="col-md-12 title"><i class="fa fa-industry"></i>intro</div>
              <div class="clearfix"></div>
              <div class="list">
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afffadsfasdfasdfsdfsdfsdf</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="col-xs-6"><a class="btn btn-default btn-block" href="#">afff</a></div>
                <div class="clearfix"></div>
              </div>
            </div>

.tow-column-list .title {
	background-image: url(../images/title-bg-0.png);
	background-size: 100% 100%;
	text-transform:uppercase;
	font-weight:bold;
	line-height:1.8em;
}
.tow-column-list .title i {
	padding-right:.5em;
}
.tow-column-list .list {
	background-color:#333;
	padding-bottom:.5em;
}
.tow-column-list .list > div:nth-child(2n) {
	padding-left:0px;
}
.tow-column-list .list > div:nth-child(2n+1) {
	padding-right:0px;
}
.tow-column-list .list .btn {
	border: 1px solid #333;
	border-radius: 0px;
	background-color:#f6f6f6;
	color:#8f8f8f;
	overflow:hidden;
}
.tow-column-list .list a.btn:hover {
	background-color:#ff5842;
	color:white;
}

8、漂亮的后台样式

这是我见过最喜欢的后台样子，一个叫ace admin的后台模板，基于bootstrap3。

这个样子的树形表编辑，也是我见过最喜欢的。

这个列表和easy ui比内容放不了那么多，但是，我这边的业务足够用了。

9、汉字转拼音的js脚本

https://github.com/foreignfilm/Pinyin.js

<body>
<script type="text/javascript" src="pinyinlite.min.js"></script>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
    $("#btn-trun").click(function(e) {
        $("#pinyin").val(pinyinlite($("#Chinese-character").val()));
    });
});
</script>
<form id="form1" name="form1" method="post">
  <p>
    <label for="textfield">汉字:</label>
    <input type="text" id="Chinese-character">
  </p>
  <p>
    <label for="textfield2">拼音:</label>
    <input type="text" id="pinyin">
  </p>
  <p>
    <input type="button" id="btn-trun" value="转化">
  </p>
</form>
</body>

10、基于css的3d翻转（容器大小必须给定）

/* 整个容器，保持3d变化距离 */
.flip-container {
	perspective: 1000;
	transform: perspective(1000px);
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}
/*  鼠标经过时翻转 */
.flip-container:hover .back {
	-webkit-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container:hover .front {
	-webkit-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
/* 翻转速度 */
.flip-container .flipper {
	transition: 0.6s;
	transform: perspective(1000px);
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}
/* 变化时隐藏被面 */
.flip-container .front, .back {
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
	
	position: absolute;
	top: 0;
	left: 0;
}
/*  前面板置于后面板前 */
.flip-container .front {
	z-index: 2;
	-webkit-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
/* 初始隐藏后面板 */
.flip-container .back {
	-webkit-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}


.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}
.front {
	background-color: red;
}
.back {
	background-color: yellow;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front"> 
      <!-- front content -->front content </div>
    <div class="back"> 
      <!-- back content -->back content </div>
  </div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front"> 
      <!-- front content -->front content </div>
    <div class="back"> 
      <!-- back content -->back content </div>
  </div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front"> 
      <!-- front content -->front content </div>
    <div class="back"> 
      <!-- back content -->back content </div>
  </div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front"> 
      <!-- front content -->front content </div>
    <div class="back"> 
      <!-- back content -->back content </div>
  </div>
</div>
</body>
</html>

11、html5+css3滑出式侧边栏

不需要脚本，靠html5+css3即可完成。基本型式：

多选框的选中和非选中状态影响后面的元素的样子，给后续元素加上css动画。只是有些样式不支持动画。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML5/CSS3点击显示侧边框</title>
<style>
#sideToggle:checked ~ aside {
	left: 0;
}
#sideToggle:checked ~ #wrap {
	padding-left: 200px;
}
body > aside {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -200px;
	width: 200px;
	transition: 0.2s ease-out;
	
	background: #f1103a;
}
#wrap {
	transition: 0.25s ease-out;
}
</style>
</head>
<body>
<input type="checkbox" id="sideToggle">
<aside>
  <h2>我是侧边栏</h2>
</aside>
<div id="wrap">
  <label id="sideMenuControl" for="sideToggle">点击显示/关闭侧边栏</label>
  <h2>HTML5/CSS3点击显示侧边框</h2>
</div>
</body>
</html>

与bootstrap配合

点击前

点击后

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
#sideToggle:checked ~ aside {
	left: -70%;
	overflow: hidden;
}
#sideToggle:checked ~ #wrap {
	display: block;
}
body > aside {
	overflow: scroll;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #f1103a;
	transition: 0.2s ease-out;
	-webkit-transition: 0.2s ease-out;
}
#wrap {
	padding-left: 30%;
	display: none;
}
#sideMenuControl {
	position: fixed;
	top: 2em;
	right: 2em;
	opacity: .5;
}
</style>
</head>
<body>
<input type="checkbox" class="hidden" id="sideToggle">
<div  id='wrap' class="container-fluid" style="background-color:pink;">
  <div class="col-md-12 col-xs-12"> 
    <!--点击返回按钮-->
    <label id="sideMenuControl" for="sideToggle" class="btn btn-default"> <i class="fa fa-close"></i> </label>
    <!--内容开始-->
    <p><img src="images/魔法少女小圆.jpg" class="img-responsive"/> 未来 </p>
    <p>故事中各项城市建设都相当前卫，富有概念性。相对作品制作时间来说是发生在未来的事。
      见</p>
	......
  </div>
</div>
<aside>
  <div class="row pic-list"> 
    <!--图片列表-->
    <div class="col-md-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/fate.jpg" class="img-responsive"/></a></div>
    <div class="col-md-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/lovelive.jpg" class="img-responsive"/></a></div>
	......
  </div>
</aside>
<script src="js/jquery-2.2.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script>
$(document).ready(function() {
    $(".pic-list a.thumbnail").click(function (){

		if($("#sideToggle").prop("checked")){
			$("#sideToggle").prop("checked",false);
		}else{
			$("#sideToggle").prop("checked",true);
		}
	});
});
</script>
</body>
</html>

12、自适应页面3D卡片翻转

用flip插件（https://github.com/nnattawat/flip），因为自适应页面高为空，翻转的时候，元素位置会改变。解决方法，初始设置高等于宽，窗口大小改变时用脚本改变高。

<!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">
<title>demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/default.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> 
  
  <!--翻转图片开始-->
  <div class="row pic-flip">
    <div class="col-md-12">
      <div class="col-md-4 col-xs-6">
        <div class="card">
          <div class="front"><img src="images/i2.jpg" class="img-responsive"/><i class="fa fa-camera"></i></div>
          <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
            <div class="flip-bg">I don't know but I been told</div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-6">
        <div class="card">
          <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
          <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
            <div class="flip-bg">I don't know but I been told</div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-6">
        <div class="card">
          <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
          <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
            <div class="flip-bg">I don't know but I been told</div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-6">
        <div class="card">
          <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
          <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
            <div class="flip-bg">I don't know but I been told</div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-6">
        <div class="row">
          <div class="col-xs-12">
            <div class="col-xs-6">
              <div class="card">
                <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
                <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
                  <div class="flip-bg">I don't know but I been told,sjm is son of bitch,with</div>
                </div>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="card">
                <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
                <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
                  <div class="flip-bg">I don't know but I been told,sjm is son of bitch,with</div>
                </div>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="card">
                <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
                <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
                  <div class="flip-bg">I don't know but I been told,sjm is son of bitch,with</div>
                </div>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="card">
                <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
                <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
                  <div class="flip-bg">I don't know but I been told,sjm is son of bitch,with</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-6">
        <div class="card">
          <div class="front"><img src="images/i2.jpg" class="img-responsive"/></div>
          <div class="back"><img src="css/images/flip-bg.jpg" class="img-responsive"/>
            <div class="flip-bg">I don't know but I been told</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--翻转图片结束--> 
  
</div>

<script src="js/jquery-2.1.4.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.flip.min.js"></script> 
<script>
$(document).ready(function() {
	//鼠标经过是翻转
	$(".card").flip({trigger:"hover"});
	//初始设置元素高
	$(".pic-flip").find(".col-xs-6").each(function(){
    	$(this).children(".card").height($(this).children(".card").width());
  	});
});
//窗口大小改变时改写高
window.onresize = function(){
	$(".pic-flip").find(".col-xs-6").each(function(){
    	$(this).children(".card").height($(this).children(".card").width());
  	});
}
</script>
</body>
</html>

13、空的javascript插件

// JavaScript Document
/*global $ */
(function ($) {
	
    //定义参数
    "use strict";
	
    $.fn.nshseed = function (options) {

        //设置参数默认值
        $.fn.nshseed.defaults = {
          //img : "img",

        };

        var opts = $.extend({}, $.fn.nshseed.defaults, options);

        return this.each(function () {
        //主要内容，事件绑定


        });// this.each结束
    };// 主体结束
  
  //支持方法
  //function imgOutEnter
}($));

生活在他方

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
内部用的html5和css3资料

以下内容基于Bootstrap1、css的样式命名：英文单词+减号+英文单词或者数字，例如：remove-row-padding。尽量不用缩写，用缩写的话必须用正确的英文缩写。2、背景图里面套主体内容，如下图效果处理方式如下 .... .... .container-backgro
复制链接

扫一扫