您的位置：首页 > Web前端 > CSS

HTML的样式

2017-10-09 15:57 176 查看
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin: 0px; padding: 0px}

        body{width: 1024px; height: 100%; margin: 0 auto}

        #title{width: 220px; height: 80px; margin: 0 auto; padding: 100px 0px 50px 0px}

        #nav{width: 420px; height: 35px; margin: 0 auto; background-color: white}

        #nav input{width: 300px; height: 35px; border: 0px; position: absolute; left: 36%;}

        #nav input:hover{transform: scale(1.5)}

        #nav img{vertical-align: middle; position: absolute; left: 57%; top: 31%;}

        #nav img:hover{transform: scale(1.2)}

        #baidu{padding: 6.5px 10.5px; color: white; background-color: dodgerblue; position: absolute; left: 59%}

        #baidu:hover{transform: scale(2); color: red}

        #main{margin: 0 auto; width: 770px; position: absolute; left: 25%; top: 40%}

        .float{float: left}

        .img1{ transition:All 1s ease-in-out;}

        .img1:hover{transform: rotate(360deg)}

        .img2{ transition:All 1s ease-in-out;}

        .img2:hover{transform: rotate(-360deg)}

        .img3{ transition:All 1s ease-in-out;}

        .img3:hover{transform: scale(1.5)}

        .img4{ transition:All 1s ease-in-out;}

        .img4:hover{transform: skew(-50deg)}

    </style>

</head>

<body background="20120921215232_Ay5mx.jpeg">

    <div id="title"><img src="title.jpg" /></div>

    <div id="nav">

        <div class="float">

            <input type="text">

            <img src="xiangji.jpg">

        </div>

        <div class="float" id="baidu" >百度一下</div>

    </div>

    <div id="main">

        <div>

            <img src="img1-1.jpg" class="img1" />

            <img src="img1-2.jpg" />

            <img src="img1-3.jpg" />

            <img src="img1-4.jpg" />

            <img src="img1-5.jpg" />

        </div>

        <div>

            <img src="img2-1.jpg" class="img2" />

            <img src="img2-2.jpg" />

            <img src="img2-3.jpg" class="img3" />

            <img src="img2-4.jpg" class="img4" />

            <img src="img2-5.jpg" />

        </div>

    </div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航