how2j.cn

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

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


步骤 1 :

练习-综合练习1

练习-综合练习1


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


问答区域    
2018-09-19 第一次交作业
xm



磕磕碰碰,做了很久,总算做出来了。 最主要的问题在于css中某个“#”被我写成“.”导致浮动不了。。。。卡了一天。。。 下次一定仔仔细细,不敢再犯这个错了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test_1</title>
<style>
body{
    font-family:"宋体";
    font-size:20px;
    color:#666666;
    width:730px;
    }
a{
	text-decoration:none;
}
#s1{
	float:left;
}
#s2{
	float:right;
}

#left{
	float:left;
	margin-right:20px;

}
#cha{
	float:right;
}
#left2{
	background:url(../img/5.png);
	float:left;
	margin-right:20px;
}
#pic{
	margin-left:60px;
	float:left;
}
#word{
	font-size:17px;
}
#bottom{
	margin-left:60px;
	float:left;
	font-size:17px;
}

</style>
</head>

<body>
 
<div id="s1"><img src="../1.png" />    最新动态</div>
<div id="s2"><img src="../2.png" />  <a href="#">设置</a></div><br />
<hr  color="black"/>
<br />


<div id="left">
<img src="../4.png" border="1" width="38" height="38"/>
</div>
<div id="middle">
<span> 
热门回答,来自<a href="#"> 机械 </a>关注话题</span>
<span id="cha"><img src="../img/3.png" /></span><br />
<a href="#">人类历史上令人叹为观止的极限精度制造成果有哪些?</a>
</div><br />

<div><span id="left2">6551</span></div>
<div><b>Vincent Fu</b><span>, Materials Science, PhD</span></div><br />

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

<div id="bottom">
<span><img src="../img/7.png" /><a href="#">关注问题</a></span>
<span><img src="../img/8.png" /><a href="#">876条评论</a></span>
<span><img src="../img/9.png" /><a href="#">作者保留权利</a></span>
</div>
<br />
<br />
<hr  color="black"/>
</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-09-03 交作业
HOW2JZkk817



如题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习1</title>
    <style>
        .all{
            margin: 0 auto;
            width: 650px;
            font-family: 楷体;
        }
        .menu{
            display: table-cell;
            width: 650px;
            height: 40px;
            vertical-align: center;
            border-bottom: 1px solid lightgray;
        }
        .menu-left {
            float: left;
            width: 100px;
        }
        .menu-right{
            float: right;
            width: 60px;
        }
        .inlineBlock {
            display: inline-block;
            margin-left: 10px;
        }
        .inlineBlock2{
            display: inline-block;
            margin-left: 5px;
        }
        .menu-left .inlineBlock {

            font-weight: bold;
        }
        .tableInfo{
            margin-top: 20px;
        }
        a{
            text-decoration: none
        }
        table tr td{
            padding-top: 10px;
        }
        table{
            border-bottom: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div class="all">
<div class="menu">
    <div class="menu-left"><img src="img/1.png"/><span class="inlineBlock">最新动态</span></div>
    <div class="menu-right"><img src="img/2.png"/><span class="inlineBlock">设置</span></div>
</div>
<div class="content">
    <table class="tableInfo">
        <tr>
            <td rowspan="2"><img src="img/4.png"/></td>
            <td>热门回答,来自<i class="inlineBlock">机械</i></span><a class="inlineBlock" href="#nowLine">关注话题</a>
                <img style="float: right; width: 8px;" src="img/3.png"/></td>
        </tr>
        <tr style="font-weight: bold">
            <td><a href="#nowline">人类史上让人叹为观止的极限精度制造成果有哪些?</a></td>
        </tr>
        <tr>
            <td rowspan="3" style="vertical-align: top;">
                <span style="background-image: url(img/5.png)">6551</span></td>
            <td><b>Vincent Fu</b>, Material Science, PhD</td>
        </tr>
        <tr>
            <td><img style="float: left;" src="img/6.png"/>说到精度,就不得不提在材料学中最重要的一个方面:表征。要研究一种材料性能,
                我在手里把玩时远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些
                肯黄阁坑饿啊饿啊,而为了知晓一种材料的纤维结构,科学家至少也要吓到纳米级
                (放大千倍),如果要获得更深... <a href="#nowline">显示全部</a></td>
        </tr>
        <tr>
            <td><img src="img/7.png"/><span class="inlineBlock">关注问题</span>
                <img src="img/8.png"/><span class="inlineBlock2">857条评论</span>
                <img src="img/9.png"/><span class="inlineBlock2">作者保留权力</span></td>
        </tr>
    </table>

</div>
</div>
</body>
</html>

							


1 个答案

HOW2JZkk817 答案时间:2018-09-03
额 下面的行给忘了




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-08-26 全用div硬撸出来的,看来我不适合搞前端
2018-08-25 id="left'什么意思?
2018-08-02 第一次交作业
2018-08-02 给各种div起名真的好烦
2018-07-17 感觉我写的有点多……几乎每个地方都用DIV套住了
2018-06-18 不知道写的怎么样,还可以如何简便些
2018-06-02 作业
2018-04-24 做的不好大家将就看看,哈哈
2018-04-12 终于做了个样子
2018-03-13 作业做的不对,求指点
2018-03-08 交作业
2018-02-24 交作业 写的好乱 全是DIV没事么...
2018-01-29 这个div怎么不在左边
2018-01-29 这个div怎么不在左边
2018-01-29 怎么嵌套两个div这个布局就不对了
2018-01-18 怎么才能随浏览器的大小进行自适应?
2017-12-25 关于边框模型的问题
2017-12-21 交作业。。 菜鸟一只 做了两个小时
2017-12-15 交作业啦
2017-12-15 交作业啦
2017-11-24 请老师检阅一哈
2017-11-24 不熟练花了3小时吧
2017-11-20 花了一小时写的 希望能让老师满意
2017-11-20 本菜鸟写的
2017-09-17 为什么右边的部分是靠 width:367px撑起来的?
2017-09-09 写了一个小时 请批改作业啊老师
2017-09-07 图片和文字不在同一水平
2017-08-21 改变了body的宽度为800px后,为什么只有第一个div改变宽度,其他的不变啊。
2017-08-10 插入img,img默认显示位置不贴着边
2017-08-04 写了一晚上,感觉写的很乱,div套div
2017-06-04 <div style="clear:left;"></div><br>加和不加的区别
2017-06-02 对span元素设置margin-right为什么没有效果?
2017-06-01 关于代码的问题
2017-06-01 line-height=170%是什么意思
2017-06-01 站长,你这个边距是用什么测的啊,还有颜色
2017-05-12 class的问题
2017-04-13 内联元素能直接设置margin和padding吗?
2017-03-19 端技术-CSS-综合性练习1 -练习-综合练习1 的提问
2016-06-02 关于阶段练习的答案




提问之前请登陆
关于 前端部分-CSS-综合性练习1 的提问

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

上传截图