how2j.cn

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

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



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


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


问答区域    
2021-04-16 布局好难,搞得头晕眼花
DDQ




布局用了好久,反反复复搞了好久,发现站长的代码基本不用id选择器,我用了很多个,直接搞得页面乱七八糟,然后去搜索了HTM/CSS规范看了一下,太费劲了,菜的离谱
加载中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width: 30%;
            font-family: 宋体;
            color: #2aabd2;
            font-size: 15px;
        }

        div.topdiv{
            height: 30px;
            border-bottom-style: solid ;
            border-bottom-width: 2px;
            border-bottom-color: blue;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .clearLeft{
            clear:left;
        }

        .floatleft{
            float: left;
        }

        .floatright{
            float: right;
        }

        .bold{
            font-weight: bold;
        }

        a{
            color: blue;
            text-decoration:none;
        }

    </style>
</head>
<body>
    <div class="topdiv">
        <img style="margin-right: 5px" src="image/1.png">
        <strong>最新动态</strong>
        <span class="floatright">设置</span>
        <img class="floatright" style="margin-right: 5px" src="image/2.png">
    </div>

    <div id="left" class="floatleft" style="margin-right:15px">
        <img src="image/4.png"><br>
        <br>
        <span style="background-image: url(image/5.png); padding:5px">6551</span>
    </div>

    <div>
        <div style="border-bottom: 5px">
            <span>热门回答,来自  机械</span>
            <a href="#">关注话题</a>
            <img class="floatright" src="image/3.png"><br>
            <a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些?</a>
            <p>
                <strong>Vincent Fu, </strong>Materials Science, PhD
            </p>
            <img  style="float: left;margin-left: 60px " src="image/6.png">
        </div>
        <div>
             <p style="line-height:170%;margin-left:15px;">
                    说到法国红酒看来的撒咖啡机爱丽丝的反抗军;爱上了的咖啡机
                    说到法国红酒看来的撒咖啡机爱丽丝的反抗军;爱上了的咖啡机
                    说到法国红酒看来的撒咖爱上了的。。。
             <a>显示全部</a>
             </p>
            <br>
        </div>
        <div style="float: left;margin-left: 60px ">
            <img src="image/7.png">
            <span>关注问题</span>
            <img src="image/8.png">
            <span>867条评论</span>
            <img src="image/9.png">
            <span>作者保留权利</span>
        </div>
    </div>

<div class="clearLeft" >
</div>

<div id="bottom" style="margin-top:20px;border-top-style:solid;border-top-width:1px;border-top-color:#ddd">
</div>
</body>
</html>

							





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





2021-03-24 终于做完了
镜子里的笑脸




做了好久,终于做完了
加载中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB2312">
    <title>综合性练习1</title>
    <style>
        body{
            font-size:13px;
            font-family: "Adobe 宋体 Std L";
            width:80%;
            color:#666666;
        }
        div.d1{
            width:100%;
            height:100%;
            border-top-style: solid;
            border-bottom-style: solid;
            border-color: lightgrey;
            margin:15px 0px;
        }
        div.d2{
            width:40px;
            height:300px;
            float:left;
            margin:20px 20px 0px 0px;
        }
        div.d3{
            color: lightgray;
            margin:25px 0px 20px 0px;

        }
        .p1{
            background-image: url("img/5.png");
            padding: 5px;
        }

        a{color: cornflowerblue;
            text-decoration: none;
        }

    </style>
</head>

<body>

<div>
    <img src="img/1.png" >
    <strong style="margin-left:5px">最新动态</strong>
    <div style="float:right">
        <img src="img/2.png">
        <span style="margin-left:5px">设置</span>
    </div>
</div>

<div class="d1">
    <div class="d2">
        <img src="img/4.png"><br/><br/>
        <span class="p1">6551</span>
    </div>
    <div>
        <p>热门回答,来自 机械
            <a>关注话题</a>
            <img src="img/3.png" style="float:right"><br/>
            <strong><a>人类史上令人叹为观止的极限精度制造成果有哪些?</a></strong>
        </p>
        <p><strong>Vincent Fu,</strong>Materials Science,PhD</p>
    </div>
        <img src="img/6.png" style="float:left;margin-right: 20px">
        <p style="line-height: 200%">说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,握在手里把玩时远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深. . . <a>显示全部</a></p>

    <div class="d3">
        <img src="img/7.png">
        <span>关注问题</span>
        <img src="img/8.png">
        <span>867条评论</span>
        <img src="img/9.png">
        <span>作者保留权利</span>
    </div>
</div>
</body>
</html>

							





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





2021-02-05 终于做出来了
2021-01-12 弄了一点上去
2020-12-30 需要多思考,布局


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

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

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

上传截图