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常用操作的更多相关文章

  1. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

  2. [CSS3] 学习笔记-CSS3选择器详解（一）

    1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...

  3. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  4. python3.4学习笔记(十) 常用操作符,条件分支和循环实例

    python3.4学习笔记(十) 常用操作符,条件分支和循环实例 #Pyhon常用操作符 c = d = 10 d /= 8 #3.x真正的除法 print(d) #1.25 c //= 8 #用两个 ...

  5. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  6. tensorflow学习笔记——使用TensorFlow操作MNIST数据（2）

    tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...

  7. Python学习笔记之常用函数及说明

    Python学习笔记之常用函数及说明 俗话说"好记性不如烂笔头",老祖宗们几千年总结出来的东西还是有些道理的,所以,常用的东西也要记下来,不记不知道,一记吓一跳,乖乖,函数咋这么多 ...

  8. IOS学习笔记25—HTTP操作之ASIHTTPRequest

    IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...

  9. java学习笔记07--日期操作类

    java学习笔记07--日期操作类   一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...

随机推荐

  1. iOS下bound，center和frame

    本文转发至:http://www.xuebuyuan.com/1846606.html 在写程序的时候发现,iOS下的坐标.位置很容易弄乱,特别是在不同的坐标系统中,必须完成弄明白一些概念才能做相应的 ...

  2. corosync集群的选举算法

    <Cluster Concepts> http://linux-ha.org/wiki/Cluster_Concepts <Managing Computers with Autom ...

  3. Http协议与TCP协议理解

    TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通 ...

  4. 《C程序设计语言》读书笔记----习题1-20

    练习1-20:编写程序detab,将输入中的制表符替换成适当数目的空格,使得空格充满到下一个制表符终止位的地方,.假设制表符终止位的位置时固定的,比如每隔n列就会出现一个终止位. 这里要理解“制表符” ...

  5. 制作毛玻璃效果 分类： ios技术 2015-07-14 09:03 240人阅读 评论(0) 收藏

    //添加一个图片     UIImageView *imageview = [[UIImageView alloc]init];     imageview.frame = CGRectMake(10 ...

  6. 微信小程序-未接入app.json错误

    微信小程序建立新项目之后会出现app.json文件未接入错误如下图: 一般是因为在下图添加新项目,项目目录这一列,如果不事先建立一个空的文件夹,直接选择则不会出现quickstartup界面 所以在建 ...

  7. Java学习(一)

    各种原因就开始java开发快一个月了.一直也没有正式记录一下...现在开始..O(∩_∩)O~.... 先小结一下学习以来遇到的几个问题: 1.myeclipse的常用快捷键: F2当鼠标放在一个标记 ...

  8. 微软企业库DBBA的研究

    Summary:如何入门使用Data Access Application Block,可以参考Enterprise Library 3.1中文帮助:数据访问应用程序块.这篇文章侧重在DAAB工作原理 ...

  9. UVa 11503 - Virtual Friends

    题目大意:给出若干对朋友关系,每给出一对朋友关系,就输出二者所在关系网中的人数. 首先是对每个人编号,使用map简化编号过程,然后就是使用并查集更新集合.要注意的是当给出A和B的朋友关系时,无论A和B ...

  10. Linux之目录基本操作命令

    Linux之目录基本操作命令 目录基本操作命令 1.tree命令 tree命令以树状图列出目录的内容. 语法 tree(选项)(参数) 选项 1.-a显示所有文件和目录 2.-A使用ASNI绘图字符显 ...