css05

来源：互联网发布：金科信软件编辑：程序博客网时间：2024/06/03 05:47

css的常用操作

css的对齐操作

1、使用margin属性进行水平对齐

2、使用position属性进行左右对齐

3、使用float属性进行左右对齐

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>对齐</title>    <link rel="stylesheet" type="text/css" href="ch01.css"></head><body>    <div class="div"></div></body></html>

*{    margin: 0px;}.div{    width: 70%;    height: 1000px;    background-color: blueviolet;    margin: 0px auto;    margin-left: auto;    margin-right: auto;    position: absolute;    left: 0px;    right: 0px;    float: right;}

css的尺寸操作

1、height 设置元素的高度

2、line-height 设置行高

3、max-height 设置设置元素的最大高度

4、max-width 设置元素的最大宽度

5、min-height 设置元素的最小高度

6、min-width 设置元素的最小宽度

7、width 设置元素的宽度

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="ch02.css"></head><body>    <p class="p1">This is my first webThis is my first webThis is my first web</p>    <p class="p2">This is my first webThis is my first webThis is my first web</p>    <p class="p3">This is my first webThis is my first webThis is my first web</p></body></html>

p{    max-width: 50px;}.p1{    line-height: normal;}.p2{    line-height: 200%;}.p3{    line-height: 50%;}

css的分类操作

1、clear 设置一个元素的侧面是否允许其他的浮动元素

2、cursor 规定当指向某元素之上时显示的指针类型

3、display 设置是否及如何显示元素

4、float 定义元素在哪个方向浮动

5、position 把元素放置到一个静态的、相对的、绝对的、固定的位置

6、visibility 设置元素是否可见或者不可见。

  <ul>        <li>This</li>        <li>This</li>        <li>This</li>    </ul>

p{    cursor: cell;}li{    display: inline;    visibility: hidden;}

css导航栏

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="ch03.css"></head><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></html>

垂直的css

ul{    margin: 0px;    padding: 0px;    list-style-type: none;}a:link,a:visited{    text-decoration: none;    display: block;    background-color: chartreuse;    color: red;    width: 50px;    text-align: center;    padding: 5px;}a:active,a:hover{    background-color: blueviolet;}

水平的css

ul{    margin: 0px;    padding: 0px;    list-style-type: none;    background-color: chartreuse;    width: 250px;    text-align: center;}a:link,a:visited{    text-decoration: none;    text-align: center;    width: 50px;}a:active,a:hover{    background-color: blueviolet;}li{    display: inline;}

css图片操作

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="ch04.css"></head><body>    <div class="container">        <div class="image">           <a href="#" target="_self">               <img src="aaa.png" alt="dota" width="200px" height="200px">           </a>            <div class="text">SF暴走了！！！！</div>        </div>        <div class="image">            <a href="#" target="_self">                <img src="aaa.png" alt="dota" width="200px" height="200px">            </a>            <div class="text">SF暴走了！！！！</div>        </div><div class="image">        <a href="#" target="_self">            <img src="aaa.png" alt="dota" width="200px" height="200px">        </a>        <div class="text">SF暴走了！！！！</div>    </div><div class="image">        <a href="#" target="_self">            <img src="aaa.png" alt="dota" width="200px" height="200px">        </a>        <div class="text">SF暴走了！！！！</div>    </div><div class="image">        <a href="#" target="_self">            <img src="aaa.png" alt="dota" width="200px" height="200px">        </a>        <div class="text">SF暴走了！！！！</div>    </div><div class="image">        <a href="#" target="_self">            <img src="aaa.png" alt="dota" width="200px" height="200px">        </a>        <div class="text">SF暴走了！！！！</div>    </div>        <div class="image">            <a href="#" target="_self">                <img src="aaa.png" alt="dota" width="200px" height="200px">            </a>            <div class="text">SF暴走了！！！！</div>        </div><div class="image">        <a href="#" target="_self">            <img src="aaa.png" alt="dota" width="200px" height="200px">        </a>        <div class="text">SF暴走了！！！！</div>    </div><div class="image">        <a href="#" target="_self">            <img src="aaa.png" alt="dota" width="200px" height="200px">        </a>        <div class="text">SF暴走了！！！！</div>    </div>    </div></body></html>

body{    width: 70%;    height: auto;    background-color: antiquewhite;    margin: 10px auto;}.image{    border: 1px solid greenyellow;    float: left;    padding: 5px;    margin: 5px;}img{    opacity: 0.5;}.text{    text-align: center;    width: auto;    height: auto;}

0 0