how2j.cn

下载区
文件名 文件大小
img.rar 41k
answer.rar 42k

工具版本兼容问题
用到的图片在右侧



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2022-12-06 这样应该还好
54Mozu




新写的一个
<!DOCTYPE html>
<head>
    <title>综合练习1</title>
    <link rel="stylesheet" href="zongh1.css" type="text/css">
</head>
<body>
    <div id="l1">
        <img src="img/1.png" id="p1">
        <span id="l11">  最新动态</span> 
        <span id="l12">设置</span>
        <img src="img/2.png" id="p2">
    </div>
    <div class="content">
        <div class="I">
            <div id="l21" style="float: left;">
                <img src="img/4.png" id="p4" >
                <br>
                <div id="l211">
                    <span id="l211" style="background-image:url(img/5.png);padding: 2px;">
                        6551
                    </span>
                </div>
            </div>

            <div id="l22">
                <span id="l21">热门回答,来自 机械<a href="" id="l21">关注话题</a></span>
                <img src="img/3.png" id="p3">
                <br>
                <a href="" id="l22">人类史上令人叹为观止的极限精度制作成果有哪些?</a>
                <span id="l22">Vincent Fu, Materials Science, PhD</span>
                <br>
                <img src="img/6.png" id="p6">
                <div id="l221">
                    <span>
                        说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,握在手里把玩是远远不够的,就算你拿出放大镜离近了看,也只能看到表面一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深...&nbsp&nbsp
                    </span>
                    <a href="" id="l221">显示全部</a>
                </div>
            
            </div>
        
            <div id="l23">
                <img src="img/7.png" id="p7" name="last">
                <span id="l231">关注问题</span>
                <img src="img/8.png" id="p8" name="last">
                <span id="l231">867条评论</span>
                <img src="img/9.png" id="p9" name="last">
                <span id="l231">作者保留权利</span>
            </div>
        </div>


    </div>
    


    
</body>



下面是css内容
img#p1{
    position: fixed;
    left: 8px;
    top: 8px;
}
span#l11{
    position: fixed;
    left: 38px;
    top: 8px;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
}
img#p2{
    position: fixed;
    right: 48px;
    top: 8px;
}
span#l12{
    position: fixed;
    right: 8px;
    top: 3px;
}
div#l1{
    display: block;
    width: 100%;
    border-bottom: gainsboro 2px solid;
    position: fixed;
    top: 32px;
    color: gray;
    float: left;
}
div.content{
    position: relative;
    top: 50px;
    width: 100%;

}
div.I{
    margin-top: 10px;
    border-bottom: gainsboro 2px solid;
}
img#p3{
    float: right;
    margin-right: 30px;
}
img#p4{
    /* float: left;*/  
    margin-bottom: 10px;
}
div#l22{
    margin-left: 60px;
    margin-bottom: 30px;
}
span#l21{
   /* margin-left: 20px;*/    
   color: gray;
}
a#l21{
    margin-left: 15px;
    text-decoration: none;
    color: cornflowerblue;
}
a#l22{
    display: block;
   /* margin-left: 58px;*/
    margin-bottom: 10px;
    text-decoration: none;
    color: cornflowerblue;
    font-weight: bold;

}

img#p6{
    margin-top: 15px;
    margin-right: 15px;
    float: left;
}
div#l221{
    margin-top: 15px;
    width: 650px;
}
a#l221{
    text-decoration: none;
    color: cornflowerblue;
}
div#l23{
    margin-left: 60px;
    margin-bottom: 20px;
}
img#p7{
    margin-left: 5px;
    margin-right: 5px;
}
img#p8{
    margin-left: 5px;
    margin-right: 5px;
}
img#p9{
    margin-left: 5px;
    margin-right: 5px;
}
span#l231{
    /* margin-left: 20px;*/    
    color:gainsboro;
 }

							


2 个答案

CharlieLong
答案时间:2023-10-26
综合练习答案

LUO萝北
答案时间:2023-05-30



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-11-22 写成这样,算是屎山吗?TAT
dongdayo




body里写了134行,对比各位作业后,人傻了。。
<body>
    <style>
        .first{
            padding: 25px 0;
            width:100%;
            height: 25px;
            vertical-align: middle;
        }
        .first_left{
            width:200px;
            float:left;
            padding:0px 0px 0px 20px;
            font-weight:bold;
            font-size:15px;
        }
        .first_right{
            width:50px;
            float:right;
            font-size:10px;
            overflow:hidden;
        }
        .second{
            height:300px;
            width:100%;
            position:absolute;
            border-bottom:2px solid lightgray;
            border-top:2px solid lightgray;
        }
        .second_head{
            float:left;
            width:50px;
            margin:20px 20px 0 20px;
        }
        #follower_number{
            line-height:2;
            background-image:url(img/5.png);
            font-size:14px;
            text-align:center;
            margin:5px 0 0 0;
            color:black;
        }
        .second_title{
            margin:20px 0 0;
            line-height:1.7;
        }
        .second_close{
            width:21px;
            float:right;
            overflow:hidden;
            margin:20px;
        }
        #location{
            font-size:10px;
        }
        .content_preview{
            width:80%;
            padding:0 90px 30px;
        }
        .picture_preview{
            width:200px;
            float:left;
        }
        .text_preview{
            overflow:hidden;
            line-height:1.5;
            padding-left:10px;
        }
        a{
            color:rgb(0, 200, 255);
            text-decoration:none;
        }
        a:visited{
            color:rgb(#6baadd);
        }
        .foot{
            margin:20px;
            position: absolute;
            left:50px;
            bottom:0px;
            color:lightgray;
        }
        .down_a{
            color:lightgray;
            float:bottom;
        }
    </style>

    <div class="first">
        <div class="first_left">
            <img src="img/1.png">
            <span>最新动态</span>
        </div>

        <div  class="first_right">
            <img src="img/2.png">
            <span>设置</span>
        </div>
    </div>
    <div class="second">
        <div class="second_head">
            <a href="" ><img src="img/4.png" width="50px" height="50px"></a>
            <a href=""><div id="follower_number">6565</div></a>
        </div>

        <div class="second_close">
            <img src="img/3.png">
        </div>

        <div class="second_title">
            <span>热门回答,来自 机械&nbsp <a href="">关注话题</a><br>
            <a href=""><strong>人类史令人叹为观止的极限精度制造成果有哪些?</strong></a></span>
        </div>

        <div id="location">
            <p><strong>Vincent Fu,</strong>Materials Science,PhD</p>
        </div>

        <div class="content_preview">
            <div class="picture_preview">
                <img src="img/6.png">
            </div>
            <div class="text_preview">
                <span>说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,握在手里把玩是远远不够的,就算你拿出放大镜离近了看,也只能看到表面一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深...&nbsp&nbsp</span>
                <a href="" class="show_all">显示全部</a>
            </div>
        </div>

        <div class="foot">
            <a href="" class="down_a"><img src="img/7.png"><span> 关注问题&nbsp&nbsp</span></a>
            <a href="" class="down_a"><img src="img/8.png"><span> 867条评论&nbsp</span></a>
            <span> · 作者保留权利</span>
        </div>
    </div>
</body>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-08-04 我这个算是好理解一点的了吧,修修补补用了点时间
2022-06-15 我的代码可能是最乱的了,不会排版啊
2022-03-20 还是要活学活用啊


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 59 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-综合性练习1 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图