how2j.cn

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

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


步骤 1 :

练习-综合练习1

练习-综合练习1


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


问答区域    
2018-10-01 交作业
maps



主要是用table做的
<style>
div.newest {
    float: left;
}

div.settings {
    float: right;
}

div.head {
    width: 600px;
}

div.line {
    height: 2px;
    background-color: #d8d8d8;
    clear: both;
    width: 600px;
    position: absolute;
    top: 30px;
}

div.main {
    position: relative;
}

table.table {
    width: 600px;
    position: absolute;
    top: 50px;
}

div.vote {
    width: 38px;
    height: 25px;
    background-color: #eff6fa;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    font-size: 5px;
    color: #696969;
}

td.topic {
    font-size: 13px;
    color: #696969;
    height: 13px;
}

td.title {
    font-weight: bold;
    color: #336699;
}

td.content {
    font-size: 14px;
}

tr.last {
    height: 30px;
    vertical-align: bottom;
}

div.last-line {
    height: 1px;
    background-color: #d8d8d8;
    clear: both;
    width: 600px;
    position: absolute;
    top: 300px;
}
</style>
<div class="main">
    <div class="head">
        <div class="newest">
            <img src="./css_ex1/1.png" alt="" style="margin-right: 7px;">
            <span style="font-weight: bold; font-size: 15px;">最新动态</span>
        </div>
        <div class="settings">
            <img src="./css_ex1/2.png" alt="">
            <span style="font-size: 15px; color: #696969">设置</span></div>
    </div>
    <div class="line">
    </div>
    <table class="table" border="0">
        <tr>
            <td width="10%" rowspan="2"><img src="./css_ex1/4.png" alt=""></td>
            <td class="topic">热门回答,来自 机械 <font color="#4473A2">关注话题</font>
            </td>
            <td align="right"><img src="./css_ex1/3.png" alt=""></td>
        </tr>
        <tr>
            <td class="title" colspan="2">人类史上令人叹为观止的极限精度制造成果有哪些</td>
        </tr>
        <tr>
            <td rowspan="2">
                <div class="vote">6551
                </div>
            </td>
            <td colspan="2" style="font-family: Times New Roman; font-size: 14px"><strong>Vince FU</strong>, Materials Science, PhD</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><img src="./css_ex1/6.png" alt="" style="margin-right: 10px;"></td>
            <td class="content">说到精度,就不得不提在材料学中最重要的一个方面:表征。要想研究一种材料性能,我在手里把玩是远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深... <font color="#336699">显示全部</font>
            </td>
        </tr>
        <tr class="last">
            <td></td>
            <td colspan="2" style="font-size: 14px; color:#8590A6;"><img src="./css_ex1/7.png" alt="" style="margin-right: 5px">关注问题<img src="./css_ex1/8.png" alt="" style="margin-left: 7px; margin-right: 7px">867条评论<img src="./css_ex1/9.png" alt="" style="margin-left: 5px; margin-right: 5px">作者保留权利</td>
        </tr>
    </table>
    <div class="last-line"></div>
</div>

							






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





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

上传截图