2016.01.29--h5第七天之css-CSDN博客

本文链接：https://blog.csdn.net/weiyumeizi/article/details/50609027

css对齐

1、index.html

    <title>css对齐</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        </head>
<body>
            <div class="div">
            </div>
</body>

2、style.css

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color:aqua ;
    /*!*左右都有空隙，且使div居中*!*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/


    /*!*偏左*!*/
    /*position: absolute;*/
    /*left:0px ;*/


    /*第一个左右，第二个上下*/
    margin:100px auto ;

}

css尺寸

1、index.html

<title>css尺寸</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        </head>
<body>
    <p class="p1">this is my web page.
        this is my web page. this is my web page.
        this is my web page. 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.
        this is my web page. 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.
        this is my web page. this is my web page.
        this is my web page. this is my web page.
    </p>
</body>

2、style.css

.p1{
    /*行高不变*/
    line-height: normal;
}
.p2{
    width: 400px;
    /*行高加倍*/
    line-height: 200%;
}
.p3{
    /*行高减半*/
    width: 400px;
    line-height: 50%;
}

css分类

index.html

  </head>
<body>
   <!--<p>hellohellohello</p>-->
    <ul>
        <li>Nice.</li>
        <li>Nice.</li>
        <li>Nice.</li>
        <li>Nice.</li>

    </ul>

style.css

/*p{*/
    /*!*鼠标的显示效果*!*/
    /*cursor: cell;*/
/*}*/
li{
    /*把列表表示为一栏*/
    display: inline;
    /*设置为不可见*/
    visibility: hidden;
    /*设置为可见*/
    visibility: visible;
}

导航

index.html

<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>

style.css

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;
    /*成为块结元素*/
    /*display: block;*/
    background-color: burlywood;
    color: aliceblue;
    width: 50px;
    text-align: center;
}
a:active,a:hover{
    /*鼠标放上去显示颜色*/
    background-color: crimson;
}
li{
    /*显示为一行*/
    display: inline;
    /*上下差距3px*/
    padding: 3px;
    /*调节字体间的间距*/
    padding-left: 5px;
    padding-right: 5px;
  }

图片

index.html

  <title>图片</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        </head>
<body>
<div class="container">
    <div class="image">
        <!--指向自身-->
        <a href="#" target="_self">
            <!--图片显示不出时，鼠标指向时为风景-->
            <img src="xia.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">八月份的维多利亚</div>
    </div>
    <div class="image">
        <!--指向自身-->
        <a href="#" target="_self">
            <!--图片显示不出时，鼠标指向时为风景-->
            <img src="xia.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">八月份的维多利亚</div>
    </div>
    <div class="image">
        <!--指向自身-->
        <a href="#" target="_self">
            <!--图片显示不出时，鼠标指向时为风景-->
            <img src="xia.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">八月份的维多利亚</div>
    </div>
    <div class="image">
        <!--指向自身-->
        <a href="#" target="_self">
            <!--图片显示不出时，鼠标指向时为风景-->
            <img src="xia.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">八月份的维多利亚</div>
    </div>
    <div class="image">
        <!--指向自身-->
        <a href="#" target="_self">
            <!--图片显示不出时，鼠标指向时为风景-->
            <img src="xia.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">八月份的维多利亚</div>
    </div> <div class="image">
    <!--指向自身-->
    <a href="#" target="_self">
        <!--图片显示不出时，鼠标指向时为风景-->
        <img src="xia.jpg" alt="风景" width="200px" height="200px">
    </a>
    <div class="text">八月份的维多利亚</div>
</div>
    <div class="image">
        <!--指向自身-->
        <a href="#" target="_self">
            <!--图片显示不出时，鼠标指向时为风景-->
            <img src="xia.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">八月份的维多利亚</div>
    </div>

</div>
  </body>

style.css

body{
    margin: 10px auto;
    width: 70%;
    height: auto;
    background-color: gray;
}
.image{
    /*对容器的设置*/
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 5px;
}
img{
    /*对图片的设置*/
    margin: 5px;
    /*半透明效果0.5,不透明为1*/
    opacity: 0.5;
}
.text{
    font-size: 12px;
    margin-bottom: 5px;
}
a:hover{
    /*放上鼠标显示颜色*/
    border: deeppink;
}