第3次课后作业

wangcancan6

已于 2023-12-31 15:48:15 修改

阅读量447

点赞数 7

文章标签： css css3 html

于 2023-12-28 16:30:40 首次发布

本文链接：https://blog.csdn.net/wangcancan6/article/details/135272893

版权

该篇文章详细展示了HTML和CSS如何实现一行两列式、列式布局以及网页的标准布局，包括使用div+class创建不同宽度和浮动的列，适用于前端开发人员学习和参考。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行两列式</title>
    <style type="text/css">
        body,ul{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        .container{
            width:1000px;
            height:1500px;
            /*border:2px solid red;*/
            margin:30px auto 0px;
        }
        /*.column2{
            border:2px solid black;
        }*/
        .column2 .column2-1{
            width:700px;
            height:300px;
            background-color:red;
            float:left;
        }
        .column2 .column2-2{
            width:280px;
            height:300px;
            background-color:yellow;
            float:right;
        }
        .clear{
            clear:both;
        }
        .column3{
            /*border:2px solid blue;*/
            margin-top:20px;
        }
        .column3 .column3-1{
            width:200px;
            height:300px;
            background-color:aqua;
            float:left;
        }
        .column3 .column3-2{
            width:400px;
            height:300px;
            background-color:coral;
            float:left;
            margin-left:20px;
        }
        .column3 .column3-3{
            width:360px;
            height:300px;
            background-color:blueviolet;
            float:right;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
        .column-n{
            /*border:2px solid blue;*/
            margin-top:20px;
        }
        /*.column-n ul{
            background-color:blue;
        }*/
        .column-n ul li{
            /*border:1px solid red;*/
            width:190px;
            height:200px;
            float:left;
            margin:5px;
            background-color:aquamarine;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column2">
            <div class="column2-1"></div>
            <div class="column2-2"></div>
            <div class="clear"></div>
        </div>


        <div class="column3 clearfix">
            <div class="column3-1"></div>
            <div class="column3-2"></div>
            <div class="column3-3"></div>
        </div>

        <div class="column-n">
            <ul class="clearfix">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纵向列表</title>
    <style type="text/css">
        body { 
            font-family: Verdana; 
            font-size: 12px; 
            line-height: 1.5;
        }
        a{
            text-decoration:none;
            color:#000;
        }
        a:hover{
            color:#F00;
        }
        .menu{
            width:100px;
            border: 1px solid #CCC;   
        }
        .menu ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .menu ul li{
            background:#eee;
            padding:0px 8px;
            height:26px;
            line-height:26px;
            border-bottom:1px solid #CCC;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="@#">首页</a></li>
            <li><a href="#">网页版式布局</a></li>
            <li><a href="#">div+class实例</a></li>
            <li><a href="#">div+class教程</a></li>
            <li><a href="#">常用代码</a></li>
            <li><a href="#">站长杂谈</a></li>
            <li><a href="#">技术文档</a></li>
            <li><a href="#">资源下载</a></li>
            <li><a href="#">图片素材</a></li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向列表</title>
    <style type="text/css">
        body{
            font-family: Verdana; 
            font-size: 12px;
            line-height: 1.5;
        }
        a{
            color:#000;
            text-decoration:none;
        }
        a:hover{
            color:#F00;
        }
        .menu{
            width:500px;
            height:28px;
            margin:0 auto; 
            border-bottom:3px solid #E10001;
        }
        .menu ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .menu ul li{
            float:left;
            margin-left:2px;
        }
        .menu ul li a{
            display:block;
            width:87px; 
            height:28px; 
            line-height:28px; 
            text-align:center; 
            background:url(images/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; 
            font-size:14px;
        }
        .menu ul li a:hover{
            background:url(images/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;
        }
        .menu ul li a#current{
            background:url(images/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; 
            font-weight:bold;
            color:#fff;
        }
    </style>
</head>
<body>
    <div  class="menu">
        <ul>
            <li><a id="current" href="#">首页</a></li>
            <li><a href="#">网页版式</a></li>
            <li><a href="#">web教程</a></li>
            <li><a href="#">web实例</a></li>
            <li><a href="#">常用代码</a></li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标准布局</title>
    <style type="text/css">
        body { 
            margin:0 auto; 
            font-size:12px; 
            font-family:Verdana; 
            line-height:1.5;
        }
        #header{
            width:500px;
            height:20px;
            background-color:aquamarine;
            border:2px solid black;
            margin:30px auto 0px;
            padding:20px;
            line-height:2px;
        }
        #nav{
            width:530px;
            height:20px;
            background-color:aquamarine;
            border:2px solid black;
            margin:10px auto 0px;
            padding:5px;
        }
        #body{
            width:540px;
            height:400px;
            background-color:aquamarine;
            border:2px solid black;
            margin:10px auto 0px;
        }
        .main{
            width:300px;
            height:350px;
            background-color:yellow;
            border:2px solid black;
            margin:20px 5px 20px 20px;
            float:left;
        }
        .side{
            width:180px;
            height:350px;
            background-color:chocolate;
            border:2px solid black;
            margin:20px 20px 20px 5px;
            float:left;
        }
        #footer{
            width:500px;
            height:20px;
            background-color:aquamarine;
            border:2px solid black;
            margin:20px auto 0px;
            padding:20px;
        }
    </style>
</head>
<body>
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="body">
        <div class="main">main</div>
        <div class="side">side</div>
    </div>
    <div id="footer">footer</div>
</body>
</html>