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. winutils spark windows installation

    http://stackoverflow.com/questions/37305001/winutils-spark-windows-installation

  2. The 2014 ACMICPC Asia Regional Beijing Online

    [A]极角排序+树状数组 [B]计算几何,凸包(队友已出) [C]-_-///不懂 [D]数论,概率密度 [E]图的连通性+Floyed传递闭包+bitset [F]贪心 [G]签到题 [H]区间维护 ...

  3. 类似java.lang.NoClassDefFoundError: org/jaxen/JaxenException解决方法

    在使用dom4j的xpath时出现java.lang.NoClassDefFoundError: org/jaxen/JaxenException的异常,原因是dom4j引用了jaxen jar包,而 ...

  4. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. CDOJ 1273 God Qing's circuital law

    暴力枚举+idea.做的时候mod写错了,写成了1000000009,找了两个多小时才发现...... a[1],a[2],a[3]....a[N] b[1],b[2],b[3]....b[N] 首先 ...

  6. CodeForces 617A Elephant

    C语言语法入门题 #include<cstdio> #include<cstring> #include<vector> #include<cmath> ...

  7. poj3190区间类贪心＋优先队列

    题意:每个奶牛产奶的时间为A到B,每个奶牛产奶时要占用一间房子,问n头奶牛产奶共需要多少房子,并输出每头奶牛用哪间房子 分析:这题就是一个裸的贪心,将奶牛按开始时间进行排序即可,但考虑一下数据范围,我 ...

  8. 《javascript语言精粹》——第4章函数

    函数就是对象 [1].函数字面量即(函数表达式)包括四部分: 第一部分:保留字function: 第二部分:函数名称,可有可无: 第三部分:包围在一对小括号的一组参数,参数用逗号隔开: 第四部分:包围 ...

  9. MVC 5学习总结笔记1

    01.使用MVC自带的DataAnnotations实现数据验证 public class ExternalLoginConfirmationViewModel { [Required] [Displ ...

  10. mysqladmin: connect to server at 'localhost' failed error: 'Access denied for user 'root'@'localhost' (using password: YES)'

    就当作自己忘记Mysql密码把,忘记密码的解决方法 一.mysql登录错误mysqladmin: connect to server at 'localhost' failederror: 'Acce ...