CSS学习总结

原创 2018-11-09 20:32:56 2
摘要:<!DOCTYPE html><html><head> <meta charset=utf-8" /> <title>俄罗斯方块</title> <style type="text/css">    *{margin: 0px;padding: 0px;}&nbs

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8" />

<title>俄罗斯方块</title>

<style type="text/css">

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

        #background{width:500px;height:640px;margin:40px auto;}

        #title{width:500px;height:50px;line-height:50px;text-align:center;font-size:25px;}

        .centent{width:300px;height:540px;margin-top:50px;border:1px solid #000;float:left;}

        .centent1{width:198px;height:540px;margin-top:50px;float:right;}

        p{width:198px;height:30px;line-height:30px;text-align:center;font-size:20px;}

</style>

</head>

<body>

<div id="background">

    <p id="title">俄罗斯方块</p>

    <div class="centent">

        <div style="width:288px;height:150px;"></div>

            <div style="width:30px;height:120px;background:green;margin-left:60px;"></div>

            <div style="width:30px;height:90px;background:pink;margin-top:120px;float:left;"></div>

            <div style="width:60px;height:60px;background:blue;margin-top:120px;float:left;"></div>

            <div style="width:30px;height:30px;background:red;margin-top:150px;float:left;"></div>

            <div style="width:60px;height:60px;background:blue;margin-top:120px;float:left;"></div>

            <div  style="width:30px;height:60px;background:purple;margin-top:120px;margin-left:30px;float:left;"></div>

            <div  style="width:60px;height:30px;background:purple;margin-top:150px;float:left;"></div>

            <div style="width:30px;height:30px;background:pink;float:left;"></div>

            <div style="width:90px;height:30px;background:red;float:left;"></div>

            <div style="width:120px;height:30px;background:green;float:left;"></div>

            <div style="width:60px;height:60px;background:blue;float:left;"></div>

            <div style="width:30px;height:60px;background:pink;float:left;"></div>

            <div style="width:60px;height:30px;background:pink;float:left;"></div>

            <div style="width:30px;height:30px;background:red;float:left;"></div>

        <div style="width:30px;height:30px;background:purple;margin-left:30px;float:left;"></div>

            <div style="width:90px;height:30px;background:red;margin-left:30px;float:left;"></div>

            <div style="width:90px;height:30px;background:purple;float:left;"></div>

        </div>

        <div class="centent1">

        <p style="margin-top:10px;">成绩</p>

            <p>00000000</p>

            <p style="margin-top:15px;">历史最佳</p>

            <p>6200</p>

        </div> 

    </div>

</body>

</html>


批改老师:Peter-Zhu批改时间:2018-11-09 21:39:36
老师总结:看起来,应该是一个完整盒模型的作业呀,边框样式应用并不多

发布手记

热门词条