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. sort用法

    一.sort用法sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出.vim 1.txt 1:datadir=/aaa/zzz:2: ...

  2. Identifying Dialogue Act Type

    Natural Language Processing with Python Chapter  6.2 import nltk from nltk.corpus import nps_chat as ...

  3. (简单) POJ 1860 Currency Exchange，SPFA判圈。

    Description Several currency exchange points are working in our city. Let us suppose that each point ...

  4. Linux 环境编译安装mysql (源码安装包)

    标注: Linux需要先配置网络yum源,确定yum能在线安装软件包,方便测试过程中安装部分依赖包.配置163网易提示的网络yum源参考博客  http://www.cnblogs.com/zoulo ...

  5. iOS开发——二级列表

    原理很简单,一级菜单放在viewForHeaderInSection里面,加一个点击事件,然后判断它的二级菜单(cell)显不显示. 直接上代码吧! // //  HeheTableViewContr ...

  6. LPC1788系统时钟初始化

    #ifndef __SYS_H_ #define __SYS_H_ #include "common.h" #define SystemCoreClock  120000000  ...

  7. c#中怎么求百分比

    string Scorepercent = (lowScoreNum*1.0/ ScoreNum).ToString("P");//百分比 ToString("P&quo ...

  8. 【转】amCharts，一款值得推荐的Flash charts图组件

    今天无意中看到一个利用Flash生成chart图的工具:amCharts,我一开始就觉得这些chart图非常眼熟,它的显示样式跟监控宝的是完全一样的,我通过查看网页的源文件,才知道原来监控宝就是用的这 ...

  9. 用Django Rest Framework和AngularJS开始你的项目

    Reference: http://blog.csdn.net/seele52/article/details/14105445 译序:虽然本文号称是"hello world式的教程&quo ...

  10. AndroidManifest.xml文件

    AndroidManifest.xml常用标签解读 1.全局篇(包名,版本信息) 2.组件篇(四大组件) Activity Service Content Provider Broadcast Rec ...