[CSS3] 学习笔记-CSS3常用操作
1、对齐操作
使用margin属性进行水平对齐；使用position进行左右对齐；使用float属性进行左右对齐。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="div"></div>
</body>
</html>
对应的CSS文件：
*{
margin: 0px;
}
.div {
width: 70%;
height: 1000px;
background-color: red;
margin: 100px auto;
/*margin-left: auto;*/
/*margin-right: auto;*/
/*position: absolute;*/
/*left:0px;*/
/*float:right;*/
}
2、分类操作
属性：
height:设置元素高度
line-height:设置行高
max-height:设置元素的最大高度
max-width:设置元素的最大宽度
min-width:设置元素的最小宽度
min-height:设置元素的最小高度
width:设置元素宽度
<body>
<p class="p1">This is my web page.This is my web page.This is my web page.</p>
<p class="p2">This is my web page.This is my web page.This is my web page.</p>
<p class="p3">This is my web page.This is my web page.This is my web page.</p>
</body>
对应的CSS文件：
.p1{
/*width:400px ;*/
line-height: normal;
/*max-width:300px;*/
min-width: 300px;
}
.p2{
width: 400px;
line-height: 200%;
}
.p3{
width:400px;
line-height: 50%;
}
属性：
clear:设置一个元素的侧面是否允许其他的浮动元素
cursor:规定当指向某元素之上时显示的指针类型（鼠标的显示类型，例如箭头、手型）
display:设置是否及如何显示元素（列表可通过该属性，更改成横向的或者竖向的）
float:定义元素在哪个方向浮动
position:把元素放置到一个静态的、相对的、绝对的固定的位置
visibility:设置元素是否可见或不可见
<body>
<p>hello hello hello </p>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</body>
对应的CSS文件：
p{
/*cursor: all-scroll;*/
cursor:ew-resize;
}
li{
display: inline;
visibility: hidden;
}
3、导航栏
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
对应的CSS文件：
/*垂直导航栏*/
/*ul{*/
/*list-style-type: none;*/
/*margin:0px;*/
/*padding: 0px;*/
/*}*/
/*a:link,a:visited{*/
/*text-decoration: none;*/
/*display: block;*/
/*background-color: burlywood;*/
/*color: aliceblue;*/
/*width: 50px;*/
/*text-align: center;*/
/*}*/
/*a:active,a:hover{*/
/*background-color: crimson;*/
/*}*/
/*水平导航栏*/
ul{
list-style-type: none;
margin:0px;
padding: 0px;
background-color:burlywood ;
width: 250px;
text-align: center;
}
a:link,a:visited{
font-weight: bold;
text-decoration: none;
background-color: burlywood;
color: aliceblue;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: crimson;
}
li{
display: inline;
padding:3px ;
padding-left: 5px;
padding-right: 5px;
}
4、图片
<body>
<div class="container">
<div class="image">
<a href="#" target="_self">
<img src="1.jpg" alt="风景" width="150px" height="150px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="1.jpg" alt="风景" width="150px" height="150px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
</div>
</body>
对应的CSS文件：
body{
margin: 10px auto;
width: 50%;
height: auto;
}
.image{
border: 10px solid darkgray;
width: auto;
height: auto;
float: left;
text-align: center;
margin:5px;
}
img{
margin: 5px;
/*透明度*/
opacity: 0.8;
}
.text{
font-size:12px;
margin-bottom: 5px;
}
a:hover{
background-color: burlywood;
}
[CSS3] 学习笔记-CSS3常用操作的更多相关文章
- [CSS3] 学习笔记-CSS3盒子样式
1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...
- [CSS3] 学习笔记-CSS3选择器详解（一）
1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- python3.4学习笔记(十) 常用操作符,条件分支和循环实例
python3.4学习笔记(十) 常用操作符,条件分支和循环实例 #Pyhon常用操作符 c = d = 10 d /= 8 #3.x真正的除法 print(d) #1.25 c //= 8 #用两个 ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据（2）
tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...
- Python学习笔记之常用函数及说明
Python学习笔记之常用函数及说明 俗话说"好记性不如烂笔头",老祖宗们几千年总结出来的东西还是有些道理的,所以,常用的东西也要记下来,不记不知道,一记吓一跳,乖乖,函数咋这么多 ...
- IOS学习笔记25—HTTP操作之ASIHTTPRequest
IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...
- java学习笔记07--日期操作类
java学习笔记07--日期操作类 一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...
随机推荐
- 项目经验分享——Java常用工具类集合 转
http://blog.csdn.net/xyw591238/article/details/51678525 写在前面 本文涉及的工具类部分是自己编写,另一部分是在项目里收集的.工具类涉及数 ...
- php的autoload机制
php5版本中,当你尝试使用一个未定义的类或者接口时,会自动调用__autoload()函数 例如1 <?php function __autoload($class_name){ includ ...
- 通过条件注释<!--[if IE]><!-->判断浏览器
有时我们会在网站头部看到: <!--[if IE 7]> <![endif]--> 或者 <!--[if lt IE 9]> <![endif]--> ...
- python模块--ip地址转换为整数
python整数与IP地址转换 [转] 我们有时会将一个整数与IP地址进行互换,用python代码实现很简单 将一个整数如2000000,变为一个IP地址的方式 >>> import ...
- xCode中如何安装旧的模拟器
http://blog.csdn.net/cmengzhongren/article/details/50414493 这里给出如何把老版本的SDK加入到新的Xcode中的方法.其实很简单,就是将老版 ...
- iOS开源库--最全的整理
youtube下载神器:https://github.com/rg3/youtube-dl我擦咧 vim插件:https://github.com/Valloric/YouCompleteMevim插 ...
- MyEclipse构建Web Service（Xfire框架）
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 任务要求: 使用Xfire实现一个简单的CalculatorWebServ ...
- mysql 隔离级别与锁
1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约 ...
- linux下配置ip地址四种方法(图文)
(1)Ifconfig命令 第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig ethx i ...
- XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法
去第三方的info.plist文件中,比如TencentOpenApi_IOS_Bundle.bundel 的info.plist ,删除 executable file 这一行