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 ...
随机推荐
- Debian run jar like a native program
sudo apt install binfmt-support jarwrapper 比如 swagger-codegen wget -O ~/.local/bin/swagger-codegen h ...
- MySQL 5.6修改data目录
默认数据存放位置: C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.6\ 打开该位置,即可看见my. ...
- C++之类的静态成员变量和静态成员函数
static静态成员函数 在类中.static 除了声明静态成员变量,还能够声明静态成员函数. 普通成员函数能够訪问全部成员变量.而静态成员函数仅仅能訪问静态成员变量. 我们知道.当调用一个对象的成员 ...
- springMVC对简单对象、Set、List、Map的数据绑定和常见问题.
算了,就不粘贴了,到原文去查看吧! springMVC对简单对象.Set.List.Map的数据绑定和常见问题.
- marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）
marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...
- [前端开发] 8 个很有用的免费CSS的UI工具箱
搞web开发的不能不提到前端,下面就和大家分享下8个很有用的免费CSS的UI工具箱 1) UI CSS ui.css 是一个用来创建简洁的 Web 用户界面的工具,下载的文件只包含一个 css 文件. ...
- Android-ViewPagerIndicator框架使用——Circle
前言:Circle适用于应用新功能的展示页和商品的多张图片的展示功能. 1.定义布局文件:SampleCirclesDefault中添加了一个布局:simple_circles. 布局中定义一个Lin ...
- 制作dos启动u盘
需要准备的工具: 空U盘的U盘HP优盘启动盘格式化工具 链接:https://pan.baidu.com/s/1i59wgUp 密码:l5ke 1.1插入U盘,打开 HP优盘启动盘格式化工具 1. ...
- Android开发：《Gradle Recipes for Android》阅读笔记(翻译)2.1——设置项目参数
问题: 开发的时候经常需要向项目中添加一些额外的参数或者硬编码的值. 解决方案: 使用ext块设置公用的值.如果需要从build文件中移除这些值,可以将参数放到gradle.properties文件中 ...
- PHP中mysql_fetch_row()、mysql_fetch_assoc()和mysql_fetch_array()的联系
总是记不住或者混淆mysql_fetch_row().mysql_fetch_assoc()和mysql_fetch_array()这三个函数的朋友们注意了,今天我在这里给大家总结一下他们之间的关系, ...