css系列（5）css的运用（一）
从本节开始介绍css配合html可以达到的一些效果。
(1)导航栏:
<html>
<head>
<title>示例5.1</title>
</head>
<style>
#nav_div{
height:60px;
background-color:black;
}
a{
display:inline-block; /*设为inline-block是为了让同类标签在同一行显示*/
color:white;
line-height:60px; /*设置行高*/
width:100px;
text-align:center; /*让文本居中显示*/
float:left; /*设置为左浮动，仅对内联元素有效*/
}
#nav_div a:hover{ /*当鼠标滑动到a标签上时*/
cusor:pointer;
font-size:20px;
background-color:#625D5D; /*背景颜色*/
color:#FFF30E; /*字体颜色*/
}
</style>
<body style="margin:0px;">
<div id="nav_div">
<a href="#">首页</href>
<a href="#">公司简介</href>
<!--为什么界面中这个只能链接不靠右显示-->
<a style="float:right;margin-right:0px;" href="#">智能链接</a>
</div>
<body>
</html>
(2)行级元素div的块级用法:
<!DOCTYPE html>
<html>
<head>
<title>示例5.2</title>
<style>
#padding_div{
dispaly:inline-block;
width:200px;
height:150px;
background:black;
padding-top:50px;
float:left;
}
#padding_div div{
width:100px;
height:100px;
background:green;
}
#border_div{
dispaly:inline-block;
width: 195px;
height: 195px;
background: red;
margin-left:30px;
border-style:solid;
border-left-width:20px;
float:left;
}
</style>
</head>
<body>
<div>
<!--仅仅当两个div都设为内联时，他们的排列才遵守同一规则-->
<div id="padding_div">
<div></div>
</div>
<div id="border_div">
</div>
</div>
</body>
</html>
(3)div的overflow属性:
<!DOCTYPE html>
<html>
<head>
<title>示例5.3</title>
<style>
.over_div{
display:inline-block;
width:150px;
height:200px;
background-color:grey;
color:yellow;
}
#over01{
overflow:visible;
}
#over02{
overflow:hidden;
}
#over03{
overflow:scroll;
}
#over04{
overflow:auto;
}
</style>
</head>
<body>
<div>
<div class="over_div" id="over01">
默认值。内容不会被修剪，会呈现在元素框之外。
overflow属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使
元素框中可以放下所有内容也会出现滚动条。
</div>
<div class="over_div" id="over02">
内容会被修剪，并且其余内容是不可见的。
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使
元素框中可以放下所有内容也会出现滚动条。
</div>
<div class="over_div" id="over03">
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使
元素框中可以放下所有内容也会出现滚动条。
</div>
<div class="over_div" id="over04">
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使
元素框中可以放下所有内容也会出现滚动条。
</div>
</body>
</html>
(4)表单和div的混合使用:(仿照腾讯微博注册登录页面)
<!DOCTYPE html>
<html>
<head>
<title>示例5.4</title>
<style>
body{
background-color:#73CFF1;/*蓝色色调*/
margin-top:0px;
}
#main_div {
width: 800px;
height: 600px;
background-color: #ffffff;/*白色*/
margin: auto;/*默认居中*/
}
div.block_div{
width:798px;
background-color: #ffffff;
border:1px solid;
border-color: #ffffff;
}
#div_block_01{
height:60px;
margin-left:20px;
border:1px solid;
border-color:#ffffff;
margin-top: 20px;
}
#img_div{
float:left;
margin-left:20px;
margin-top:10px;
width:50px;
border:1px solid;
border-color:#ffffff;
margin-left:50px;
}
#text_div{
border: 1px solid;
border-color:#ffffff;
float:left;
border:1px solid;
border-color:#ffffff;
margin-left:20px;
}
#div_block_02{
margin-top:5px;
width:798px;
height:225px;
border:1px solid;
border-color:#ffffff;"
}
#form_div{
width:510px;
height:200px;
background-color:#FFFDDF;
border:1px solid;
border-color:#ffffff;
margin:0px auto;
}
span{
font-size:15px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="main_div">
<div class="block_div">
<div id="div_block_01">
<div id="img_div">
<img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_tencent_QQ01.png"></img>
</div>
<div id="text_div">
<pre style="font-size:13px;color:black;"><b>用QQ号码注册</b></pre>
<pre style="font-size: 11px;color:black;margin-top:-10px;">用QQ号码开通可以方便你在微博上找到QQ好友，腾讯微博承诺，绝不会泄漏您的QQ号码。</pre>
</div>
</div>
<div id="div_block_02">
<div id="form_div">
<form action="" method="post">
<br/>
<span>QQ帐号： <input style="margin-bottom: 10px;" type="text" size="25";name="用户名" value=""/></span><br/>
<span>QQ密码： <input type="text" size="25"/><span style="color:blue;font-size:10px">忘记密码?</span></span>
<div style="border:1px solid;border-color:#ffffff;height:100px;margin-top: -15px;"><br/>
<p><b style="margin-left:80px;"><input type="checkbox"/>下次自动登录</b></p>
<p><b style="color:blue;margin-left:80px;" ><input type="button" value="开通微博"/></b></p>
</div>
</form>
</div>
</div>
</div>
<div>
</body>
<html>
(5)设置文本属性:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.p1 {
word-spacing: 15px; /*单词间距*/
Letter-spacing:5px; /*字母间距*/
text-indent:10px; /*首行的文本缩进*/
line-height:30px; /*行高*/
}
.p2 {
Text-align:center; /*设置文本居中*/
}
</style>
</head>
<body>
<p class="p1">CSS是Csssascading Style Sheet 这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思。CSS能让网页制作者有效的定制、改善网页的效果。CSS是对HTML的补充，网页设计师曾经为无法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题。</p>
<p class="p2">帝子降兮北渚，目眇眇兮愁予。洞庭波兮木叶下...</p>
</body>
</html>
css系列（5）css的运用（一）的更多相关文章
- css系列教程--css文件的创建
css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...
- CSS系列：CSS常用样式
1. 通用样式 Base.css * { margin:; padding:; } body { width: 1000px; margin: 0 auto; font-size: 12px; fon ...
- CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- CSS系列：CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- CSS系列：CSS中盒子之间的关系
1. 标准文档流 标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...
- CSS系列：CSS中盒子的浮动与定位
1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...
- CSS系列：CSS文字样式
1. 设置字体 在CSS中字体通过font-family属性来设置. font-family: Verdana, Arial, Helvetica, sans-serif; 上面的字体设置告诉浏览器首 ...
- CSS系列：CSS表格样式
1. 设置单元格的边框 border-collapse: collapse; 2. 边框的分离 对table使用CSS实现cellspacing的属性border-spacing. border-sp ...
- 深入理解css系列：css定位
一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...
随机推荐
- 收集别人的一些第三方(MARK)
本文是恢复数据,数据丢失前,原文由 @shiren1118 发表于 2012-12-28,对 Ruby 社区对 iOS 开发感兴趣的朋友来说,非常有价值. iosboilerplate这个选项是比较成 ...
- hadoop工作相关
网站点击流日志分析,客户画像,推荐系统,bi系统
- 导入mysql文件提示“ASCII '\0' appeared in the statement”
在windows服务器上导入mysql文件时,出现以下报错:ASCII '\0' appeared in the statement, but this is not allowed unless o ...
- 【转】Monkey测试3——Monkey测试结果分析
Monkey测试结果分析 一. 初步分析方法: Monkey测试出现错误后,一般的差错步骤为以下几步: 1. 找到是monkey里面的哪个地方出错 2. 查看Monkey里面出错前的一些事件动作,并手 ...
- centos5/6/7下yum安装zabbix-agent(被控端)
由于之前安装都是拷贝同事的zabbix_agent.tar.gz包,可是我在网上找了一大圈都没有找到这个tar包是从哪里来的,毕竟新手,太笨...so最后自己排错,找到了比较便捷的方式,直接通过yum ...
- [搬家]新域名 akagi201.org
现在感觉自己做了好多年的垃圾信息制造者 以后只在网络上发布有用的东西, 垃圾或者对别人没用的东西就放到自己的硬盘上把 http://akagi201.org
- Struts2框架拦截器：
Struts 2框架提供了良好的预配置,并准备使用的盒拦截.下面列出了几个重要的拦截器: SN Interceptor & 描述 1 aliasAllows parameters to hav ...
- python升级后pip 不可用 卸载pip
python版本由2.6升级到2.7之后,用pip提示报错 找了一下原因,网上的版本很多.弄来弄去比较麻烦 来点简单粗暴的 1.卸载pip yum remove python-pip 2.下载 cur ...
- matlab中双站异面直线法定位目标
calc.m %% 参数信息初始化 [x1,y1,z1]=deal(); [x2,y2,z2]=deal(,,); m1=/; n1=/; p1=^(/)/; m2=; n2=-^(/)/; p2=^ ...
- [网络通信] OSI七层模型思维导图
ISO:国际标准化组织:OSI:开放系统互联 (部分描述不准确和不详细)