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. Ubuntu Server 14.04 & Apache2.4 虚拟主机、模块重写、隐藏入口文件配置

    环境: Ubuntu Server 14.04 , Apache2.4 一.Apache2.4 虚拟主机配置 01. 新建一份配置文件 在apache2.4中,虚拟主机的目录是通过/etc/apach ...

  2. Windows Azure Table Storage 解决 Guid 查询问题

    在使用 Windows Azure Table Storage 的 CloudTableClient 对Azure 进行数据查询时,会发现在自定义类的Guid类型始终无法去成功查询出数据,对比发现 G ...

  3. hibernate---一对一单向外键关联--annotation (重要!!!)

    1. 生成wife.java: package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persisten ...

  4. 攻入Javascript，究竟什么是AJAX

    什么是AJAX 时隔半年,当AJAX再一次出现在我脑海中时,从最初的模糊到现在的越来越明确.那么究竟什么是AJAX?它和form表单提交有什么区别? 如果你使用过AJAX和表单提交的话,想必会发现一件 ...

  5. [Unity]蓝鸥Untiy-RPC-Sample

    蓝鸥Untiy-RPC-Sample 使用UnityEngine中的NetWork创建的服务器类 LO_GameServer.cs ** 通过该工具类能够在Unity程序中快速的创建一个游戏房间服务器 ...

  6. Sematic库系列一

    最近在做项目时采用了sematic css 库,由于这个库的资料太少,在做项目中遇到很多问题,在这里做一些记录 1. 下拉框demo HTML 代码 <div class="field ...

  7. ubuntu如何安装Mac主题

    1.安装 Gnome 经典桌面 sudo apt-get install gnome-session-fallback 没有安装桌面的可安装 Gnome 桌面: sudo apt-get instal ...

  8. Mysql mysql lost connection to server during query 问题解决方法

    在linux上新安装的mysql数据库远程连接速度很慢,用Navicate可以正常连接但是时间很长:使用toad连接提示Mysql mysql lost connection to server du ...

  9. linux 　指令　备注

    ss命令可用于查看系统的socket的状态.基本上ss是比较符合需求的ss -a 出来的答案比较完整,但是很乱...连dgram及stream都分开了ss -l 比较可能是需要的,这会列出所有正在使用 ...

  10. 数据可视化－OmniGraffle软件

    OmniGraffle Pro for mac破解版是一款运行在MAC OS平台上的思维导图流程图制作软件,通过思维导图软件(OmniGraffle Pro MAC)帮你组织头脑中思考的信息,组织头脑 ...