前端代码目录结构、常用 piugin、元素补充用法及其它注意事项

目录结构：

　　app： .html文件

　　css:　　.css文件

　　script: 脚本文件

　　plugin: 插件（此目录放一些通用代码）

注意事项：

　　1.在IE浏览器下img会显示边框，为了保证兼容性，应在css样式全局写上 img(border:0px;)

　　2.input 标签默认有 :focus() 伪类样式（点击input输入框，input边框会有颜色变化和稍有突出）和 padding，在对input定位需要比较精确的时候，要设置input{padding:0px;}(其实在这也没必要单独写，个人习惯会在全局写 *{padding:0px;margin:0px;})

元素补充用法：

　　!important: 例：color:#fff; !important 会让此属性的优先级最高，永远不能被覆盖。

　　overflow:auto; 如果文件超出页面可以自动显示滚动条。

清除浮动：

.clearfix:after{
      content:‘111‘;
      display: block;
      clear:both;
      visibility: hidden;
      height:0;

}

plugin:

后台页面模板：

代码：

<!DOCTYPE html>
<html>
<head>
<meta chartset=‘utf-8‘>
	<title></title>
<style type="text/css">
*{
	padding:0px;
	margin:0px;
}
img{
	border:0px;
}
.header{
	height:40px;
	background: yellow;
}
.fg-body .body-menu{
	width:200px;
	background: gray;
	position: absolute;
	bottom: 0px;
	top:40px;
	left:0;
	overflow: auto;
}
.fg-body .body-content{
	position: absolute;
	left:230px;
	border: 0px;
	top:40px;
	right:0px;
	bottom: 0px;
	background: green;
	overflow: auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="fg-body">
	<div class="body-menu">
		<ul>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
		</ul>
	</div>
	<div class="body-content">
		<ul>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li><li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
			<li>aaaaaaaa</li>
		</ul>
	</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
<style type="text/css">
.login{
	width:300px;
	position: relative;
}
.login input{
	padding-right: 30px;

}
.login span{
	position: absolute;
	left:249px;

}
</style>
</head>
<body>
<div class="login">
	<label for="text">用户名：</label>
	<input type="text" id="text">
	<span>img</span>
</div>
</body>
</html>

input

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
<style type="text/css">
*{
	padding:0px;
	margin:0px;
}
img{
	border:0px;
}
.left{
	float: left;
}
.box{
	width:150px;
	height:25px;
	/*background: yellow;*/
	border:1px solid gray;
}
.box .sym{
	width:30px;
	height: 25px;
	line-height: 25px;
	/*background: green;*/
	text-align: center;
	cursor:pointer;
}

.box .content input{
	padding:0px;
	border:0px;
	width:88px;
	height:25px;
	border-left:1px solid gray;
	border-right:1px solid gray;

}
</style>

</head>
<body>
<div class="box">
	<div class="sym left">-</div>
	<div class="content left">
		<input type="text"  id="count" />
	</div>
	<div class="sym left">+</div>
</div>

</body>
</html>

尖角、引入图标：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../font-awesome/font-awesome/css/font-awesome.css">
    <style>
        .clearfix:after{
            content:‘111‘;
            display: block;
            clear:both;
            visibility: hidden;
            height:0;

        }
		.c{
			background-color:red;
		}

		.c .item{
			float:left;
			width:30px;

		}

        .test{
            background-color: red;
        }
        .test:after{
            content: "后";
        }
        .test:before{
            content: ‘前‘;
        }

        .w:hover{
            border:yellow;
        }

        .jianjiao1{
            display: inline-block;
            border-top: 30px blue solid;
            border-right: 30px transparent solid;
            border-bottom: 30px transparent solid;
            border-left: 30px transparent solid;
        }

        .box{
            /*width:60px;*/
            height:80px;
            background: #f5f5f5;
        }
        .box .jianjiao2{
            margin-top: 20px;
            display: inline-block;
            border-top: 30px blue solid;
            border-right: 30px transparent solid;
            border-bottom: 30px transparent solid;
            border-left: 30px transparent solid;
        }
        .box .jianjiao2:hover{
            margin-top: 5px;
            border-top: 30px transparent solid;
            border-right: 30px transparent solid;
            border-bottom: 30px blue solid;
            border-left: 30px transparent solid;
        }
	</style>
</head>
<body>
    <div class=‘c clearfix‘>
		<div class=‘item‘>123</div>
		<div class=‘item‘>456</div>
	</div>

    <div class="w">
        <div>11111111</div>
        <div class="p">2222222222</div>
    </div>

    <!--尖角-->
    <div class="jianjiao1"></div>

    <div class="box fa.fa-camera" >
        <div class="jianjiao2"></div>
    </div>
    <div class="c icon-anchor">

    </div>
    <div class="icon-camera">

    </div>

</body>
</html>

模态对话框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
<style type="text/css">
.mode1{
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index: 6;
	background: rgba(0,0,0,0.6);
}
.content{
	width:500px;
	height:400px;
	background: #fff;
	position: fixed;
	top:50%;
	left:50%;
	z-index: 8;
	margin-left: -250px;
	margin-top: -230px;
}
</style>
</head>
<body>
<div style="background:green;width:2000px;height:2000px;">模态对话框</div>
<div class="mode1"></div>
<div class="content"></div>
</body>
</html>

时间： 2024-10-03 13:47:42

前端代码目录结构、常用 piugin、元素补充用法及其它注意事项的相关文章

TensorFlow0.8代码目录结构讲解

源:http://www.linuxidc.com/Linux/2016-07/133215.htm TensorFlow0.8发布以来受到了大量机器学习领域爱好者的关注,目前其项目在github上的follow人数在同类项目中排名第一.作为google的第一个开源项目,TensorFlow的源码结构较为清晰,相关的代码注释覆盖较全.本文首先从代码结构入手,分析TesnsorFlow的各个模块构成. 根目录结构的相关介绍以下是TensorFlow项目根目录下的文件结构(目前以TensorFlo

二、Linux目录结构&常用指令

Linux目录结构: ps -ef:任务管理器 ifconfig: 查看ip ping : 测试与目标主机的连通性,ctrl+c停止目录指令: ll:列出当前目录下的文件信息 ls -al : 列出当前目录下的文件信息(包含隐藏文件) ll /bin/: 列出根目录下的bin目录下的文件信息 pwd:打印当前目录 cd /:切换到根目录备份压缩: tar命令语法:tar命令 -c 建立一个压缩文件的参数指令(create) --压缩 -x 解开一个压缩文件的参数指令(extract)

xcode修改代码目录结构出现clang: error: no such file or directory 解决方法

需要迁移一个开源工程的一部分内容到自己工程,迁移对方的工程到自己工程之后,因目录结构配置整理需要,对嵌入的工程目录进行了结构改变,编译后出现: clang: error: no such file or directory: '/Users/username/Desktop/echonest-echoprint-ios-sample-b937c04/Classes/ClassName/clang: error: no such file or directory:' 揪其原因,很明显,因为改变了

WebRTCDemo.apk代码走读（八）：代码目录结构

转载注明出处http://blog.csdn.net/wanghorse ├── ./base //基础平台库,包括线程.锁.socket等 ├── ./build //编译脚本,gyp ├── ./common_audio //基础公共的音频处理 │ ├── ./common_audio/include //就一个类型转换头文件 │ ├── ./common_audio/resampler //音频重采样代码 │ ├── ./common_audio/signal_processing //音

工程代码目录结构及框架

main.cpp corbaIDLCppMapping XXXIDL6SC.CPP ConfigFiles LogClientConfig.xml ProgramSpecificConfig.xml ProgramCommonConfig.xml CommonDefs EnumDefs.h 定义枚举类型 XXConstDefs.h 定义常量 XXADTDefs.h

Day4 - 迭代器&生成器、装饰器、Json & pickle 数据序列化、软件目录结构规范

---恢复内容开始--- 本节内容迭代器&生成器装饰器 Json & pickle 数据序列化软件目录结构规范作业:ATM项目开发 1.列表生成式,迭代器&生成器列表生成式需求:列表a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求把列表里的每个值加1 1 a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 2 b = [] 3 for i in a: 4 b.append(i+1) 5 a = b 6 print(a) 普通青

软件目录结构规范

软件目录结构规范为什么要设计好目录结构? "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同学认为,这种个人风格问题"无关紧要".理由是能让程序work就好,风格问题根本不是问题. 另一类同学认为,规范化能更好的控制程序结构,让程序具有更高的可读性. 我是比较偏向于后者的,因为我是前一类同学思想行为下的直接受害者.我曾经维护过一个非常不好读的项目,其实现的逻辑并不复杂,但是却耗费

python软件目录结构规范

软件目录结构规范软件开发规范一.为什么要设计好目录结构? 1.可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 2.可维护性高: 定义好组织规则后,维护者就能很明确地知道,新增的哪个文件和代码应该放在什么目录之下.这个好处是,随着时间的推移,代码/配置的规模增加,项目结构不会混乱,仍然能够组织良好. 二.目录组织方式关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结