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 ...
随机推荐
- SQL注入-数据库判断
0x01.sql注入 sql注入是在系统开发的过程中程序员编程不规范,我们可以通过把SQL语句插入到WEB表单中进行查询字符串,最终达成欺骗服务器执行恶意的SQL命令.对于现在的网站SQL注入越来越严 ...
- oracle 数据查询
1,读取从今天到1个月前之间的数据select * from tablewhere column between add_months(sysdate, -1) and sysdate;
- 如何修改SESSION的生存时间
php中session过期时间设置网上很多人给出了解答:修改php配置文件中的session.gc_maxlifetime.如果想了解更多session回收机制,继续阅读.(本文环境php5.2) 概 ...
- zabbix 监控如下内容
我们使用zabbix做了如下的监控: 1.硬件监控. 通过SNMP来进行路由器交换机的监控(这些可以跟一些厂商沟通来了解如何做). 服务器的温度以及其他,可以通过IPMI来实现.当然如果没有硬件全都是 ...
- ansible使用
常用ad hoc命令, 如:ansible raleigh -m shell -a 'echo $TERM' ansible webservers -m service -a "name=h ...
- Python使用MySQL数据库的
然而,2016年开始,我从Python2切换到了Python3,Python2已经基本不再使用,MySQLdb驱动从2014年1月停止了维护.所以,打算重新再来写这篇博客. Python2 ---&g ...
- Unity3d Resources TextAsset 文本
一些小型数据,可以用txt文本作为媒介,进行获取.传输.修改.存储: 比如:User1.2.3.txt,放入 Resources/Data 文件下: 一,Unity3d Resources.Load ...
- 摄像机互联网直播之EasyCloud云平台与EasyNVS云端管控的全局对比
背景分析 近期,Easy系列推出了EasyNVS,在功能上也是可以满足将内网的视频直播转发到公网,再由公网进行视频流的分发. 听起来和EasyCloud功能上是冲突的,其实两者之间的差别还是存在的,本 ...
- String、StringBuffer、StringBuiler区别
1.String与StringBuiler的相同点都是线程不安全的.StringBuffer是线程安全的. 2.String长度不可变,StringBuiler长度可变.当String 使用(+)连接 ...
- C++常备知识总结
1.extern表示是外部函数或外部变量,比如: 1.extern void add(int x,inty);表示该函数主体不在当前模块中,在另一个模块中(文件)2.extern int total; ...