第五篇、css补充二
一、内容概要
1、图标
2、目录规划
3、a标签中的img标签在浏览器中的适应性
4、后台管理系统设置
5、边缘提示框
6、登录页面图标
7、静态对话框
8、加减框
补充知识：
line-height是行高，也可以定义行间距 用法： 如果想让一段方案垂直居中，可以这么写 html代码： <p>testtesttesttesttest</p> css代码： p{ font-size:12px; width:100px; height:40px; line-height:40px;} 这样p标签的内容就垂直居中了 当行高和所在标签的高度相当那么标签中的内容会垂直居中 PS：在表单中用line-height的值最好不要用百分比表示，要用具体数值，不然在IE6中会和其它浏览器出现偏差
二、图标
关于图标的三种方式
i. 扣图片
ii. css拼接
iii. 自己画( )
下载font-Awesome
1、 把软件包插入到目录中
2、 直接引用
、 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font-awesome-3.2.1/css/font-awesome.css" />
</head>
<body>
<span class="icon-caret-down"></span>
</body>
</html>
图标如下：
三、目录规划
project
-app（写软件的目录）
-s1.html
-s2.html
-css （写css的目录）
- comons.css
-script（js脚本目录）
-commons.js
-plugin (应用别人的插件的目录)
-bootstrap
-bxslider
四 、a标签问题
如果要写上img标签，如果默认放着是没事，如果放在a标签中，在ie浏览器中打开，那么图片就会显示蓝色。造成这样的原因是图片本身有一个边框，解决办法是定义一个选择器，让图片的边框设置为0
a标签如果有内容，那么会有蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.aa a img{
border: ;
}
</style>
<body>
<div class="aa">
<a href="http://www.cnblogs.com/pyrene/"><img src="13.png" style="height: 100px;width: 100px;"></a>
</div> </body>
</html>
五、后台管理系统设置
简单的后台管理
左边是索引菜单，右边是内容
如何让其适应页面，设计思想：
让索引菜单靠近左边的距离设置为0，然后距离为假如100，让内容靠近左边设置为101以上，然后让内容靠近右边的距离设置为0 遇到问题
、如果内容很多但是菜单很少，这个时候考虑怎么把菜单占满页面？bottom直接设置为0，但是要注意top的值要和头部的高度一致 优化后的后台管理
设计思想问题，让左边菜单和上面的头部固定不动，而内容会有个滚动条不断的滚动？
利用overflow：scroll或者auto都可以 overflow：auto 这个内容如果超过设置的高度，那么内容会以滚轮的情况出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: ;
}
.pg-header{
height: 48px;
background-color: paleturquoise;
}
.pg-body .body-menu{
position: absolute;
background-color: inherit;
top: 48px;
width: 180px;
left: ;
bottom: ;
}
.pg-body .body-content{
position: absolute;
top: 48px;
left: 182px;
right: ;
background-color: aquamarine;
bottom: ;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="body-content">
<ul>
<h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1>
<h1>aa</h1><h1>aa</h1><h1>aa</h1><h1>aa</h1>
<h1>aa</h1><h1>aa</h1><h1>aa</h1>
<h1>aa</h1><h1>aa</h1><h1>aa</h1>
<h1>aa</h1><h1>aa</h1><h1>aa</h1>
</ul>
</div>
</div>
图示：
六、边缘提示框
1、如何写提示框：即写一个td，在td里面嵌套div标签
2、写边缘标签的时候就可以用relative，absolute
只要关于固定的都可以用relative和absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td>第一</td>
<td>第二</td>
<td>
<div style="position: relative;">
<a>删除</a>
<div style="position:absolute;left: 32px;top: -16px;">
<input type="button" value="确定">
<input type="button" value="取消">
</div>
</div>
</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>删除</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
图示：
七、登录页面input和图标
这里设置的user 由于没有限制长度所以 中的div的标签宽度是屏幕那么长，所以要把R 从左开始向右飘，并且要让R相对于user固定，设置外边距防止输入的内容把R覆盖 padding-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.user{
position: relative; }
.user input{
height: 20px;
width: 200px;
padding-right: 50px;
}
.user .ren{
position: absolute;
top: ;
left: 230px; }
</style>
</head>
<body>
<div class="user">
<input type="text"/>
<span class="ren">R</span>
</div> </body>
图示
实际图示：
旁边的小人
八、静态对话框
让图片永远放在屏幕的正中央 这里面分为了3层
、 最底层
、 中间的遮罩层的实现
a) 用position：fixed
b) top: left: right: bottom:
、 最中间的加载层 要放入到遮罩层上面
问题点一、
中间的遮罩层和最上面的层，怎么分别哪个在最上面？这里用z-index top和left等都支持百分比
margin-left默认负值向左边移动。正值向右移动
margin-top 默认负值向上移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: ;
}
.model{
position: fixed;
top: ;
left: ;
right: ;
bottom: ;
background: rgba(,,,.);
z-index: ;
}
.content{
height: 300px;
width: 400px;
background-color: white;
position: fixed;
top: %;
left: %;
z-index: ;
margin-left: -200px ;
margin-top: -150px;
}
</style>
</head>
<body style="height: 2000px;background-color: red">
<div>
<h1>aaaa</h1>
</div>
<div class="model"></div>
<div class="content"></div> </body>
</html>
图示：
九、加减框
要求实现下面红色里面的加减框
这里分为三部分
、在整个div里面定义三个div也就是- + 和input内容
然后都让他们往左飘
、让+和-号里面定高度，并且都要让他们居中显示，用到line-height.
还要让文字居中显示，所以用到text-align:center；
、定义input选择器的时候因为有个内边距，所以要让padding： 边框为
，并且还要设置左边框，和有边框，并且让宽度减去这个边框的值 、 加减框的实现：
点击plus的时候
找到text
修改text的value
alert 显示提示框 ，这个可以用来制作简单的病毒
、 cursor:pointer鼠标放到标签上面会显示一个小手
、 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left{
float: left;
}
.wrap{
height: 22px;
width: 150px;
background-color: chartreuse;
border: 1px solid red;
}
.minus{
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.plus{
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
cursor: pointer; }
.wrap .count input{
padding: ;
border: ;
width: 104px;
height: 22px;
border-right: 1px solid red;
border-left: 1px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="minus left" onclick="minus()">-</div>
<div class="count left">
<input id="count" type="text" value=""/>
</div>
<div class="plus left" onclick="plus();">+</div>
</div>
<script>
function plus(){
var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str);
var new_int = old_int + ;
document.getElementById("count").value = new_int;
}
function minus(){
var old_str=document.getElementById("count").value;
var old_int=parseInt(old_str);
var new_int=old_int-;
document.getElementById("count").value=new_int;
}
</script>
</body>
</html>
完成图示：鼠标放到加减号上面会变成一个小手，点击会加减
第五篇、css补充二的更多相关文章
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- Selenium(五)：CSS选择器(二)
1. CSS选择器 1.1 选择语法联合使用 CSS selector的另一个强大之处在于:选择语法可以联合使用. html代码: <div id='bottom'> <div cl ...
- 第五篇 CSS入门 明白 三种嵌套形式，三种常用控制器
CSS入门 css是 层叠式样式表 css的作用是什么呢?举个抽象的例子啊,HTML是人,CSS则是衣服... css给html穿上衣服,有三种形式: 内嵌.内联.外联. 这三种形式,优先级为 ...
- 第五篇、C_二叉搜索树
1.二叉树的查找功能的时间复杂度比链表的好 2.删除节点的稍微复杂点 >没有节点,直接删除 >只有左节点(或者右节点),直接用该节点的左节点(或者右节点)替代要删除的节点 >有左节点 ...
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- 前端总结·基础篇·CSS（一）布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 【Python五篇慢慢弹】快速上手学python
快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...
- 【Python五篇慢慢弹】数据结构看python
数据结构看python 作者:白宁超 2016年10月9日14:04:47 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondoc ...
随机推荐
- Android 函数回调
1 http://blog.csdn.net/xyz_lmn/article/details/8631195 我感觉fragment和activity的通信形象的解释了函数的回调,看别人的博客越看越迷 ...
- simple_pool对象池——优化<二>
本文章由cartzhang编写.转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/55051570 作者:car ...
- Oracle PL/SQL 高级编程
1. 复合数据类型--记录类型 Ø 语法格式 type 类型名 is record ( 字段1 字段1类型 [not null]:=表达式1; 字段2 字段2类型 [not n ...
- hasOwnProperty()与in操作符的区别
hasOwnProperty() 判断属性是否是实例化(不包括原型)的属性, 存在会返回true; 否则, 返回false in 无论属性是存在实例本身中, 还是原型对象中, 存在会返回true; ...
- 多媒体开发之--- live555 vs2010/vs2013下编译，使用，测试
Ⅰ live555简介 Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等的支持.Live555实现了对多种音视频编 ...
- eclipse导入web工程变成Java工程，解决方案
经常在eclipse中导入web项目时,出现转不了项目类型的问题,导入后就是一个java项目. 解决步骤: 1.进入项目目录,可看到.project文件,文本编辑器打开. 2.找到<nature ...
- PHP面试题总结
2017年5月15日19:20:26 1.请用最简单的语言告诉我PHP是什么? PHP全称:Hypertext Preprocessor,是一种用来开发动态网站的服务器脚本语言. 2. 面试题地址:h ...
- thrift实例
Thrift实例 Apache thrift是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架. 它采用接口描述语言定义并创建服务,支持可扩展的跨语言服务开发,所包含的代码生 ...
- centos7.0 crontab 的yii计划任务没有执行
*/1 * * * * /www/yii solr/update-article 创建了每分钟执行一次的计划而计划任务没有执行 原因是自己少加了执行用户 */1 * * * * php /www/yi ...
- hdu3579(线性同余方程组)
Hello Kiki Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...