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 ...
随机推荐
- Java中List的排序和List的MAp
这里是一个类中类去实现条件优先排序的问题 package com.sun; import java.util.ArrayList; import java.util.Arrays; import ja ...
- configure: error : no acceptable C compiler found in $PATH
先要用yum install yum-fastestmirror更新下源 # yum -y install gcc
- abp发布需要注意的问题
1>报system.object不存在. 需要从相关目录下面复制System.Runtime.dll eg:C:\Program Files (x86)\Reference Assemblies ...
- jQuery插件-json2.js
from:http://blog.csdn.net/gjb724332682/article/details/46682743 前言 json2.js是一个json插件,下载地址:https://gi ...
- idea Plugin "Maven Integration Extension" was not loaded: required plugin "Maven Integration" is disabled
由于自己运行了eclipse maven及idea maven 同时操作,可能产生了以上错误.既: idea Plugin "Maven Integration Extension&quo ...
- Android无线测试之—UiAutomator UiDevice API介绍七
截图与等待空闲 一.截图和等待空闲相关知识: 1)图片缩放比例:例如图片从100像素缩小到50像素 2)图片质量:是指图片大小,质量越高图片越大,质量越低图片越小 3)File类:指的是一个文件或者一 ...
- 【BZOJ4974】字符串大师 KMP
[BZOJ4974]字符串大师 Description 一个串T是S的循环节,当且仅当存在正整数k,使得S是T^k(即T重复k次)的前缀,比如abcd是abcdabcdab的循环节.给定一个长度为n的 ...
- 【BZOJ2005】[Noi2010]能量采集 欧拉函数
[BZOJ2005][Noi2010]能量采集 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把 ...
- Nginx 解决WebSocket TCP 转发问题
背景: IM 即时通讯时候 , 前期我用的是IP 没什么问题,当然上线肯定要搞个域名搞搞了! 那么问题来了------>Nginx 我按照原先那样配置时候不行了, 连接不了. 解决方法: ...
- js的简单的逻辑算法题
比如题目:寻找1~1000之内,所有能被5整除.或者能被6整除的数字 1 for(var i = 1 ; i <= 1000 ; i++){ 2 if(i % 5 == 0 || i % 6 ...