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. （译）Windsor入门教程---第五部分 添加日志功能

    介绍     现在我们已经有了基础的框架了,是时候添加内容了,那么我们首先应该考虑的就是在应用程序中添加日志功能.我们会使用Windsor来配置,在这一部分,你将学习Windsor之外的其他功能. L ...

  2. Undefined symbols for architecture i386: "_crc32", referenced from:——crc链接错误

    有时候用别人的框架,你会碰到下面的错误,很是吓人,什么玩意,我怎么看不懂!!! Undefined symbols for architecture i386:  "_RELEASE&quo ...

  3. ios 简单的plist文件读写操作（Document和NSUserDefaults）

    最近遇到ios上文件读写操作的有关知识,记录下来,以便以后查阅,同时分享与大家. 一,简单介绍一下常用的plist文件. 全名是:Property List,属性列表文件,它是一种用来存储串行化后的对 ...

  4. MySQL临时表与派生表(简略版)

    MySQL临时表与派生表 当主查询中包含派生表,或者当select 语句中包含union字句,或者当select语句中包含一个字段的order by 子句(对另一个字段的group by 子句)时,M ...

  5. Tsinsen-A1490 osu! 【数学期望】

    问题描述 osu!是一个基于<押忍!战斗!应援团><精英节拍特工><太鼓达人>等各种音乐游戏做成的一款独特的PC版音乐游戏.游戏中,玩家需要根据音乐的节奏,通过鼠标 ...

  6. log4j的用法

    1.导入 2.在src下新建log4j.properties,内容如下 log4j.rootLogger=DEBUG, A1 ,R log4j.appender.A1=org.apache.log4j ...

  7. 在 WindowMobile 上的模拟LED 显示屏插件（转）

    源:在 WindowMobile 上的模拟LED 显示屏插件 我在给一个对话框上的控件查找翻看合适的图标时,无形中看到了一个LED显示屏的图标,这里所说的LED显示屏是指由很多LED灯密集排列组成的点 ...

  8. 无锁同步-C++11之Atomic和CAS

    1.概要 本文是无锁同步系列文章的第一篇,主要探讨C++11中的Atomic. 我们知道在C++11中引入了mutex和方便优雅的lock_guard.但是有时候我们想要的是性能更高的无锁实现,下面我 ...

  9. Zju1290 Word-Search Wonder(http://begin.lydsy.com/JudgeOnline/problem.php?id=2768)

    2768: Zju1290 Word-Search Wonder Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 4  Solved: 2[Submit] ...

  10. hibernate-Maven

    1.创建Maven 2.创建Maven工程 3.然后一直下一步 4.创建成功后Maven 5.下载jra包 //hibernate <dependencies> <dependenc ...