how2j.cn

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

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



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


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


问答区域    
2019-04-18 代码详解(自己看的)
Alex_Gu



代码详解
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>

<style>
/*设置字库,字体大小,颜色,尺寸*/
body{
    font-family:"宋体";/*设置字体字库*/
    font-size:13px;/*设置字体大小*/
    color:#666666;/*设置字体颜色*/
    width:643px;/*设置内容宽度*/
    }
/*设置粗体*/
    .bold{
    font-weight:bold;/*设置字体粗细*/
    }
/*准确设置顶上线条*/
    div.topdiv{
      border-bottom-style:solid;/*设置边框实线*/
      border-bottom-color:silver;/*设置边框颜色*/
      border-bottom-width:1;/*设置边框宽度*/
      padding-bottom:10px;/*设置下内边距*/
      margin-bottom:15px;/*设置下外边距*/
    }

    .floatright{
    	float:right;/*设置文字向右浮动*/
    }

    .floatleft{
    	float:left;/*设置文字向左浮动*/
    }

    .show{
     border:1px solid red;/*设置实线1像素,实线,红的*/
    }

    div1{
    border:1px solid green;/*设置实线1像素,实线,绿的*/
    }

    a{
    text-decoration: none;/*去掉了下划线的超链*/
    color:#336699;/*设置颜色*/
    }
    .text{
      color:#333;/*设置文字颜色*/
    }

    div#thirdDiv span{
        color:darkgray;/*设置颜色*/
    }

    div.clearLeft{
	clear:left;/*使得后续的元素,不会和这些span重复在一起*/
    }

</style>



/*span是内联元素(不会有换行),调用bold样式*/
/*span是内联元素(不会有换行),调用floatright样式(文字向右浮动)*/

<br/><br/><br/><br/>


<body>
   <div class="topdiv"> 
	<img style="margin-right:5px" src="file://C:/Users/Administrator/Desktop/html/answer/1.png"/*样式右外边距空5像素

,导入图片1.png*/>

	<span class="bold">最新动态</span>
	
	<span  class="floatright" >设置</span>
	
	<img  style="margin-right:5px" class="floatright" 

src="file://C:/Users/Administrator/Desktop/html/answer/2.png"/*样式右外边距空5像素,调用floatright样式(文字向右浮动),

导入图片2.png*/ >
   	
	
	</div>


  <div id="left" class="floatleft" style="margin-right:15px"    /*设置id左边,样式为floatleft(设置文字向左浮动),左外

边距为15*/>
    <img src="file://C:/Users/Administrator/Desktop/html/answer/4.png"/    /*插入图片*/> <br>
    <br>
    <span style="background-image:url(file://C:/Users/Administrator/Desktop/html/answer/5.png); padding:5px"   /*插入图

片作为背景,设置内边距5*/>6551</span>
  </div>
  
  <div id="right" class="floatleft show1"   /*设置id右边,样式为floatleft(设置文字向左浮动),样式show1*/>
    <div style="margin-bottom:5px"   /*设置样式下外边距为5*/>
    	<span>热门回答,来自 机械</span> 
    <a href="#">关注话题</a>
    <img src="file://C:/Users/Administrator/Desktop/html/answer/3.png" class="floatright"   /*插入图片3.png,设置样式

floatright*/>
    </div>
    <a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些?</a>
    <p class="text"><strong>Vincent Fu</strong>, Materials Science, PhD</p>
    <img class="floatleft" src="file://C:/Users/Administrator/Desktop/html/answer/6.png"/>
    <div  class="floatleft text" style="line-height:170%;margin-left:15px;width:367px""   /*样式文字向左浮动,适合单独一

行垂直居中170%,左外边距15像素,内容宽度367像素*/>		
	
		说到精度,就不得不提在材料学中最重要的一个方面:表征。要项研究一种材料性能,握在手里把玩时远远不够的,就

算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),

如果要获得更深... 	
	
	<a href="">显示全部 </a> 
	<br>
      &nbsp; 
    </div>
   	
    <div id="thirdDiv"> 
		<img src="file://C:/Users/Administrator/Desktop/html/answer/7.png"> 
		<span>关注问题</span> 
		<img src="file://C:/Users/Administrator/Desktop/html/answer/8.png"> 
		<span>867条评论</span>
	    <img src="file://C:/Users/Administrator/Desktop/html/answer/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"
/*id设置bottom,上外边距20像素,只有一个上面方向有边框:实线,像素1,颜色ddd*/> 
</div>


</body>
</html>

							





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





2019-03-23 交作业
唯独LI



交作业 先交了再看站长的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.content{
width:600px;
}
.floatright{
float:right;
}
hr{
padding:0;
height:1.5px;
border:none;
background-color:lightgray;
}
#user{
float:left;
margin-top:6px;
}
#user div{
margin-top:10px;
background-image:url(img/5.png);
}
.font{
margin-top:15px;
margin-left:60px;
}
.fontcolor{
color:#000099;
font-weight:bold;
}
.floatleft{
float:left;
}
.font .text{
font-family:"楷体";
font-size:16px;
margin-left:210px;
}
.foot{
font-family:"楷体";
font-size:16px;
}
.foot img{
margin-right:5px;
}
</style>
</head>
<body>
<div class="content">
<img alt="菜单图片" src="img/1.png">&nbsp;&nbsp;最新动态
<div class="floatright">
<img src="img/2.png">&nbsp;设置
</div>
<hr/>
<div id="user">
<img src="img/4.png"><br/>
<div>6551</div>
</div>
<div class="font">
<span>热门回答,来自</span>
<span>机械</span>
<span class="fontcolor">关注话题</span>
<img class="floatright" src="img/3.png"><br/>
<span class="fontcolor">人类史上令人叹为观止的极限精度制造成果有哪些?</span>
<p><b>Vinect Fu</b>,&nbsp;Materials Science,&nbsp;PhD</p>
<img class="floatleft" src="img/6.png">
<p class="text">说到精度,就不得不在材料学中最重要的一个方面:表征。要想研究一种材料性能,我在手里把玩是远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级别(放大千倍),如果要获得更深...<a href="">显示全部</a></p>
<div class="foot">
<img src="img/7.png">关注问题
<img src="img/8.png">867条评论
<img src="img/9.png">作者保留权利
</div>
</div>
<hr/>

</div>


</body>
</html>

							





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





2019-03-14 第一次交作业,好紧张
2019-02-28 建的CSS写的 基本上全是用的相对定位布局 不知道怎么写将就把
2019-02-25 我知道知乎这个剑桥材料学博士。。。
2019-02-18 交作业啦
2019-01-24 大概也就这个意思 调着太麻烦 这也不对那也不对
2018-12-24 交作业
2018-12-13 作业
2018-12-04 交作业
2018-11-28 感觉CSS代码太乱了,而且取class名很头痛
2018-11-26 交作业!
2018-11-20 为什么和答案差不多,但是确实这样的结果?
2018-11-15 交作业
2018-11-14 交作业
2018-10-01 交作业
2018-09-19 第一次交作业
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群交流: 984886441
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图