[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 ...
随机推荐
- iOS开发——获取手机当前WiFi名和MAC地址
获取手机WiFi信息. iOS9以前的方法,还是能用,警告就警告吧!iOS9以后使用的是苹果最新的API框架,NetworkExtension/NEHotspotHelper.h,这个框架,第一次开放 ...
- 神经网络 Neuroph - Java Neural Network Platform Neuroph
http://neuroph.sourceforge.net/image_recognition.html https://github.com/neuroph/neuroph
- apache、nginx、iis 全球分布
从下图(2012年8月份的数据)来看,来自俄罗斯的Nginx服务器,主要使用区域也集中在俄罗斯及周边国家.微软的IIS,在中国使用最多,占其总份额的57.6%,其他国家如埃及.沙特阿拉伯等国家也基本使 ...
- OPENCV基本滤波算法
图像滤波的主要目的是为了在保留图像细节的情况下尽量的对图像的噪声进行消除,从而是后来的图像处理变得更加的方便. 图像的滤波效果要满足两个条件:1.不能损坏图像的轮廓和边缘这些重要的特征信息.2.图像的 ...
- CodeForces 625B War of the Corporations
暴力匹配+一点判断 #include <stdio.h> #include <algorithm> #include <string.h> #include < ...
- 将UTF8编码转化为中文 － NSString方法
方法一: 代码如下,如有更好的方法 麻烦贴出来,这个方法是通过webview进行解码的 UIWebView *web = [[UIWebView alloc] init]; NSString *tsw ...
- 常见div+css网页布局（float,absolute）
网页布局-常见 1, float布局 (1)常规方法 <div id="warp"> <div id="column&quo ...
- php部分--文件操作
php中的文件指的是文件和文件夹,不是单指文件. 1.判断文件(判断是文件还是文件夹) 找文件,输出结果为file,代表的是文件. var_dump(filetype("./aa.txt&q ...
- 《玩转Bootstrap（JS插件篇）》笔记
导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...
- smarty3-笔记
smarty3笔记 1.Samrty.class.php 的compile_dir 和template_dir类属性 是private的,setTemplateDir和setCompileDir类方法 ...