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 ...
随机推荐
- library not found for -lPods-AFNetworking解决放案
出现library not found for -lPods-AFNetworking这个报错, 来自于我从git上面把我项目直接Download下来的,我的项目里面用了CocoaPods的,如今pr ...
- tcpreplay工具安装使用
一．Tcpreplay功能简介 首先推荐一个网站:http://tcpreplay.synfin.net/ ,上面有Tcpreplay的安装包和很多文档,包括手册.man页和FAQ等. Tcprepl ...
- linux嵌入式大神的博客文章---持续更新中
linux kernel子系统相关博客:http://www.wowotech.net/ 经典博文: http://blog.csdn.net/zqixiao_09 http://blog.china ...
- Oracle----oracle小知识总结
1,表列的五种约束 not null, unique,primary key, foreign key, check 2,权限分配 grant 权限 on 表 to 用户 3,表和视图的区别 视图是一 ...
- php 常面试
问题:请用最简单的语言告诉我PHP是什么? 回答:PHP全称:Hypertext Preprocessor,是一种用来开发动态网站的服务器脚本语言. 问题:什么是MVC? 回答:MVC由Model(模 ...
- php 按条件进行计算的方法
$isin = in_array($sheng,$s_sheng);//post过来的省的编码是否在s_sheng(自定义的数组)里,如果在,则加一,如果不在则不加一 if($isin){ //ech ...
- WPF-Binding的源
1. 绑定到其它元素 <Grid> <StackPanel> <TextBox x:Name="textbox1" /> <Label C ...
- GoogleMap-------Google Play services SDK的下载和配置
前言:在android开发项目中当要使用GoogleMap需要有Google Maps Android API的支持,而他包含在了Google Play services SDK中,所以本文将介绍如何 ...
- 这样就能用MathType编辑^符号
大家都知道数学公式中的符号有很多,有些符号的名称还很多,比如,^这个字符,可以是乘方.插入符号.插入符.托字符等.所以一些用户在使用过程中有点搞不清,但是Mathtype的符号模板有很多种,基本可以满 ...
- 关东升的《从零开始学Swift》即将出版
大家好: 苹果2015WWDC大会发布了Swift2.0,它较之前的版本Swift1.x有很大的变化,所以我即将出版<从零开始学Swift> <从零开始学Swift>将在< ...