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>css练习</title>
</head>
<style>
.floatright{float:right}
.floatleft{float:left}
.bold{font-weight:bold}
#top{border-bottom-style:solid;
      border-bottom-color:silver;
      border-bottom-width:1px;
      padding-bottom:10px;
      margin-bottom:10px;
	  font-family:宋体;
	  font-size:12px;
	  color:#555;}
#left{float:left;
      margin-right:10px;}
body{
    font-family:"宋体";
    font-size:13px;
    color:#666666;
    width:643px;
    }
a{
    text-decoration: none;
	font-size:13px;
    }
#bottom{border-bottom-style:solid;
      border-bottom-color:#CCC;
      border-bottom-width:1px;
      padding-bottom:10px;
      margin-bottom:10px;
	  font-family:宋体;
	  font-size:12px;
	  color:darkgray;
	  }
</style>

<body>
<div id="top">
<img style="margin-right:5px" src="1.png"> 
<span class="bold">最新动态</span> 
<span  class="floatright">设置</span> 
<img  style="margin-right:5px" class="floatright" src="2.png"> 
</div>
<div id="mid">
<div id="left">
<img style="margin-right:5px;padding:0px 0px 10px 0px" src="4.png"> <br />
<span style="background-image:url(5.png);padding:6px;font-size:12px;color:#666;">6551</span>
</div>
<div id="right">
<span style="font-size:14px;color:#666;">热门回答，来自 机械</span>
<a href="">关注话题</a>
<a class="floatright" href=""><img src="3.png"> </a>
<br /><br />
<a class="bold" href="">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
<p style="font-size:13px;"><strong>Vincent Fu</strong>，Materials Science，PhD</p>
<img class="floatleft" style="margin-left:60px;margin-right:20px" src="6.png"/>
<p style="font-size:13px; line-height:180%">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="">显示全部 </a> </p> 	
</div>
</div>
<div id="bottom">
<a href=""><img style="margin-left:60px;" src="7.png"></a>
<span>关注问题</span>
<a href=""><img src="8.png"> </a>
<span>867条评论</span>
<img src="9.png"> 
<span>作者保留权利</span> 
</div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-01-10 小企业的前端Time-CSS 综合性练习1

小企业哒

样式用的太多显得有些繁杂

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>综合性练习1</title>
    </head>
    
    <body>
        <style>
            body{
                /*设置默认格式:14像素,灰色,占据空间的50%*/
                font-size:14px;
                color:Gray;
                width:50%;
            }

            div.border{
                /*设置边框属性:下边框1ps,实线,粉色*/
                border-bottom:1px solid Pink;
                padding-bottom:12px;
                margin-bottom:12px;
            }
            
            span.title{
                /*设置标题属性:16像素,加粗,绿色*/
                font:normal bold 16px "default";
                color:#B0D0A0;
            }
             
            .fl{
                /*向左浮动*/
                float:left;
            }
            
            .fr{
                /*向右浮动*/
                float:right;
            }
            	
            div.leftblock{
                /*设置头像测块属性:向左浮动,外边框向右10像素,高300像素*/
                float:left;
                margin-right:10px;
                height:300px;
            }
	
            div.background_image{
                /*设置头像侧下方背景,内边距5像素*/
                background-image:url(素材/HomeWork1/small_background.png);
                padding:5px;
            }
	
            a{
                /*设置超链属性:无下划线,蓝色,内边框向右10像素*/
                text-decoration:none;
                color:SkyBlue;
                padding-left:10px;
            }
	
            p.p1{
                /*设置文字属性:10像素,红色*/
                font:normal normal 10px "default";
                color:red;
            }
            p.p2{
                /*设置文字属性:加粗,14像素,蓝色*/
                font:normal bold 14px "default";
                color:LightSkyBlue;
            }
	
        </style>
        
        <div class="border">
            <span class="title">
                <img style="margin-right:10px" src="素材/HomeWork1/directory.png"/>最新动态
            </span>
	
            <span class="fr">
                <img style="margin-right:10px" src="素材/HomeWork1/setting.png"/>设置
            </span>
        </div>

        <div class="border">
            <div class="leftblock">
                <img class="fl" style="margin-bottom:10px" src="素材/HomeWork1/head_portrait.jpg"/><br/><br/><br/>
                <div class="background_image">52939</div>
            </div>

            <div>
                <img class="fr" src="素材/HomeWork1/exit.png"/>
                <p class="p1">热门回答,来自 动漫<a href=" ">关注话题</a>
                <p class="p2">柚子社(Yuzu-Soft)都有哪些好玩的作品?</p>
                <p class="p3"><strong>小企业</strong>, 绅士学科, 绅士学位</p>	
                <img class="fl" style="margin-right:10px" src="素材/HomeWork1/senrenbanka.jpg"/>

                <div>
                    <p>千恋*万花（柚子社制作的Galgame）</p>
                    <p>《千恋*万花》是由Yuzu-Soft （ゆずソフト）制作的一款美少女游戏，于2016年7月29日在日本本土发售，是柚子社的第9作，也是其十周年纪念作品。</p>
                    <p>公开同时也宣布将被改编成同名漫画，漫画版由季月えりか作画，于Media Factory 旗下的漫画杂志月刊Comic Alive连载。2018年12月21日...<a href=" ">显示全部</a></p>
                </div>  
            </div>
            
            <div class="p1" style="color:LightGray">
                <img src="素材/HomeWork1/attention.png"/>
                <span >关注问题</span>
                <img src="素材/HomeWork1/comments.png"/>
                <span>529条评论</span>
                <img src="素材/HomeWork1/point.png"/>
                <span>作者保留权利</span> 
            </div>
        </div>
    
    </body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-11-25 这个line-height:170%是怎么算出来的，

汤达人

第二次跟着答案做了一遍，有俩个问题，这个line-height:170%是怎么算出来的，还有style里为什么要写这个边框线 .show{ border:1px solid red; } div1{ border:1px solid green; } 望老师解答！！！

<!DOCTYPE html>
<html>
	<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:1px;
			padding-bottom:10px;
			margin-bottom: 15px;
		}
		.floatright{
			float:right;
		}
		.floatleft{
			float:left;
		}
		.show{
			border:1px solid red;
		}
		div1{
			border:1px solid green;
		}
		a{
			text-decoration: none;
			color:#336699;
		}
		.text{
			color:rgb(51,51,51);
		}
		div#thirDiv span{
			color:rgb(169,169,169);
		}
		div.clearleft{
			clear:left;
		}
		</style>

		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="topdiv">
			<img style="margin-right:5px" src="../img/作业图像/1.png"/>
			<span class="bold">最新动态</span>
			<span class="floatright">设置</span>
			<img style="margin-right:5px" class="floatright" src="../img/作业图像/2.png"/> 
		</div>
		<div class="floatleft" style="margin-right:15px">
			<img src="../img/作业图像/4.png"/>
		</br>
		</br>
			<span style="background-image:url(../img/作业图像/5.png); padding:5px">6651</span>
		</div>
		<div class="floatleft show1">
			<div style="margin-bottom:5px">
				<span>热门回答，来自 机械</span>
				<a href="#">关注话题</a>
				<img src="../img/作业图像/3.png"/>
			</div>
			<a class="bold">人类史上令人叹止的极限精度制造成果有哪些？</a>
			<p class="text">
				<b>Vincent  Fu,</b>
				Materrials Science, PhD
			</p>
			<img class="floatleft text" src="../img/作业图像/6.png"/>
			<div class="floatleft text" style="line-height:170%;margin-left:15px;width:367px">
				说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
				<a href>显示全部</a>
			<br>
			
			&nbsp;
			
			</div>
			<div id="thirDiv">
				<img src="../img/作业图像/7.png"/>
				<span>关注问题</span>
				<img src="../img/作业图像/8.png"/>
				<span>867条评论</span>
				<img src="../img/作业图像/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:silver;"></div>
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-11-24 答案里padding-bottom:10px; 为什么是10px; 我用PS 量了尺寸，但不是10px呀？

汤达人

作业是做出来了，但是看了答案，没有答案写得精简没有懂答案里的 padding-bottom:10px; 为什么是10px; 我用PS 量了尺寸，但不是10px呀？望老师解答

<!DOCTYPE html>
<html>
	<head>
		<style>
			section{
				width:645px;

			}
			.right{
				float:right;
				font:bold 15px "楷体";
				color:rgb(102,102,102);
							}
			.left{
				float:left;				
			}		
		    .center{		    	
		    	margin:0px 15px; 
		    	font:bold 13px "宋体";
		    	color:rgb(102,102,102);
		    }
		    .box1{
		    	border-bottom:1px solid rgb(221,221,221);
		    	height:30px;		    			    	
		    }
		    .box2{
		    	border-bottom:1px solid rgb(221,221,221);
		    	height:260px;		    			    	
		    }
		    div.a{
		    	color:rgb(102,102,102);
		    	font-size:13px;
		    	font-family:"宋体";
		    	position:absolute;
		    	left:11px;
		    	top:107px;
		    }
		    div.b{
		    	color:rgb(102,102,102);
		    	font:12px "宋体";
		    	position: absolute;
		    	left:58px;
		    	top:52px;
		    }
		    a.no_underline1{
		    	text-decoration: none;
		    	color:rgb(51,102,153);
		    	}
		    a.no_underline2{
		    	text-decoration: none;
		    	color:rgb(51,102,153);		    	
		    }	
		    div.c{	
		    	color:rgb(51,102,153);    	
		    	font-size:12px;
		    	font-weight:bold;
		    	font-family:"宋体";
		    	position:absolute;
		    	left:58px;
		    	top:72px;	    	
		    }
		    div.d{	    	
		    	font-size:13px;
		    	font-family:"Times New Roman";
		    	position:absolute;
		    	left:58px;
		    	top:102px;	    	
		    }
		    div.e{	    	
		    	position:absolute;
		    	left:58px;
		    	top:128px;	    	
		    }
		    div.f{	    	
		    	font-size:13px;
		    	font-family:"宋体";
		    	line-height:20px;
		    	position:absolute;
		    	left:273px;
		    	top:132px;	    	
		    }
		    div.g{
		    	color:rgb(169,169,169);
		    	font-size:12px;
		    	font-family:"宋体";
		    	display:inline;
		    	position:absolute;
		    	left:56px;
		    	top:262px;
		    }
		    div.h{
		    	color:rgb(169,169,169);
		    	font-size:12px;
		    	font-family:"宋体";
		    	display:inline;
		    	position:absolute;
		    	left:132px;
		    	top:262px;
		    }
		    div.i{
		    	color:rgb(169,169,169);
		    	font-size:12px;
		    	font-family:"宋体";
		    	display:inline;
		    	position:absolute;
		    	left:219px;
		    	top:262px;
		    }
		    
		  
		</style>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<section>
		<div class="box1">
			<img class="left" valign="middle" src="../img/作业图像/1.png"/>
			<span class="center" valign="middle">最新动态</span>
			<span class="right" valign="middle"><img src="../img/作业图像/2.png"/>  设置</span>			
		</div>
		<div class="box2">
			<p><img src="../img/作业图像/4.png"/></p>
			<div class="a">6551</div>
			<div class="b">热门回答，来自 机械 <a class="no_underline1" href="1.html">关注话题</a></div>
			<div class="c"><a class="no_underline2" href="1.html" >人类史上令人叹为观止的极限精度制作成果有哪些？</a></div>
			<div class="d"><b>Vincent  Fu,</b>  Materrials Science, PhD</div>
			<div class="e"><img src="../img/作业图像/6.png"/> </div>
			<div class="f">说到精度，就不得不提在材料学中最重要的一个方面：表征。要<br/>项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出<br/>放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓<br/>一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），<br/>如果要获得更深...<a class="no_underline1" href="1.html">显示全部</a></div>
			<div class="g"><img src="../img/作业图像/7.png"/>  关注问题</div>
			<div class="h"><img src="../img/作业图像/8.png"/>  867条评论</div>
			<div class="i"><img src="../img/作业图像/9.png"/>  作者保留权利</div>
			
		</div>
		
		</section>
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-11-14 作业

lowB的成长之路

八九不离十吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>综合练习1</title>
</head>
    <style>
        .wrap {
            width:884px;
            margin:0 auto;
        }
        .header {
            width:100%;
            border-bottom:1px solid lightgray;
            overflow:hidden;
            padding-bottom:10px;
            color:gray;
        }
        .header .left {
            float:left;
        }
        .header .right {
            float:right;
        }
        .main {
            width:100%;
            margin:10px 0px;
            overflow:hidden;
            border-bottom:1px solid lightgray;
        }
        .main_left {
            width:65px;
            float:left;
        }
        .main_left span {
            background:#f8f8f8;
            padding:3px;
            display:inline-block;
            margin-top:5px;
        }

        .main_right {
            width:819px;
            float:left;
        }
        .main_right .img {
            display:inline-block;
            float:left;
            margin-right:15px;
        }
        .main_right .img1 {
            margin-top:30px;
            margin-bottom:20px;
            color:gray;
        }
        .main_right .p {
            line-height:25px;
        }
        a {
            text-decoration:none;
        }
        p {
            margin:0;
        }
        .p1 {
            line-height:35px;
        }

    </style>
<body>
    <div class="wrap">
        <div class="header">
            <div class="left">
                <img src="../images/1.png" alt="">
                <strong>最新动态</strong>
            </div>
            <div  class="right">
                <img src="../images/2.png" alt="">
                <span>设置</span>
            </div>
        </div>
        <div class="main">
            <div class="main_left">
                <img src="../images/4.png" alt="">
                <span>6551</span>
            </div>
            <div class="main_right">
                <p>热门回答，来自 机械 <a href="#" title="">关注话题</a></p>
                <p><a href="#" title=""><b>人类史上令人叹为观止的极限精度制造成果有哪些？</b></a></p>
                <p class="p1"><b>Vincent Fu,</b>Materials Seience, PhD</p>
                <img class="img" src="../images/6.png" alt="">
                <p class="p">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="#" title="">显示全部</a></p>
                <p class="img1"><img src="../images/7.png" alt="">
               <span>关注问题</span>
               <img src="../images/8.png" alt="">
               <span>867条评论</span>
               <img src="../images/9.png" alt="">
               <span>作者保留权利</span>
            </p>
            </div>

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-10-22 提交作业

啊勤小伙子

交作业，还有个德玛西亚的作业也放一起了，大部分都是通过计算边距，直接复制全部代码就好了

<style>
td{
 background-color:gray;
}
 .alllength{
 width:888px;

 }
 .left{
  
   float:left;

  }
  .right{
  float:right;
    overflow:hidden;

  }
  
  .link-top {
            width: 100%;
            height: 1px;
            border-top: solid gray 1px;
        }
		
	 .link-bottom {
            width: 100%;
            height: 1px;
            border-top: solid gray 1px;
        }	
		
	#div1
        {
            position: relative;
            height: 45px;
            width: 90%;
           
        }
        #div2
        {
            position: absolute;
            bottom: 0;
           
            width: 100%;
           
        }	
		
		 #div3
        {
            position: absolute;
            bottom: -300;
           
            width: 100%;
           
        }	
		
	img#i2{
	  position: absolute;
	  left: 8px;
	   top: 830px;
	  z-index:-1;
	}	
	
	.f{
	  float:left;
	}
	
	 .top{
	   width:1600px;
	   float:top;
	   
	  }
	  .bottom{
	   width:1600px;
	   float:bottom;
	   margin-top:  -12px
	  
	  }
	  

		
	

</style>

<html>
<body>
<h1>英雄联盟 （电子竞技类游戏）</h1>
<p>
<b>《英雄联盟》</b>（简称lol）是由美国<i>Riot Games</i>开发，中国大陆地区由腾讯游戏运营的网络游戏。<br/>
</p>
<p>
<b>《英雄联盟》</b>除了即时战略、团队作战外，还拥有一百多位特色各异的英雄、丰富的地图及玩法、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。[<ins>1</ins>]<br/>
</p>
<p>
2016年1月，根据官方数据显示，LOL全球最高同时在线已突破<del>750</del> 900万，全球日活跃高达2700万，全球月活跃已达6700<br/>万，注册用户亿计，LOL已经成为当今世界最具人气和影响力的网络游戏之一。[<ins>2</ins>]
</p>

<h1>英雄技能</h1>
<table border="1" width="1000px">
  <tr bgcolor="Gainsboro">
      <td width="15%"><b>技能名</b></td>
      <td width="5%"><b>触发</b></td>
	  <td width="12%"><b>技能属性</b></td>
      <td><b>技能效果</b></td>
	  <td width="10%">图标</td>
    
  </tr>

   <tr >
      <td width="15%"><b>坚韧</b></td>
      <td width="5%"><b>被动</b></td>
	  <td width="12%" colspan="2">如果盖伦在最近的10秒里没有受到伤害或者被敌方技能命中，那么盖伦会每秒回复他0.5%的最大生命值。小兵的伤害不会中断坚韧效果。</td>
      
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill1.png"></div></td>
    
  </tr>
  
   <tr >
      <td width="15%"><b>致命打击</b></td>
      <td width="5%"><b>Q</b></td>
	  <td width="12%">冷却时间：8</td>
      <td>盖伦的移动速度获得爆发性提升，同时移除身上的所有减速效果，并且他的下次攻击将打击敌人的要害部位，造成额外伤害并将目标沉默。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill2.png"></div></td>
    
  </tr>
  
  <tr >
      <td width="15%"><b>勇气</b></td>
      <td width="5%"><b>W</b></td>
	  <td width="12%">冷却时间：24/23/22/21/20</td>
      <td>盖伦被动地提升护甲和魔法抗性。他也可以激活这个技能来获得一层护盾，暂时减少即将到来的伤害和控制效果。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill3.png"></div></td>
    
  </tr>
  
  <tr >
      <td width="15%"><b>审判</b></td>
      <td width="5%"><b>E</b></td>
	  <td width="12%">冷却时间：13/12/11/10/9</td>
      <td>盖伦用他的大剑来表演死亡之舞，在持续期间内对周围的敌方单位造成伤害。效果被动：盖伦的额外护甲和魔法抗性（来自符文、天赋和装备）提高20%。主动：盖伦获得一个持续2/3/4/5/6秒的防御护盾，减少即将到来的30/30/30/30/30%的伤害，并获得30%控制效果减免。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill4.png"></div></td>
    
  </tr>
  
   <tr >
      <td width="15%"><b>德玛西亚正义</b></td>
      <td width="5%"><b>R</b></td>
	  <td width="12%">冷却时间：160/120/80</td>
      <td>效果盖伦召唤德玛西亚之力，试图斩杀一名敌方英雄，目标损失的生命越多，则此技能造成的伤害越高。造成175/350/525魔法伤害，敌人每失去3.5/3/2.5生命值就会多承受1伤害。

技能细节

R：盖伦召唤德玛西亚之力来对敌方英雄造成夺命一击。目标已损失的生命值越多，所受的伤害值越高。</td>
	  <td width="10%"><div align="center"><img src="file://C:\Users\lenovo\Desktop\images\skill5.png"></div></td>
    
  </tr>


</table>

<div style="margin-top:30px;" class="alllength" >

   <div id="div1">
  
	<div class="left" style="vertical-align:middle" ><img src="file://C:\Users\lenovo\Desktop\img\1.png"><a style="color:gray; margin-left:5px;font-size:4px;"  text-decoration="none"><b>最新动态</b></a></div> 
	<div class="right" style="vertical-align:middle" ><img src="file://C:\Users\lenovo\Desktop\img\2.png"><a style="color:gray; margin-left:5px;font-size:4px;"  text-decoration="none"><b>设置</b></a></div> 
     
	<div id="div2" ><p  class="link-top"></p></div>
	
	<div id="div3" ><p  class="link-bottom"></p></div>
   </div>	
	
	
	<div>
		<div class="f">
			<img src="file://C:\Users\lenovo\Desktop\img\4.png">	&nbsp;&nbsp;
		</div>
		
		
		
		<div class="top">
			<p style="font-size:0.5em;" >  热门回答,来自&nbsp;&nbsp;机械&nbsp;&nbsp;<a style="color:blue; " >关注话题</a> <img style="margin-left: 573px;" src="file://C:\Users\lenovo\Desktop\img\3.png"></p>  
			 </div>
		
		
		<div class="bottom"><p style="font-size:0.5em;color: lightskyblue;"><strong>人类历史上令人叹为观止的极限精度制造成果有哪些？</strong></p></div>
		
		<div ><p style="font-size:0.8em;color: gray;margin-top: 19px;margin-left: 55px;"><strong>Vincent FU,Materials Science,PhD</strong></p></div>
		
			<div style="margin-top:-28px;">
			<p style="font-size: 8pt; color:gray; margin-left:4pt" >6551</p> <img id="i2" src="file://C:\Users\lenovo\Desktop\img\5.png">
		</div>
		
		<div style="margin-left:52px; width:650px;">
        <div class="f">
			<img src="file://C:\Users\lenovo\Desktop\img\6.png">	&nbsp;&nbsp;
		</div>      说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，
                    就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，
                    而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千
                    倍），如果要获得更深... <a style="color:blue; ">显示全部</a>
		</div>
		
		<div style="margin-top:30px;" >
		
			<p  style="font-size:0.8em;color: lightgray;margin-top: 19px;margin-left: 55px;"><strong><img  src="file://C:\Users\lenovo\Desktop\img\7.png">关注问题 <img  src="file://C:\Users\lenovo\Desktop\img\8.png">&nbsp;876条评论 <img  src="file://C:\Users\lenovo\Desktop\img\9.png">&nbsp;作者保留权利</strong></p>
			
			
		</div>
		
			
		</div>
		
		
		
		
	
		
	</div>
	
	

	
	
	
</div>

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-10-18 作业

18870287891

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习1方案2</title>
		<style>
			.div1{
				border-bottom: 1px solid lightgray;
				width: 50%;
				height: 35px;
			}
			.d1{
				float: left;
				
			}
			.d2{
				float: right;
			}
			.div2{
				margin-top: 20px;
				width: 50%;
				height: 250px;
				 border-bottom: 1px solid lightgray;
			}
			.d3{
				width: 60px;
				float:left;
				 
			}
			.d4{
				float: right;
				 
				}
			.a1 {
				text-decoration: none;
			}
			.a2{
				text-decoration: none;
			}
			.d5{
				font-family: 楷体;
			}
			.d6{
				margin-top: 15px;
			}
			.d7{
				
				background-color:lightblue ;
				width: 40px;
			}
			.d8{
				font-family: "times new roman";
				position: absolute;
				left: 70px;
				top: 115px;
				
			}
			.d10{
				position:relative ;
				left: 60px;
				
			}
			.d11{
				width: 400px;
				position: absolute;
				left: 280px;
				top: 140px;
				font-size: 13px;
				line-height: 22px;
			}
			.d12{
				position:relative ;
				left: 60px;
				top: 10px;
				font-size: small;
				color: gray;
				
			}
		    
			
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="d1">
				<img src="../img/1.png" />
				<strong>最新动态</strong>
			</div>
			<div class="d2">
				<img src="../img/2.png" />
				设置
			</div>
		</div>
		<div class="div2">
			<div class="d3">
				<img src="../img/4.png" />
			</div>
			<div class="d4">
				<img src="../img/3.png" />
			</div>
			<div class="d5" >
				热门回答，来自 机械  <a class="a1" href="#self" >关注话题</a> <br />
				<font color="blue">人类史上令人叹为观止的极限精度制造成果有哪些？</font>
			</div>
			<div class="d6">
				<div class="d7">
					1156
				</div>
				<div class="d8">
					<strong>Vincent Fu</strong> , Materials Science, PhD
				</div>
			</div>
			<div class="d9">
				<div class="d10">
					<img src="../img/6.png" />
				</div>
				<div class="d11">
					说到精度，就不得不提在材料学中最重要的一个方面：表征。
					要项研究一种材料性能，握在手里把玩时远远不够的，
					就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，
					而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千
					倍），如果要获得更深... <a class="a2" href="#self">显示全部</a>
				</div>
			</div>
			<div class="d12">
				<img src="../img/7.png" />关注问题
				<img src="../img/8.png" />100条评论
				<img src="../img/9.png" />作者保留权利
			</div>
		</div>
		
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-10-17 交作业

woshijavadaniu

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <style> a{ text-decoration:none; } #bottom{ float:left; border-top-width:2px; border-bottom-width:2px; border-top-style:solid; border-bottom-style:solid; border-top-color:gray; border-bottom-color:gray; margin-top:10px; padding-top:10px; width:100% } #top-left{ width:92.5%; float:left; } #top-fight{ width:7.5%; float:right; } .bottom-left{ width:10%; float:left; } .bottom-right{ width:90%; float:right; } #bottom-top{ margin-bottom:50px; } #bottom-bottom-left{ background-image:url(images/5.png); background-repeat:repeat; text-align:center; line-height:30px; width:40px; } #bottom-bottom-right-top{ margin-bottom:10px; } #bottom-bottom-right-middle{ float:left; } #bottom-bottom-right-bottom{ margin-top:10px; float:left; color:gray; margin-bottom:10px; } #img3{ float:right; } #img6{ float:left; margin-right:20px; } #Span{ padding-top:10px; } </style>  <div> <div> <div id="top-left"><img src="images/1.png"/><strong> 最新动态</strong></div> <div id="top-right"><img src="images/2.png"/> 设置</div> </div> <div id="bottom"> <div id="bottom-top"> <div class="bottom-left"> <img src="images/4.png"/> </div> <div class="bottom-right"> 热门回答，来自机械 <font color="blue"> 关注话题</font> <img id="img3" src="images/3.png" /> <br/> <font color="blue"><strong>人类历史上令人叹为观止的极限精度制造成果有哪些？</strong></font> </div> </div> <div> <div id="bottom-bottom-left" class="bottom-left">6551</div> <div class="bottom-right"> <div id="bottom-bottom-right-top"><strong>Vincent Fu,</strong>Materials Science, PhD</div> <div id="bottom-bottom-right-middle"> <img id="img6" src="images/6.png" /> <div id="Span">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="https://www.12306.com">显示全部</a></div> </div> <div id="bottom-bottom-right-bottom"><img src="images/7.png"/> 关注问题 <img src="images/8.png"/> 867条评论 <img src="images/9.png"/> 作者保留权利</div> </div> </div> </div> </div> </body> </html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-10-16 交作业

则恺

。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<style>
body{
    width:700px;
    font-family:"宋体";
    font-size:15px;
    color:black;
}

.bold{
    font-weight:bold;
}

div.topdiv{
	border-top-width:1;
	border-top-color:silver;
	border-top-style:solid;
	margin-top:10px;
	margin-bottom:15px;
}

div.bottomdiv{
	border-bottom-width:1;
	border-bottom-color:silver;
	border-bottom-style:solid;
	margin-top:20px;
}

.floatright{
	float:right;
}

.floatleft{
	float:left;
}

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

div.thirdDiv{
	color:darkgray;
}

div.clearLeft{
    clear:left;
}

</style>

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

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

	<div class="floatleft">
		<div style="margin-bottom:5px">
			<span>热门回答，来自 机械</span>
			<a href="">关注话题</a>
			<img src="3.png" class="floatright">
		</div>
		<a class="bold">人类历史上令人叹为观止的精度制造成果有哪些？</a>
		<p class="text"><strong>
			Vincent Fu
		</strong>
         ,Materials Science,PhD
		</p>
		<img class="floatleft" src="6.png">
		<div class="floatleft text" style="line-height:150%;margin-left:15px;width:367px" >
			说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... 	

			<a href="">显示全部</a>
			<br/>
			&nbsp;
		</div>

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

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-09-27 交作业

kirkor

好久没做布局，感觉好生疏，样式用内联了，要是做细的话就把内联包装好用嵌套好了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html body{
			font-size: 10px;
		}
		.content{
			margin: 0 auto;
			width: 600px;
		}
		.news{
			height: 21px;
			line-height: 21px;

		}
		.news span{
			margin-left: 2px;
		}
		.newsright{
			float: right;
		}
		.newsimg{
			display: inline-block;
			vertical-align: middle;
		}
		.titleimg{
			height: 40px;
			float: left;
		}
		.title{
			height: 40px;
			line-height: 12px;
			margin-left: 60px;
		}
		.x{
			float: right;
		}
		.attact{
			color: #acd6ff
		}
		.talk{
			background-color: #ECF5FF;
			width: 40px;
			height: 20px;
			border-radius: 5px;
			text-align: center;
			line-height: 20px;
			float: left;
		}
		.author{
			height: 30px;
			/*float: left;*/
			margin-left: 20px;
		}
		.text{
			/*float: left;*/
			height: 130px;
			margin-left: 20px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="news">
			<img src="img/1.png" alt="" class="newsimg">
			<span style="font-weight: bold;">最新动态</span>
			<div class="newsright">
				<img src="img/2.png" alt="" class="optionimg newsimg">
				<span class="option">设置</span>
			</div>
		</div>
		<hr>
		<div class="main">
			<div>
				<div class="titleimg">
					<img src="img/4.png" alt="">
				</div>
				<div class="title">
					<img src="img/3.png" alt="" class="x">
					<p>热门回答，来自 机械 <span class="attact">关注话题</span></p>
					<p style="color: #66b3ff; font-weight: bold;">人类史上令人叹为观止的极限精度制造成果有哪些？</p>
				</div>
			</div>
			<div style="margin-top: 10px;">
				<div class="talk">6551</div>
				<div style="float: left;">
					<div class="author">
						<span style="font-weight: bold;">Vincent Fu,&nbsp;</span><span>Materials Science,&nbsp;PhD</span>
					</div>
					<div class="text">
						<div style="float: left;">
							<img src="img/6.png" alt="">
						</div>
						<div style="float: left; margin-left: 20px; width: 320px; line-height: 23px;">
							<span>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料的性能，握在手里把玩时远远不够，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...</span><span style="color: #66b3ff;">显示全部</span>
						</div>
					</div>
					<div style="width: 400px; height: 30px; margin-left: 20px; color: #e0e0e0;">
						<img src="img/7.png" alt="">
						<span>关注问题</span>&nbsp;
						<img src="img/8.png" alt="">
						<span>867条评论</span>&nbsp;
						<img src="img/9.png" alt="">
						<span>作者保留权利</span>
					</div>
				</div>	
			</div>
		</div>
		<hr>
	</div>
</body>
</html>

1 个答案

learnMoreCode
答案时间：2019-09-27

勉强写出来了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习四</title>
	<style>
		body{
    			font-family:"宋体";
    			font-size:13px;
    			color:#666;
    			width:643px;
    }
      .bold{
    			font-weight:bold;
    }

    div.topdiv{
      			border-bottom-style:solid;
      			border-bottom-color:silver;
      			border-bottom-width:1px;
      			padding-bottom:10px;
      			margin-bottom:15px;
    }
     .floatright{
    	float:right;
    }

    .floatleft{
    	float:left;
    }
    .leftDiv {
    	width: 50px;
    }
    .rightDiv {
    	width: 593px;
    }
    a {
    	text-decoration: none;
    }
    .secondDiv {
    	border-bottom: solid;
    	border-bottom-width: 1px;
    	border-bottom-color: darkgrey;
    	height: 250px;
    }
	</style>
</head>
<body>
	<div class="topdiv"> 
	<img style="margin-right:5px" src="1.png"> 
	<span class="bold">最新动态</span> 
	<span  class="floatright" >设置</span> 
	<img  style="margin-right:5px" class="floatright" src="2.png"> 
   </div>
  <div class="secondDiv">
  	<div class="leftDiv floatleft">
  		<img src="4.png"><br><br>
  		<span style="background-image: url(5.png);">6551</span>
  	</div>
  	<div class="rightDiv floatright">
  		<div>
  		<img style="float: right;" src="3.png">
  		<span class="floatleft">热门回答，来自 机械</span>&nbsp
  		<a href="#">关注话题</a><br><br>
  		<a href="#" class="bold" style="color: #369">人类史上令人叹为观止的极限精度制造成果有哪些？</a><br><br>
  		<span><strong>Vincent Fu</strong>, Materials Science, PhD</span><br><br>
  		</div>
  		<div>
  		<img src="6.png" style="width: 200px;height: 112px;float: left;margin-right: 23px; ">
  		<div class="floatrights" style="line-height: 170%;">
  			说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
  			<a href="#">显示全部</a>
  		</div>
  		</div><br>
  		<img src="7.png" style="color: darkgrey;">
  		<a href="#"style="color: darkgrey;">关注问题</a>
  		<img src="8.png" style="color: darkgrey;">
  		<span style="color: darkgrey;">867条评论</span>
  		<img src="9.png" style="color: darkgrey;">
  		<span style="color: darkgrey;"> 作者保留权利</span>
  	</div>
  </div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-09-23 交作业

暴富

交作业写得不怎么好，勉强完成了

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>综合练习 1</title>
</head>
<style>
    div{
        width: 650px;
    }
    #topdiv{
        border-bottom: lightgray 1px solid;
        padding-bottom: 30px;
    }
    #topdiv img{
        margin-right: 3px;
    }
    #topdiv span{
        font-size:80%;
        font-family:宋体;
    }
    #headphoto{
        width: 38px;
        display: inline-block;
        align-content: center;
        text-align: center;
    }
    #middiv{
        padding-top:10px;
        padding-bottom: 20px;
        position: absolute;
        font-size:80%;
        font-family:宋体;
        border-bottom: lightgray 1px solid;
    }
    #title{
        display: inline-block;
        width: 400px;
        margin-left: 5px;
    }
    #title a{
        text-decoration: none;

    }
    #article{
        padding-left: 50px;
    }
    #article img{
        margin-top: 5px;
        display: inline-block;
        float: left;
    }
    #article span{
        margin-top: 5px;
        display: inline-block;
        width: 370px;
        /*height: 110px;*/
        /*width: auto;*/
    }
    #article a{
        text-decoration: none;
    }
    .labelpic{
        margin-right: 5px;
    }
    #function{
        margin-top: 5px;
        font-size:80%;
        font-family:宋体;
        color: lightgray;
        vertical-align: middle;

    }
    #function img{
        float: none;
    }

</style>
<body>
    <div id="topdiv">
        <img src="img/1.png" style="float: left">
        <span style="color: gray;float: left"><strong>最新动态</strong></span>
        <span style="color: gray;float: right"> 设置</span>
        <img src="img/2.png" style="float: right;">
    </div>
    <div id="middiv">
        <span id="headphoto">
            <img src="img/4.png" style="">
            <img src="img/5.png" style="position: absolute;top:53px;left:0px;z-index: -1">
            <span style="z-index:1;color: gray;font-size: 80%">
                6551
            </span>
        </span>
        <span id="title">
            热门回答，来自 机械 <a href="baidu.com">关注话题</a></br>
            <a href="baidu.com"><strong>人类史上令人叹为观止的极限精度制造成果有哪些？</strong></a></br>
            </br>
            <strong>Vincent Fu,</strong> Materials Science, PhD
        </span>
        <img src="img/3.png" style="float: right">


        <div id="article">
            <table>
                <tr>
                    <td>
                        <img src="img/6.png">
                    </td>
                    <td>
                    <span>
                    说到进度，就不得不提在材料学中最重要的一个方面:表征。要想研究。
                    说到进度，就不得不提在材料学中最重要的一个方面:表征。要想研究
                    说到进度，就不得不提在材料学中最重要的一个方面:表征。要想研究
                    说到进度，就不得不提在材料学中最重要的一个方面:表征。要想研究
                    。。。<a href="baidu.com">显示全部</a>
                    </span>
                    </td>
                </tr>

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-09-17 交作业

我的未来

交作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#top{width: 600px;
			height: 50px;
			}
			/* 最上方定义容器的宽和高 */
		.size{color: #000000;font-family: "bodoni mt black";font-weight: 600;}
		/* 设定字体 */
		.floatright{margin-left: 500px;}
		#g{margin-top: 20px;}
		.tuzi{float: left;}
		/* 兔子图片设置 */
		.b{color: blue;font-size: 17px;font-weight: 600;}
		/* 字体设置 */
		.c{background-image: url(tupian/5.png);}
		#last{width: 600px;height: 200px;}
	</style>
	<body>
		<div id="top">
			<img src="tupian/1.png" />
			<span class="size">最新动态</span>
			<span class="floatright"><img src="tupian/2.png">设置</span>
			<hr>
		</div>
		<div id="g">
			<img class="tuzi" src="tupian/4.png" /> 
			<span style="float: left;">&nbsp;&nbsp;&nbsp;&nbsp;热门回答，来自 机械</span>
			<a href="#">关注话题</a>
			<span><img style="margin-left: 280px;" src="tupian/3.png"></span>
			<br><span class="b">&nbsp;&nbsp;&nbsp;&nbsp;人类史上令人叹为观止的极限精度制造成果有哪些？</span>
			
		</div>
		<div id="center">
			<br><span class="c">6551</span> 
			<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vincent Fu,</b>Materials Science, PHD
		</div>
		<div id="last">
			<img style="margin: 20px;float: left;" src ="tupian/6.png"/>
			<div style="float: left;width:360px;height: 150px ;margin-top: 10px;">说到精度，就不得不提在材料学中最重要的一个方面：表征。要
			项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出
			放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），
			如果要获得更深...    
		      <a href="">显示全部</a>   
		</div> 
		
			<div style="margin-left: 20px;float: left;">
				<p><img src="tupian/7.png" >&nbsp;&nbsp;&nbsp;<font color="gainsboro">关注问题&nbsp;&nbsp;&nbsp;</font></div>
			<div style="float: left;">
				<p>&nbsp;&nbsp;<img src="tupian/8.png" >&nbsp;&nbsp;&nbsp;<font color="gainsboro">867条评论&nbsp;&nbsp;&nbsp;</font></div>
				<div style="float: left;">
					<p>&nbsp;&nbsp;&nbsp;<img src="tupian/9.png" >&nbsp;&nbsp;&nbsp;<font color="gainsboro">作者保留权利</font></div>
			
		
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-09-02 什么时候用id 什么时候用class？

2019-08-26 练习-综合练习1

Tyx

有些地方的选择器没有定义的，都删掉了

 <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;
   }
   
   a{
   text-decoration:none;   
   color:#336699;
   }
  
   .show{
    border:1px solid red; 
   }

   div1{
   border:1px solid green;
   }

   .text{
      color: #333;
   }
  
   div#thirdDiv span{
      color:darkgray;
   }

   div.clearleft{
      clear: left;
   }
   

    
</style>

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

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

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

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

   </div>

   <div class="clearleft">
   </div>
   <div style="margin-top: 20px;border-top-style: solid;border-top-color: #dddddd">
   </div>

</body>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-08-01 查看答案后有个地方很不解

2019-07-28 交作业

逆旅之人

太忙了，把布局做好了，字体、间距的这些细节没有调整。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.left {
				float: left;
			}
			
			.right {
				float: right;
			}
			
			#div0 {
				width: 750px;
				margin: 20px auto;
			}
			
			#div1 {
				width: 50px;
			}
			
			#div2 {
				width: 700px;
			}
			
			body {
				align-content: center;
			}
		</style>
	</head>

	<body>

		<div id="div0">
			<div>
				<img src="img/1.png" />
				<span>最新动态</span>
				<div class="right">
					<img src="img/2.png" />设置
				</div>
			</div>
			<hr />

			<div>
				<div class="left" id="div1">
					<img src="img/4.png" />
					<div>6551</div>
				</div>

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

	</body>

</html>

2 个答案

weleness
答案时间：2019-08-22

答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        * {
            margin: 0 0;
            padding: 0 0;
        }

        .b {
            width: 625px;
            height: 37px;
            margin: 5px 9px;
            border-bottom: #93999f solid 1px;
        }

        #img_left {
            float: left;
            padding: 9px 0px;
        }

        .span1 {
            display: inline-block;
            font-family: 新宋体;
            font-weight: bold;
            font-size: 3px;
            color: gray;
            position: absolute;
            margin: 11px 12px;
        }

        #img_right {
            float: right;
            padding: 7px 7px;
        }

        .spna2 {
            /*display: inline-block;*/
            font-family: 宋体;
            font-size: 3px;
            float: right;
            margin: 7px 0px;
            color: gray;
        }

        .c {
            width: 45px;
            height: 200px;
            float: left;
            margin: 15px 8px;
        }

        .span3 {
            position:relative;
            background-image: url("5.png");
            padding: 5px ;
            font-family: 宋体;
            font-size: 12.5px;
            color: gray;
            top: -11px;
        }
        .d {
            width: 630px; ;
            position: relative;
            top: 10px;
        }

        .d a{
            position: relative;
            left: 3px;
            text-decoration: none;
            font-size: small;
            color: #336699;
        }
        .a1{
            font-family: 新宋体;font-size: 12px; text-decoration: none;
            color: cornflowerblue;
            position: absolute;
            margin: 3px 15px;
        }
        .a1:visited{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="b">
    <img src="1.png" id="img_left">
    <span class="span1">最新动态</span>
    <span class="spna2">设置</span>
    <img src="2.png" id="img_right">
</div>
<div class="c">
    <img src="4.png">
    <br/>
    <br/>
    <span class="span3">6551</span>
</div>
<div class="d">
    <span style="font-size: 13px;font-family: 宋体;">热门回答，来自&nbsp;机械</span>
    <a href="#">关注话题</a>
    <img src="3.png" style="float: right;">
</div>
<div style="margin: 7px">
    <a style="color: #1c528b;font-size: 13px; font-weight: bold; font-family: 微软雅黑">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
</div>
<div style="margin: 10px">
    <p style=" font-size: 5px;font-family: 'Times New Roman'"><strong>Vincent Fu</strong>,&nbsp;&nbsp;&nbsp;&nbsp;Materials Science, &nbsp;&nbsp;PhD</p>
</div>
<img src="6.png" style="float: left; margin: 5px 5px">
<div style="width: 623px; margin: 0 20px; ">
    <p style="position: relative; left: 5px; font-size: 10px; line-height: 25px;letter-spacing: 1px;text-align: left;display: inline;">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...</p>
    <a href="#" class="a1">显示全部</a>
</div>
<div style=" width :500px;margin: 8px 65px;height: 25px;">
    <img src="7.png " style="padding: 2px;">
    <span style="font-family: 新宋体;font-size: 12px;color: gray;">关注问题</span>
    <img src="8.png" style="padding: 2px;">
    <span style="font-family: 新宋体;font-size: 12px;color: gray;">867条评论</span>
    <img src="9.png" style="padding: 2px;">
    <span style="font-family: 新宋体;font-size: 12px;color: gray;">作者保留权力</span>
</div>
<div style=" width:625px; border-bottom: 1px solid gray;margin: 0 9px;">
</div>
</body>

闷声发大财
答案时间：2019-07-30

答案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>综合练习1</title>
		<style>
			body {
				font-family: "宋体";
			    font-size: 13px;
			    color: #666666;
			}
			
			div.container {
				width: 50%;
				margin-left: 5%;
				margin-top: 2%;
			}
			
			div.top {
				border-bottom: solid 1px lightgrey;
			}
			
			div.top span {
				display: inline-block;
				font-weight:bold;
				margin: 5px;
			}
			
			.floatRight {
				float: right;
				margin-top: 0.5%;
			}
			
			div.center {
				margin-top: 2%;
			}
			
		    .floatLeft{
		  		float: left;	
		    }
		    
		    div.left {
		    	
		    }
		    
		    div.left img {
		    	display: block;
		    }
		    
		    div.left span#numOfconcern {
		    	background: url(img/5.png);
		    	text-align: center;
		    	padding: 10%;
		    }
		    
		    div.right {
		    	margin-left: 9%;
		    }
		    
		    div.rightBottom {
		    	margin-top: 2%;
		    }
		    
		    div.bottom {
		    	margin-top: 2%;
		    	border-top: solid 1px lightgrey;
		    }
		    
		    a {
		    	text-decoration: none;
		    	color: #336699;
		    }
		    
		    .clearLeft {
		    	clear:left
		    }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="top">
				<img src="img/1.png"/>
				<span>最新动态</span>
				<span style="float: right;">设置</span>
				<img src="img/2.png" id="imgOfSetting" class="floatRight">
		
			</div>
			<div class="center">
				<div class="left floatLeft">
					<img src="img/4.png"><br/>
					<span id="numOfconcern">6551</span>
				</div>
				<div class="right">
					<div style="margin-bottom: 4px;">
						<span>热门回答，来自 机械 </span>
						<a href="#">关注话题</a>
						<img src="img/3.png" class="floatRight">
					</div>
					<a style="font-weight: bold;">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
					<p><b>Vincent Fu</b>, Materials Science, PhD</p>
					<img src="img/6.png" class="floatLeft"/>
					<div class="floatLeft" style="line-height:170%; margin-left:15px;width:380px">
						说到精度，就不得不提在材料学中最重要的一个方面：
						表征。要项研究一种材料性能，握在手里把玩时远远不够的，
						就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，
						科学家至少要下到纳米级（放大千倍），如果要获得更深... 
						<a href="#">显示全部</a>
					</div>
					<br />
					<div class="clearLeft"></div>
					<div class="rightBottom">
						<img src="img/7.png"/>
						<span>关注问题</span>
						<img src="img/8.png"/>
						<span>867条评论</span>
						<img src="img/9.png"/>
						<span>作者保留权利</span>
					</div>
				</div>
			</div>
			<div class="clearLeft"></div>
			<div class="bottom">
				
			</div>
		</div>
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-25 交作业

howcn

不知道这样也行不行我所有的父类div都是用height撑起来的不知道为什么子类的div不能扩充父类大小

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.title img{
				padding: 0 5px;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			div.r{
				position: relative;
				left: 0;
				top: 0;
			}
			div.a{
				position: absolute;
				left: 150px;
				top: 0;
			}
			div.hot{
				margin: 0 50px;
				padding: 0 5px;
			}
			.width500{
				width: 500px;
			}
			#img1{
				position: absolute;
				left: 9px;
				z-index: -1;
				border-radius: 5px;
			}
			.table{
				vertical-align: middle;
			}
			a{
				text-decoration: none;
			}
			.word strong{
				margin-left: 20px;
			}
			
		</style>
	</head>

	<body>
		<div>
			<div class="title">
				<img src="img/1.png" class="fl"/>
				<span>最新动态</span>
				<div class="fr">
					<img src="img/2.png"/>
					<span>设置</span>
				</div>
			</div>
			<hr />
			<div>
				<div style="height: 50px;">
					<div class="fr">
						<img src="img/3.png"/>
					</div>
					<div class="fl r">
						<img src="img/4.png" class="fl"/>
						<div class="hot">
							<span>热门回答，来自 机械 <a href="#">热门话题</a></span>
							<div class="width500"><a href="#">人类史上最令人叹为观止的极限精度制造成果有哪些？</a></div>
						</div>
					</div>
				</div>
				<div style="height: 20px;">
					<div class="table">
						<div style="font-size: 12px;position: relative;">
							<span style="position: absolute; top: 2px; left: 5px;color: gray;">6551</span>
							<img src="img/5.png" class="fl" style="z-index: -1;border-radius: 5px;"/></div>
					</div>
					<div style="font-size: 14px;" class="word">
						<Strong>Vincent Fu，</strong>
						<span>Materials Science， PhD</span>
					</div>
				</div>
				<div style="width: 720px; height: 130px">
					<img src="img/6.png" class="fl" style="margin: 0 5px;"/>
					<div style="padding: 0 10px;">
						说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，
						就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下
						到纳米级(放大千倍)，如果要获得更深……<a href="#">显示全部</a>
					</div>
				</div>
				<div style="color: gray;margin: 0 40px">
					<img src="img/7.png"/>
					<span>关注问题</span>
					<img src="img/8.png"/>
					<span>867条评论</span>
					<img src="img/9.png"/>
					<span>作者保留权利</span>
				</div>
			</div>
		</div>

	</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-23 ZZ交作业 CSS-综合性练习1

来载

基本用绝对定位布局，位置大小调到手酸。。

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

<style>
body{
   font-family:宋体;
}
div.total{
   width:700;
}
div.topleft{
   float:left;
   font-weight:bold;
   color:grey;
   font-size:80%;
}
div.topright{
   float:right;
   color:grey;
   font-size:80%;
}
div.content{
   position:absolute;
   top: 35;
   width:700;
   height:250;
   border-top-style:solid;
   border-top-color:lightgrey;
   border-top-width: 1;
   border-bottom-style:solid;
   border-bottom-color:lightgrey;
   border-bottom-width: 1;
}
div.close{
   position: absolute;
   top: 10;
   right:5;
}
div.sculpture{
   position: absolute;
   top: 10;
   width:38;
   height:200;
}
div.number{
   position:absolute;
   top: 50;
   width:38;
   background-image:url(D:/前端部分学习/html/综合性练习1/5.png);
   font-size:80%;
}
div.headline{
   position:absolute;
   top: 10;
   left: 60;
   height:38;
   line-height:150%;
   font-size:80%;
}
a{
   text-decoration: none;
   color:RoyalBlue;
}
div.article{
   position:absolute;
   width:640;
   top: 55;
   left: 60;
   font-size:80%;
}
div.overview{
   position:absolute;
   top: 35;
   left: 210;
   line-height:210%;
}
div.extra{
   position:absolute;
   top: 160;
   color:Grey;
}

</style>

<body>
<div class="total">
<div class="topleft"><img src="file://D:/前端部分学习/html/综合性练习1/1.png"/> 最新动态</div>
<div class="topright"><img src="file://D:/前端部分学习/html/综合性练习1/2.png"/> 设置</div>

<div class="content">
  <div class="close"><img src="file://D:/前端部分学习/html/综合性练习1/3.png"/></div>

  <div class="sculpture">
    <img src="file://D:/前端部分学习/html/综合性练习1/4.png"/>
    <div class="number" style="text-align:center">6551</div>
  </div>

  <div class="headline">
     热门回答，来自 机械 <a href="">关注话题</a></br>
     <a class="topic" href="" style="font-weight:bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
  </div>

  <div class="article">
     <b>Vincent Fu, </b>Materials Science, PhD</br></br>
     <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/6.png"/>
     <div class="overview">
     说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，我在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的显微结构，科学家至少要下到纳米级（放大千倍），如果要获得更深… <a href="">显示全部</a>
     </div>
     <div class="extra">
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/7.png"/> 关注问题 
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/8.png"/> 867条评论 
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/9.png"/> 作者保留权利
     </div>
  </div>
</div>

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-23 ZZ交作业 CSS-综合性练习1

来载

没用float元素，全部用绝对定位布局，位置调到手酸。。

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

<style>
body{
   font-family:宋体;
}
div.total{
   width:700;
}
div.topleft{
   float:left;
   font-weight:bold;
   color:grey;
   font-size:80%;
}
div.topright{
   float:right;
   color:grey;
   font-size:80%;
}
div.content{
   position:absolute;
   top: 35;
   width:700;
   height:250;
   border-top-style:solid;
   border-top-color:lightgrey;
   border-top-width: 1;
   border-bottom-style:solid;
   border-bottom-color:lightgrey;
   border-bottom-width: 1;
}
div.close{
   position: absolute;
   top: 10;
   right:5;
}
div.sculpture{
   position: absolute;
   top: 10;
   width:38;
   height:200;
}
div.number{
   position:absolute;
   top: 50;
   width:38;
   background-image:url(D:/前端部分学习/html/综合性练习1/5.png);
   font-size:80%;
}
div.headline{
   position:absolute;
   top: 10;
   left: 60;
   height:38;
   line-height:150%;
   font-size:80%;
}
a{
   text-decoration: none;
   color:RoyalBlue;
}
div.article{
   position:absolute;
   width:640;
   top: 55;
   left: 60;
   font-size:80%;
}
div.overview{
   position:absolute;
   top: 35;
   left: 210;
   line-height:210%;
}
div.extra{
   position:absolute;
   top: 160;
   color:Grey;
}

</style>

<body>
<div class="total">
<div class="topleft"><img src="file://D:/前端部分学习/html/综合性练习1/1.png"/> 最新动态</div>
<div class="topright"><img src="file://D:/前端部分学习/html/综合性练习1/2.png"/> 设置</div>

<div class="content">
  <div class="close"><img src="file://D:/前端部分学习/html/综合性练习1/3.png"/></div>

  <div class="sculpture">
    <img src="file://D:/前端部分学习/html/综合性练习1/4.png"/>
    <div class="number" style="text-align:center">6551</div>
  </div>

  <div class="headline">
     热门回答，来自 机械 <a href="">关注话题</a></br>
     <a class="topic" href="" style="font-weight:bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
  </div>

  <div class="article">
     <b>Vincent Fu, </b>Materials Science, PhD</br></br>
     <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/6.png"/>
     <div class="overview">
     说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，我在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的显微结构，科学家至少要下到纳米级（放大千倍），如果要获得更深… <a href="">显示全部</a>
     </div>
     <div class="extra">
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/7.png"/> 关注问题 
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/8.png"/> 867条评论 
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/9.png"/> 作者保留权利
     </div>
  </div>
</div>

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-23 ZZ交作业 CSS-综合性练习1

来载

没有用float元素，全部用绝对定位布局，位置调到手酸。。

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

<style>
body{
   font-family:宋体;
}
div.total{
   width:700;
}
div.topleft{
   float:left;
   font-weight:bold;
   color:grey;
   font-size:80%;
}
div.topright{
   float:right;
   color:grey;
   font-size:80%;
}
div.content{
   position:absolute;
   top: 35;
   width:700;
   height:250;
   border-top-style:solid;
   border-top-color:lightgrey;
   border-top-width: 1;
   border-bottom-style:solid;
   border-bottom-color:lightgrey;
   border-bottom-width: 1;
}
div.close{
   position: absolute;
   top: 10;
   right:5;
}
div.sculpture{
   position: absolute;
   top: 10;
   width:38;
   height:200;
}
div.number{
   position:absolute;
   top: 50;
   width:38;
   background-image:url(D:/前端部分学习/html/综合性练习1/5.png);
   font-size:80%;
}
div.headline{
   position:absolute;
   top: 10;
   left: 60;
   height:38;
   line-height:150%;
   font-size:80%;
}
a{
   text-decoration: none
}
a.topic{
   font-weight:bold;
   color:DodgerBlue;
}
div.article{
   position:absolute;
   width:640;
   top: 55;
   left: 60;
   font-size:80%;
}
div.overview{
   position:absolute;
   top: 35;
   left: 210;
   line-height:210%;
}
div.extra{
   position:absolute;
   top: 160;
   color:Grey;
}

</style>

<div class="total">
<div class="topleft"><img src="file://D:/前端部分学习/html/综合性练习1/1.png"/> 最新动态</div>
<div class="topright"><img src="file://D:/前端部分学习/html/综合性练习1/2.png"/> 设置</div>

<div class="content">
  <div class="close"><img src="file://D:/前端部分学习/html/综合性练习1/3.png"/></div>

  <div class="sculpture">
    <img src="file://D:/前端部分学习/html/综合性练习1/4.png"/>
    <div class="number" style="text-align:center">6551</div>
  </div>

  <div class="headline">
     热门回答，来自 机械 <a href="">关注话题</a></br>
     <a class="topic" href="">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
  </div>

  <div class="article">
     <b>Vincent Fu, </b>Materials Science, PhD</br></br>
     <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/6.png"/>
     <div class="overview">
     说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，我在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的显微结构，科学家至少要下到纳米级（放大千倍），如果要获得更深… <a href="" style="color:CornflowerBlue">显示全部</a>
     </div>
     <div class="extra">
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/7.png"/> 关注问题 
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/8.png"/> 867条评论 
       <img class="picture" src="file://D:/前端部分学习/html/综合性练习1/9.png"/> 作者保留权利
     </div>
  </div>
</div>

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-22 。。。。

Wahaha矿泉水

没改字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    a {
        text-decoration: none;
        color: deepskyblue;
    }
    #content {
        width: 600px;
    }
    #top {
        border-bottom: 1px solid gray;
        height: 30px;
    }

    #bottom {
        border-bottom: 1px solid darkgray;
        /*color: darkgray;*/
    }
    .bottom {
        padding:20px 50px;
        font-size: 12px;
        color: darkgray;
    }
    #left {
        float: left;
    }
    #right {
        float: right;
    }
    span {
        color: darkgrey;
    }
    .top {
        margin-top: 10px;
        position: relative;
        font-size: 12px;
    }
    #bottom_top_top {
        margin-left: 10px;
        position: absolute;
        top: 0;
        display: inline-block;
        height: 15px;
        width: 550px;
    }
    #bottom_top_bottom {
        margin-left: 10px;
        position: absolute;
        top: 20px;
        display: inline-block;
        height: 15px;
        width: 550px;
    }
    #bottom_top_top_top_left {
        float: left;
    }
    #bottom_top_top_top_right {
        float: right;
    }
    .middle {
        margin-top: 10px;
        /*height: 30px;*/
    }
    #middle_left {
        float: left;
        background:url("img/5.png");
    }
    #middle_middle {
        margin-top: 20px;
        margin-left: 50px;
        font-size: 13px;
        line-height: 180%;
    }
</style>
<body>
<div id="content">
    <div id="top">
        <div id="left">
            <img src="img/1.png" alt="">
            <span>最新动态</span>
        </div>
        <div id="right">
            <img src="img/2.png" alt="">
            <span>设置</span>
        </div>
    </div>
    <div id="bottom">
        <div class="top">
            <img src="img/4.png" alt="">
            <div id="bottom_top_top">
                <div id="bottom_top_top_top_left">
                    <span>热门回答，来自</span><span style="margin-left: 10px">机械</span>
                    <a href="">关注话题</a>
                </div>
                <div id="bottom_top_top_top_right">
                    <img src="img/3.png" alt="">
                </div>
            </div>
            <div id="bottom_top_bottom">
                <span style="color: cornflowerblue"><b>人类史上令人叹为观止的极限精度制造成果有哪些？</b></span>
            </div>
        </div>
        <div class="middle">
            <div id="middle_left">
                <span>6551</span>
            </div>
            <b style="margin-left: 10px">Vincent Fu,</b> Materials Science, phD
            <div id="middle_middle">
                <img  style="float: left; margin-right: 20px" src="img/6.png" alt="">
                说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一性能，握在手里把玩是远远不够的，
                就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，
                科学家至少要下到纳米级（放大一千倍），如果要获得更深...
                <a href="">显示全部</a>

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

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-15 综合练习1

how2j-fans

div很多挺乱的

<!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>
<link href="css/css1.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div class="d1">
	<div>
	<span class="left1"><img src="images/1.png"/></span><b class="b1">最新动态</b><span class="right1"><img src="images/2.png"/></span>
	</div><hr />
	<div class="d3">
       	  <span class="left1"><img src="images/4.png" /></span>
          <span class="s1">热门回答，来自 机械 <a href="" class="a1">关注话题</a></span>
          <span class="right1"><img src="images/3.png" /></span>
          <div class="d5">人类历史上有哪些叹为观止的极限精度制造成果有哪些？</div>
          <div class="d4">6645</div>
          <div class="d6"><b>Vincent Fu</b>, Materials Science, PhD</div>
          <div class="d7"><img src="images/6.png" /></div>
          <div class="d8">说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大一千倍），如果要获得更深...<a href="" class="a1">查看全文</a></div>
          <div class="d9">
          <img src="images/7.png" /> 关注问题 <img src="images/8.png" /> 867条评论 <img src="images/9.png" /> 作者保留权利
          </div>
    </div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
/* border:#000 1px solid; */
.d1{
	width:600px;
	height:500px;
	position:relative;
	/*border:#000 1px solid;*/
}
.d3{
	width:100%;
	top:20px;
	position:absolute;
	height:240px;
	/*border:#90C 1px solid;*/
	padding-top:20px;
}
.d4{
	float:left;
	margin-top:5px;
	background-color:lightblue;
	/*border:#000 1px solid;*/
}
.d5{
	/*border:#000 1px solid;*/
	margin-left:45px;
	margin-top:5px;
	font-family:"微软雅黑";
	color:lightskyblue;
}
.d6{
	margin-left:45px;
	margin-top:5px;
	/*border:#000 1px solid;*/
}
.d7{
	width:210px;
	padding-left:45px;
	margin-top:5px;
	/*border:#F3C 1px solid;*/
	float:left;
}
.d8{
	/*border:#000 1px solid;*/
	margin-top:5px;
}
.d9{
	/*border:#000 1px solid;*/
	margin-top:5px;
	margin-left:45px;
	font-family:"新宋体";
	font-size:12px;
	color:#CCC;
}
.left1{
	/*border:#000 1px solid;*/
	padding-top:2px;
	float:left;
}
.right1{
	padding-top:2px;
	padding-right:2px;
	float:right;
}
.b1{
	padding-left:20px;
}
.s1{
	/*border:#000 1px solid;*/
	margin-left:5px;
}

.a1{
	text-decoration: none;
}

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-06-08 写作业

zyp124

熟悉了就不难

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<html lang="en">
<head>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
    <title></title>
</head>
<br>
    <p class="div">
   <img src="1.png"> <span></span><span></span><span id="word">最新动态</span>
    </p>

    <p class="div2">
        <img src="2.png"> <span></span><span></span><span id="word2">设置</span>
    </p>

    <div class="div3"></div>
    <div style="width: 100% " >
    <img  src="4.png" class="div"><img src="3.png" class="div2">
        <br class="div4"> 热门回答，来自 机械 <span style="color:#396b9b">关注话题</span>
        </br><div id="word3">人类史上令人叹为观止的极限精度制造成果有哪些？</div> </p>  </p>

    </div>
    <div >

        <span class="border">6551</span><span></span><span id="word4">Vincent Fu，</span><span> Materials Science, PhD</span>
    </div>

    <div>
        <img src="6.png" class="div4"><span>说到精度，就不得不提在材料学中最重要的一个方面：表征。要<br/>
        想研究一性能，握在手里把玩是远远不够的，就算你拿出<br/>放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓
        <br/>一种材料的纤维结构，科学家至少要下到纳米级（放大一千倍），<br/>如果要获得更深...</span><span style="color:#396b9b">显示全部</span>
    </div>
</br>
    <div class="div6">
        <img src="7.png" >&nbsp;<span class="word5">关注问题</span>&nbsp;&nbsp;<img src="8.png">&nbsp;<span class="word5">867条评论</span>&nbsp;&nbsp;<img src="9.png">&nbsp;<span class="word5">作者保留权限</span>
    </div>
<div class="div3"></div>

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-06-04 交作业

oolovecheng

交作业。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .center {
        margin: 0 200px;
    }

    .line {
        border-top-style: solid;
        border-top-color: lightgray;
        border-top-width: 0.5px;
    }

    .name {
        text-align: center;
        background-color: lightblue;
        width: 80%;
        font-size: 8px;
        margin: 0 auto;
    }

    #center {
        margin-top: 10px;
    }

    .main {
        padding-left: 50px;
        font-size: 15px;
        line-height:150%;
    }
</style>
<body>
<div style="width: 700px">
    <div id="top">
        <div class="left">
            <img src="1.png">
            <strong>最新动态</strong>
        </div>
        <div class="right">
            <img src="2.png">
            设置
        </div>
        <div class="center">&nbsp;</div>
        <br/>
        <div class="line"></div>
    </div>
    <div id="center">
        <div class="left">
            <img src="4.png">
            <div class="name">6551</div>
        </div>
        <div>
            <div class="main">
                热门回答，来自 机械 <span style="color:#396b9b">关注话题</span>
                <br/>
                <span style="color: #336698;font-weight:bold;font-family:仿宋;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
                <br/><br/>
                <strong>Vincent Fu</strong>, Materials science, Phd
                <br/><br/>
                <img src="6.png" style="float:left;">
                <div style="margin-left: 220px">
                    说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深。。。<span style="color:#396b9b">显示全部</span>
                </div>
                    <div style="margin-top: 25px;font-size: 13px;color: lightgray;">
                    <img src="7.png"> 关注问题
                    <img src="8.png"> 867条评论
                    <img src="9.png"> 作者保留权利
                </div>
                <hr/>
            </div>

        </div>
    </div>
</div>

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-05-29 提交作业，有点粗糙，还是交了吧

pigman

还是需要多加练习

<style>
    .mydiv {
        width: 900px;
        height: 350px;
        margin: 100 auto;
    }
    
    .header {
        width: 100%;
        height: 15%;
        /* border: 1px solid green; */
    }
    
    .side {
        float: left;
        width: 20%;
        height: 85%;
        /* border: 1px solid red; */
        padding-top: 10px;
    }
    
    .content {
        width: 100%;    
        height: 100%;
        /* border: 1px solid blue; */
    }
    
    .settings {
        float: right;
        margin-left: 10px;
    }
    
    .touxiang {
        display: block;
        width: 50px;
        width: 50px;
        margin: 0 auto;
    }
    
    .id {
        background-color: gray;
        margin: 20 auto;
        text-align: center;
        width: 60px;
    }
    
    .topic {
        text-decoration: none;
    }
    
    .introductPic {
        float: left;
    }
    
    .clearrp {
        clear: left;
    }
    
    .about {
        /* border: 1px solid red; */
        width: 100%;
        text-align: left;
        margin-top: 10px;
    }
    
    .footer {
        width: 100%;
        height: 5%;
    }
</style>
<html>
<div class="mydiv">
    <div class="header">
        <img src="1.png" />
        <span>最新动态</span>
        <span class="settings">设置</span>
        <img src="2.png" class="settings" />
        <hr>
    </div>

    <div class="side">
        <img src="4.png" class="touxiang" />
        <div class="id">6551</div>
    </div>
    <div class="content">
        <div>热门回答，来自 机械 <a href="www.baidu.com" class="topic">关注话题</a></div>
        <div style="color:blue">人类史上令人叹为观止的极限精度制造成果有哪些?</div>
        <div>Vincent Fu, Materials Science, PhD</div>
        <div>
            <img src="6.png" class="introductPic" />
            <div style="margin:20px;">
                范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的 范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的范德萨家里看风景的...
                <a href="www.baidu.com" class="topic">显示全部</a>
            </div>


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

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-05-27 交作业

Cuidabu

历时1h,感觉做的太简单暴力了！

<style type="text/css">
.nav{
	width: 600px;
	font-size: 13px;
}
.left{
	float:left;
	width:70px;
	height:230px;
}
.right{
	width: 530px;
	display: inline;
	line-height: 22px;
}
</style>
</head>

<body>
<div class="nav">
<span style=" font-weight:bold; color:rgba(51,102,51,1)"><img src="../../素材/img/1.png" />&nbsp;&nbsp;&nbsp;&nbsp;最新动态</span>
<span style="float:right"><img src="../../素材/img/2.png" />&nbsp;&nbsp;设置</span><hr />
<div class="left">
       <img src="../../素材/img/4.png" /><br />
       <p style="background-image:url(../../%E7%B4%A0%E6%9D%90/img/5.png); width:40px; height:20px; display:block; text-align:center">6551</p>
 </div>
 <div class="right">
  热门回答，&nbsp;来自&nbsp;&nbsp;&nbsp;机械&nbsp;&nbsp;<a href="" style="text-decoration:none">关注话题</a>
  <img src="../../素材/img/3.png" style="float:right; margin-top:5px" /><br />
  <span style="font-weight:bold; color:rgba(51,51,153,1)">人类史上令人叹为观止的极限精度制作成果有哪些？</span><br />
  <span style="font-weight:bold">Vincent Fu,</span>&nbsp;&nbsp;Materials science,&nbsp;&nbsp;PHD<br />
  <img src="../../素材/img/6.png" style="float:left; margin-right:10px; margin-top:5px" />
 说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大一千倍），如果要获得更深...<a href="" style=" text-decoration:none">显示全部</a><br />
     <p style="color:rgba(153,153,153,1)">
        <img src="../../素材/img/7.png" />关注问题&nbsp;&nbsp;<img src="../../素材/img/8.png" />&nbsp;&nbsp;867条评论&nbsp;<img src="../../素材/img/9.png" />&nbsp;作者保留权利
     </p>  
  </div>
  <hr />
</div>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-05-27 交作业

Cuidabu

历时1h，感觉太简单暴力了！

<style type="text/css">
.nav{
	width: 600px;
	font-size: 13px;
}
.left{
	float:left;
	width:70px;
	height:230px;
}
.right{
	width: 530px;
	display: inline;
	line-height: 22px;
}
</style>
</head>

<body>
<div class="nav">
   <span style=" font-weight:bold; color:rgba(51,102,51,1)"><img src="../../素材/img/1.png" />&nbsp;&nbsp;&nbsp;&nbsp;最新动态
  </span>
   <span style="float:right"><img src="../../素材/img/2.png" />&nbsp;&nbsp;设置</span><hr />
  <div class="left">
       <img src="../../素材/img/4.png" /><br />
       <p style="background-image:url(../../%E7%B4%A0%E6%9D%90/img/5.png); width:40px; height:20px; display:block; text-align:center">6551</p>
   </div>
   <div class="right">
  热门回答，&nbsp;来自&nbsp;&nbsp;&nbsp;机械&nbsp;&nbsp;<a href="" style="text-decoration:none">关注话题</a>
  <img src="../../素材/img/3.png" style="float:right; margin-top:5px" /><br />
  <span style="font-weight:bold; color:rgba(51,51,153,1)">人类史上令人叹为观止的极限精度制作成果有哪些？</span><br />
  <span style="font-weight:bold">Vincent Fu,</span>&nbsp;&nbsp;Materials science,&nbsp;&nbsp;PHD<br />
        <img src="../../素材/img/6.png" style="float:left; margin-right:10px; margin-top:5px" />
        说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大一千倍），如果要获得更深...<a href="" style=" text-decoration:none">显示全部</a><br />
     <p style="color:rgba(153,153,153,1)">
        <img src="../../素材/img/7.png" />关注问题&nbsp;&nbsp;<img src="../../素材/img/8.png" />&nbsp;&nbsp;867条评论&nbsp;<img src="../../素材/img/9.png" />&nbsp;作者保留权利
     </p>  
  </div>
  <hr />
</div>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-04-23 来交一次作业

1775833215

哈哈感觉界面全是拼出来的如果有什么写的不对的地方请老师和各位前辈指正下！谢谢！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
table{
	width:100%;
}
div.line{
	width=100%;
	border-top:2px blue solid;
}
div.left{
	width:5%;
	float:left;
	height:20px;
	background:darkgray;
}
div.space{
	float:left;
	width:5%;
	height:200px;
}
p.space{
	color:gray;
	whit-space:pre;
}
div.left1{float:left;}
div.right{width:100%;border-top:2px blue solid;)
a{text-decoration:none;}
</style>
<body>
<table>
<tr>
<td width="5%"><img src="1.png"></img></td>
<td width="80%">最新动态</td>
<td width="5%"><img src="2.png"></td>
<td width="10%">设置</td>
</tr>
</table>
<div class="line">
</div>
<table>
<tr>
<td rowspan="2" width="5%"><img src="4.png"></td>
<td><p class="space"> 热门回答，来自 机械 <a href="nowhere">关注话题</a></p></td>
<td width="5%"><img src="3.png"></td>
</tr>
<td><a href="nowhere">人类史上令人叹为观止的极限精度制造成果有哪些？</a></td>
<tr>
</tr>
</table>
<div class="left">6551
</div>
<div><b>Vincent Fu,</b>Materials science,PHD
</div>
<div class="space"></div>
<div class="left1"> <img src="6.png"></div>
<p>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料的性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大一千倍），如果要获得更深...<a href="nowhere">显示全部</a></p>
<table>
<tr>
<td width="5%"></td><td><img src="7.png"></td><td>关注问题</td><td><img src="8.png"></td><td>887条评论</td><td><img src="9.png"></td><td>作者保留权利</td>
</tr></table>
<div class="right"></div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-04-21 提问

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 第一次交作业，好紧张

zhuifeiji

第一次交作业，好紧张

<style media="screen">
div.page{
  width:700px;
  margin-left:20px;
}

  div.head{
    border-bottom-style:solid;
    border-bottom-color:lightgray;
    border-bottom-width:1px;
    color:lightgray;
    margin-bottom:10px;
  }

  #right{
    float:right;
  }

  div.middle{
    border:1px black solid;
  }

 .floatl{
    float :left;
  }
#bgi{
   background-image:url(css/img/5.png);
}
.leftdiv{
  width:40px;
  float:left;
  margin-right:10px;
  height:230px;
}

.ib{
  display:inline-block;
}
.marginleft{
  margin-right:10px;
  float:left;
}
.right{
  float:right;
}
.under{
  border-bottom-style:solid;
  border-bottom-color:lightgray;
  border-bottom-width:1px;
  padding-bottom:20px;
  color:lightgray;
  font-size:12px;
}

</style>
<div class="page">
<div class="head">
  <img src="css/img/1.png" alt="">
  <span>最新动态</span>
  <span id="right"><img src="css/img/2.png" alt="">设置</span>
</div>
  <div class="leftdiv">
    <img src="css/img/4.png" alt="">
    <p id="bgi">6551</p>
  </div>
  <div class="rightdiv">
    <span>热门回答，来自  机械 <a>关注话题</a></span><br>
    <span>人类史上令人叹为观止的极限精度制造成果有哪些？</span><br><br>
    <span>Vincent Fu, Materials Science, PhD</span><br>
  </div>
  <div class="">
    <img src="css/img/6.png" alt="" class="marginleft">
    <p class="text">说到精度，就不得不在材料学中最重要的一个方面：表征。要想研究一种材料性能，我在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级别(放大千倍),如果要获得更深...<a href="#">显示更多</a></p>
  </div >
    <div class="under">
      <img src="css/img/7.png" alt=""><span>关注问题</span>
      <img src="css/img/8.png" alt=""><span>867条评论</span>
      <img src="css/img/9.png" alt=""><span>作者保留权利</span>
    </div>
</div>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-02-28 建的CSS写的基本上全是用的相对定位布局不知道怎么写将就把

tanhai

交作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body> 
			<span class="q"><img src="img/1.png" /> 最新动态</span>
			<span class="q"><img src="img/2.png"/> 设置</span>
			<div class="id"></div><br/>
			<div class="qiao">
				<img class="png" src="img/4.png"/>
			</div>
			<div class="wenzi">热门回答，来自&nbsp;机械&nbsp;<font size="4px" color="#B2D1FF">关注话题</font><img style="float: right;" src="img/3.png" /><br />
				<font color="blue" >
					<strong>人类史上令人叹为观止的极限精度制造成果有哪些？</strong>
				</font>	
			</div>
			<div class="fuck">6551</div>
			<span class="maderfuck"><strong>Vincent&nbsp; Fu, </strong>Materials Science, PhD</span>
			<div class="w"><img src="img/6.png"></div>
			<div class="e">
			说到精度，就不得不提在材料学中最重要的一个方面：表征。要<br />
			想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出<br />
			放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓<br />
			一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），<br />
			如果要获得更深...<font style="color: blue;"size="5"><a class="r" href="#">显示全部</a></font>
			</div>
			<div class="t"><img src="img/7.png"/> 关注问题 <img src="img/8.png"/> 886条评论 <img src="img/9.png"/> 作者保留权力 </div>
			<div class="y"></div>
	</body>
</html>
/*这是用CSS写的样式*/
.q{display: inline-block; color: #808080;font-weight: bold; width: 800px;}
.id{border: solid 0.5px #808080 ; width: 855px; position: relative; top: 10px; left: 0px; }
.qiao{display: table-cell; vertical-align: middle; height: 20px;}
.png{float: left;height: 55px; width: 50px; margin-right: 20px;}
.wenzi{position: absolute; left: 80px; top: 50px; right: 1060px;}
.fuck{background-image: url(../img/5.png); width: 40px;height: 30px; position: absolute; left: 12.5px; top: 115px;}
.maderfuck{position: absolute; left: 100px;top: 115px;}
.w{position: absolute;left: 100px; top: 150px;}
.e{position: absolute;left: 310px; top: 150px;}
.r{text-decoration: none;}
.t{position: absolute;left: 100px; top: 280px; color: #808080;}
.y{position: relative;left: 0px; top: 230px; border: solid 0.5px #808080; width: 855px;}

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-02-25 我知道知乎这个剑桥材料学博士。。。

2019-02-18 交作业啦

Antares

嘻嘻终于做完了 css之前就看完了然后看到作业很难就一直拖着没有做这两天抽时间做完了发现也没有很难主要一开始要想好大概要怎么做做的时候按着思路就可以了我做的时候没遇到什么困难就是一些知识点不太记得要去找一下(*/ω＼*)怎么说做出来感觉还行挺有成就感挺开心的哈哈对了我没怎么用到css诶。。。

<html>
  <head>
    <style>
      div.setting{float:right;}
      hr{border:lightgray 1px solid;}
      img.delete{float:right;}
      p.num{background-image:url(5.png);}
      td{border:5px solid transparent;}
    </style>
  </head>
  <body>
    <img src="1.png" />&nbsp;
    <strong>最新动态</strong>
    <div class="setting"><img src="2.png" />&nbsp;<span>设置</span></div>
    <hr/>
    <table width="100%">
      <tr>
        <td rowspan="4" valign="top"><img src="4.png" /><p class="num">6551</p></td>
        <td colspan="2">
          热门回答，来自&nbsp;机械&nbsp;<font color="blue">关注话题</font><img src="3.png" class="delete"/>
          <br/><strong><font color="darkblue">人类史上令人叹为观止的极限精度制造成果有哪些？</font></strong>
        </td>
      </tr>
      <tr>
        <td colspan="2"><strong>Vincent Fu,</strong>&nbsp;Materials Science,&nbsp;PhD</td>
      </tr>
      <tr valign="top">
        <td><img src="6.png"/></td>
        <td>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...&nbsp;<font color="blue">显示全部</font></td>
      </tr>
      <tr>
        <td colspan="2">
          <img src="7.png"/>&nbsp;<font color="gray">关注问题</font>&nbsp;
          <img src="8.png"/>&nbsp;<font color="gray">867条评论</font>&nbsp;
          <img src="9.png"/>&nbsp;<font color="gray">作者保留权利</font>
        </td>
      </tr>
    </table>
    <hr/>
  </body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-01-24 大概也就这个意思调着太麻烦这也不对那也不对

超越所有人

调像素类然后框框弄大了改前端花时间。。。

<template>
<div>
<div class="aa">
  <div class="cc">
    <img src="/static/1.png">
    最新动态
    <div class="bb">
      <img src="/static/2.png">
      设置
    </div>
  </div>
    <div>
      <div>
        <div class="dd"><img src="/static/4.png"></div>
        <div class="ccc"><span>热门回答,</span>
        <span>来自</span>
        <span>机械</span>
        <span><a href="http://www.baidu.com">关注话题</a>
          </span><br>
          <div class="xx">人类史上令人叹为观止的极限精度制造成果有哪些?</div>
          </div>
          <div class="cc1"><img src="/static/3.png"></div>
      </div>
    </div>
          <div class="x1">
            <span class="x2">Vincent</span>
            <span class="x2">Fu,</span>
            <span>Materials</span>
            <span>Science,</span>
            <span>PhD</span>
          </div>
          <div class="x3">
            <img src="/static/6.png">
            </div>
            <div class="xx4">
              <span>说到精度，</span>
              <span>就不得不提在材料学中最重要的一个方面：</span>
              <span>表征。</span>
              <span>要项研究一种材料性能，</span>
              <span>握在手里把玩时远远不够的，</span>
              <span>就算你拿出放大镜离近了看，</span>
              <span>也只能看到表面的一些坑坑洼洼</span>
              <span>而为了知晓一种材料的纤维结构，</span>
              <span>科学家至少要下到纳米级（放大千倍），</span>
              <span>如果要获得更深...</span>
              <a href="http://www.baidu.com">显示全部</a>
            </div>
            <div class="mm1">
             <img src="/static/7.png">&nbsp;<span>关注问题</span>
             <img src="/static/8.png">&nbsp;<span>867条评论</span>
             <img src="/static/9.png">&nbsp;<span>作者保留权力</span>
            </div>
            <div class="mm2"></div>
</div>
</div>
</template>

<script>
/* eslint-disable */
export default {
  data () {
    return {
  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div.aa{
  border: 1px solid blue;
  width: 800px;
  height: 350px;
}
div.bb{
  float:right;
}
div.cc{
  padding-bottom: 10px;
  border: 1px solid silver
}
.dd{
  position:absolute;
  padding: 10px;
  border: 1px solid red;
  width: 40px;
  height: 200px;
}
.ccc{
  position: relative;
  float: left;
  border: 1px solid yellow;
  margin-left: 70px;
}
.cc1{
  float:right;
}
.xx{
  padding-bottom: 20px;
  color: rgb(137, 135, 235);
  font-weight: bold;
}
.x1{
  position: absolute;
  width: 720px;
  height: 156px;
  border: 1px solid greenyellow;
  left: 80px;
  top: 160px;
}
.x2{
  font-weight: bold;
}
.x3{
  position: absolute;
  border: 1px solid #000;
  top: 200px;
  left: 80px;
  width: 200px;
  height: 112px;
}
.xx4{
  position: absolute;
  border: 1px solid blueviolet;
  top: 200px;
  width: 510px;
  left: 290px;
  height: 115px;
}
.mm1{
  color: silver;
  position: absolute;
  border: 1px solid black;
  top: 340px;
  left: 80px;
  width: 500px;
  height: 20px;
  float: right;
}
.mm2{
  text-decoration: line-through;
  position: relative;
  top: 290px;
  border: 1px solid silver;
  left: 50px;
  width: 750px;
}
</style>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-12-24 交作业

BeanGo

第一次交作业，请多指教

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合练习1</title>
	<style >
		.top{
			width: 20px;
			float: left;
			margin-top: 10px
		}
		.line{
			border-bottom-color: gray;
			border-bottom-style: solid;
			border-bottom-width: 1px; 
		}
		#toppic{
			display: table-cell;
			vertical-align: middle;
			height: 50px;
			width: 800px;
		}
		.right{
			width: 20px;
			float: right;
		}
		.box{
			height: 250px;
			width: 800px;
			border-bottom-color: gray;
			border-bottom-style: solid;
			border-bottom-width: 1px;   
		}
		.relativepostion{
			position: relative;
			left: 30px;
			top: 10px;
			width: 770px;
		}
		#font{
			font-size: 15px;
			color: grey;

		}
		#link{ 
			color: blue;

		}
		div:link{
			color: blue

		}
		a.nounderline{
			text-decoration: none;
		}
		.po{
			position: absolute;
			left: 0px
			top:0px;
			margin-left: 3px
		}
		.relative2{
			position: relative;
			left: 0px;
			top: 0px; 
			margin-top: 5px
		}
		#font2{
			font-size: 15px;
			color: black;

		}
		.fmainpics{
			float: left;
			margin-right: 5px;
		}

		
		.bottomwpics{
			margin-left: 15px;
			margin-top: 25px;
			 
		}
		.bottomwords{
			color: lightgrey;
			margin-top: 25px;
			margin-left: 5px; 
		}
		div.bottom{
			height:70px;
			margin-top:30px;
			margin-left:30px;
		}
		.topspace{
			margin-top: 5px;
		}
		.leftspace{
			margin-left: 5px;
		}
	</style>
	
	<div id="toppic" class="line">
		<span><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/1.png"></span>
		<span class="leftspace">最新动态</span>
        <span class="right"><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/2.png"></span>
	</div>
	<div class="box">
		<div class="top" ><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/4.png">
			<div class="relative2">
				<div id="font" class="po">6551</div>
				<img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/5.png">
			</div>
		</div>
        <div id="font" class="relativepostion" >
        	<span>热门回答，来自</span><span id="font" class="leftspace">机械</span>
			<a id="link" class="nounderline" href="http://www.baidu.com" class="leftspace">关注话题</a>
			<span class="right"><img src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/3.png"></span>
				<div ><a id="link" class="nounderline" href="http://www.baidu.com">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
				</div>
				<div id="font" class="topspace" ">
				<strong id="font2">Vincent Fu,</strong> Material Science, PhD
				</div>
				<div ><img class="fmainpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/6.png"><p> 说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩时远远不够，就算你拿出放大镜离近了看，也只能看到表明的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深…<a id="link" class="nounderline" href="http://www.baidu.com">显示全部</a></p>			
				</div>
		</div>

		<div class="bottom">
			<img class="bottomwpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/7.png"><span class="bottomwords">关注问题</span><img class="bottomwpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/8.png"><span class="bottomwords">867条评论</span><img class="bottomwpics" src="/Users/wuyuke/Documents/前端学习/CSS综合练习-1/img/9.png"><span class="bottomwords">作者保留权利</span>
		</div>
	</div>	
</head>
<body>
	
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-12-13 作业

asd32123

做了好久还是跟答案的做的不一样，看了一眼答案差距还真是挺大的。。。。

<html>
  <head>
    <title>A.html</title>
	<meta charset="UTF-8">
	<style>
		.div2{
		width:530px;
		}
		.img1{
			float:right;
		}
		/* 下划线 */
		.div{
			border-bottom:1px solid gray;
		}
		span{
			display:inline-block;
		}
		.div1{
			margin-top:10px;
		}
		.c{
			margin-left:10px;
		}
		.background-image{
			background-image:url(img1/5.png);
			background-repeat:no-repeat;
		}
	</style>
  </head>
  	
  <body>
  <div class="div2">
  	<img alt="" src="img1/1.png">&nbsp
  	<span style="color:gray;font-weight:bold;font-size:77%">最新动态</span>
  	<span class="img1" style="font-size:77%">设置</span>
  	<img class="img1" style="margin-right:5px"src="img1/2.png">
  </div>
  <div class="div div2"style="margin-top:5px"></div>
  <div class="div1 div2"> 
	  <table>
	  	<tr>
	  		<td><img  src="img1/4.png"></td>
	  		<td width="100%">
	  			<span class="c" style="padding-bottom:0px;color:gray;font-size:65%;font-family: 宋体">热门回答，来自 机械 <span style="color:#6495ED"> 关注话题</span></span>
	  			<img class="img1"src="img1/3.png"><br>
	  			<span class="c" style="padding-top:4px;font-size:70%;font-weight:bold;color:#008080;vertical-align:top;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
	  		</td>
	  	</tr>
	  	<tr>
	  		<td class="background-image" style="font-size:65%;text-align:center;color:gray">6551</td>
	  		<td >
	  			<div  style="margin-left:10px;font-size:65%;font-family:宋体"><span style="font-weight:bold">Vincent Fu</span>,Marwerials Serience,PhD</div>
	  		</td>
	  	</tr>
	  	<tr>
	  		<td></td>
	  		<td>
	  		<div class="c" ><img style="float:left" src="img1/6.png"></div>
	  			<div style="margin-left:220px;font-size:65%;letter-spacing:1px;line-height:180%;font-family:宋体">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<span style="color:#6495ED">&nbsp显示全部</span></div>
	  			</td>
	  	</tr>
	  	<tr style="margin-top:10px">
	  		<td></td>
	  		<td style="font-size:65%;font-family:宋体;color:gray"><div style="margin-left:10px"><img src="img1/7.png">&nbsp关注问题&nbsp<img src="img1/8.png">&nbsp867条评论&nbsp<img src="img1/9.png">&nbsp作者保留权力</div></td>
	  	</tr>
	  </table>
  	
  </div>
  <div class="div2 div" style="margin-top:10px"></div>
  </body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-12-04 交作业

淅淅细雨

代码有点粗糙

<html>
<style>
#s1{
font-family:宋体;
font-size:15px;
font-weight:bold;
margin-left:10px;
}

#s2{
font-family:宋体;
margin-left:455px;
}

#s3{
margin-left:10px;
font-family:宋体;
font-size:14px;
}

#s4{
position:absolute;
left:8px;
top:100px;
z-index:1;
}

#s5{
margin-left:10px;
font-family:宋体;
font-size:14px;
}

.s{
font-size:12px;
font-family:宋体;
font-weight:bold;
color:lightgray;
}
hr{
width:600px;
margin-left:0px;
border:0.8px solid lightgray;
background-color:lightgray;
}

a{
text-decoration:none;
}

#a2{
margin-left:10px;
}

.i3{
margin-left:340px;
}

.float{
float:left;
}

.i6{
float:left;
margin-left:50px;
}

#d1{
font-size:14px;
}

.i7{
margin-left:50px;
}

#d2{
font-size:15px;
font-family:宋体;
font-weight:bold;
width:600px;
position:relative;
left:10px;
}

</style>
<img src="./png/1.png"> 
<span id="s1">最新动态</span>
<span id="s2">
<img src="./png/2.png"> 
设置
</span>
<br>
<hr/>
<img src="./png/4.png" class="float"> 
<div d="d1">
<span id="s3">
热门回答，来自  机械 
<a href="www.baidu.com">关注话题</a>
<img  class="i3" src="./png/3.png"><br>
 <a href="www.baidu.com" id="a2">
<strong>人类史上令人叹为观止的极限精度制造成果有哪些？</strong>
</a>
</span><br>
</div><br>

<img class="float" src="./png/5.png">
<span id="s4">6551</span>

<span id="s5">
<strong>vincent Fu,</strong>
Materials Science,PhD
</span>

<br><br>
<img class="i6" src="./png/6.png">
<div id="d2">
说到精度，就不得不提在材料中最重要的一个方面：表征。要想研究
一种材料性能，握在手里把玩时是远远不够的，就算你拿出放大镜
离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，
科学家，至少要下到纳米级（放大千倍），如果要获得更深...<a href="www.baidu.com">显示全部</a>
</div><br>
<img class="i7" src="./png/7.png">
<span class="s">关注问题</span>
<img src="./png/8.png">
<span class="s">867条评论</span>
<img src="./png/9.png">
<span class="s">作者保留权利</span><br><br>
<hr/>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-28 感觉CSS代码太乱了，而且取class名很头痛

布小茨

写了3遍，终于有点样子了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .page {
            width: 600px;
            color: rgb(102, 102, 102);
            margin: 100px auto;
            font-size: 12px
        }

        /*上面开始*/
        .page .top {
            height: 30px;
            border-bottom: 1px solid darkgray;
            margin-bottom: 10px;
        }
        
        .top .new {
            float: left;
        }

        .top .new span {
            margin-left: 10px;
            font-weight: bold;
        }

        .top .set {
            float: right;
        }
        /*上面结束*/

        .below {
            height: 240px;
            border-bottom: 1px solid lightgray;
        }

        /*下面开始*/
        .below .squirrel {
            float: left;
            margin-top: 4px;
        }

        .squirrel .number {
            width: 38px;
            line-heig: 24px;
            margin-top: 5px;
            background-color: rgb(239, 246, 250);
            text-align: center;

        }

        .below .text {
            float: right;
            width: 550px;
        }

        .text .answer {
            float: left;
        }

        span {
            color: rgb(51, 102, 153);
        }

        .text .close {
            float: right;
        }

        .text .result {
            color: rgb(51, 102, 153);
            font-weight: bold;
            margin-bottom: 8px;
            margin-top: 5px;
        }

        .text .author {
            color: rgb(51, 51, 51);
            margin-bottom: 10px;
        }
        .text .author span{
            color: rgb(51, 51, 51);
            font-weight: bold;
        }
        
        .text .picture {
            float: left;
        }

        .text .explain {
            width: 338px;
            margin-right: 2px;
            float: right;
            line-height: 22px;
        }

        .text .review {
            color:rgb(169, 169, 169);
            margin-top: 20px;
        }

        /*下面结束*/

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="page">

        <div class="top">

            <div class="new">

                <img src="answer/1.png" height="14" width="16"/>

                <span>最新动态</span>

            </div>

            <div class="set">

                <img src="answer/2.png" height="13" width="13"/>

                设置

            </div>

        </div>

        <div class="clear"></div>

        <div class="below">

            <div class="squirrel">

                <img src="answer/4.png" height="38" width="38"/>

                <div class="number">6551</div>

            </div>

            <div class="text">

                <div class="answer">

                    热门回答，来自 机械

                    <span>关注话题</span>

                </div>

                <div class="close">

                    <img src="answer/3.png" height="8" width="8"/>

                </div>

                <div class="clear"></div>

                <div class="result">人类史上令人叹为观止的极限精度制造成果有哪些？</div>

                <div class="author">

                    <span>Vincent Fu,</span>

                    Materials Science, PhD

                </div>

                <div class="picture">

                    <img src="answer/6.png" height="112" width="200"/>

                </div>

                <div class="explain">

                    说道精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...

                    <span>显示全部</span>

                </div>

                <div class="clear"></div>

                <div class="review">

                    <img src="answer/7.png" height="8" width="8"/>

                    关注问题

                    <img src="answer/8.png" height="10" width="9"/>

                    867条评论

                    <img src="answer/9.png" height="13" width="12"/>

                    作者保留权利

                </div>

            </div>

        </div>

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

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-26 交作业！

安澜若水

交作业

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>demo08</title>
		<style>
			body {
				font-family: "微软雅黑";
				font-size: 15px;
				line-height: 25px;
				width: 700px;
			}
			
			.border-bottom {
				border-bottom-style: solid;
				border-bottom-color: lightgray;
				border-bottom-width: 2px;
			}
			#bottom{
				margin-top: 18px;
				margin-left: 70px;
			}
			.bold {
				font-weight: bold;
			}
			
			.floatleft {
				float: left;
			}
			
			.floatrigth {
				float: right;
			}
			
			.blue {
				color: #336699;
			}
			
			a {
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div id="top" class="border-bottom">
			<img src="demo08img/1.png" />
			<span class="bold">最新动态</span>
			<img class="floatrigth" src="demo08img/2.png" />
			<span class="floatrigth">设置</span>
		</div>

		<div id="left" class="floatleft" style="margin: 15px;">
			<img src="demo08img/4.png" /><br />
			<span style="background-image: url(demo08img/5.png);">6551</span>
		</div>
		<div id="rigth" style="margin-top: 15px;">
			<span>热门回答，来自 机械 </span>
			<a href="#" class="blue">关注话题</a><br />
			<span class="blue">人类史上令人叹为观止的极限精度制造成果有哪些？</span><br />
			<span class="bold">Vincent Fu</span><span>, Materials Science, PhD</span>
			<br />
			<img src="demo08img/6.png"  class="floatleft" style="margin-right:15px ;margin-top: 10px;" />
			说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... 
			<a href="#rigth">显示全部</a>
			
		</div>
		<div id="bottom">
			<img src="demo08img/7.png"  />
			<span>关注问题   </span>
			<img src="demo08img/8.png"  />
			<span>867条评论   </span>
			<img src="demo08img/9.png"  />
			<span>作者保留权利</span>
		</div>
		<div class="border-bottom">
			<br />
		</div>
	</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-20 为什么和答案差不多，但是确实这样的结果？

尹伟成

为什么图中这块没有正确浮动啊？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>zhihu</title>
  </head>
  <style>
    body {
      font-family: "宋体";
      font-size: 13px;
      color: #666666;
      width: 634px;
    }
    .top {
      border-bottom-style: solid;
      border-bottom-color: rgb(192, 186, 186);
      border-bottom-width: 1px;
      padding-bottom: 15px;
      margin-bottom: 20px;
    }
    .floatright {
      float: right;
    }
    .floatleft {
      float: left;
    }
    a {
      text-decoration: none;
      color: #336699;
    }
    .blod {
      font-weight: bold;
    }
    .text {
      color: #333;
    }
    div.clearLeft {
    clear: left;
  }
  </style>
  <body>
    <div class="top">
      <img src="image/1.png" /> 
      <span style="margin-left:5px">最新动态</span>
      <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="padding: 5px;background-image:url(image/5.png)">6551</span>
    </div>

    <div id="right" class="floatleft">
      <div style="margin-bottom:5px">
        <span>热门回答， 来自 机械</span> 
        <a href="#">关注话题</a>
        <img src="image/3.png" style="floatright"/>
      </div>
      <a class="blod">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
      <p class="text"><strong>Vicent Wu,</strong> Materials Science , PhD</p>
      <img src="image/6.png" class="floatleft" />
      <div
        class="floatleft text"
        style="line-height:170%;margin-left:15px;width:367px"
      >
        说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
        <a href="">显示全部 </a> 
        <br>
        &nbsp;
      </div>
      <div
        id="
      thirdDiv"
      >
        <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>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-15 交作业

Manjaro

html和css，图片放在image文件夹里的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习-综合练习1</title>
    <link rel="stylesheet" type="text/css" href="./first.css">
</head>

<body>
    <div id="root">
        <div class="head">
            <div class="newest">
                <img src="../../image/1.png" style="margin-right: 7px;">
                <span>最新动态</span>
            </div>
            <div class="setting">
                <img src="../../image/2.png" style="margin-right: 2px;">
                <span>设置</span>
            </div>
        </div>

        <div class="left">
            <img src="../../image/4.png">
            <div class="number">6551</div>
        </div>

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

            <div class="bottom">
                <div style="margin-left: 50">
                <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>





    </div>
</body>

</html>


/* div{
    border: 1px solid black;
} */

a{
    text-decoration: none;
}

#root{
    margin: 0 auto;
    width: 600px;
}


.head{
    border-bottom: 2px solid gray;
    padding-bottom:10px;
    margin-bottom:15px;
    height: 20px;
}
.newest{
    font-weight: bold;
    color: gray;
    float: left;
}
.setting{
    color: gray;
    float: right;
}


.left{
    height: 250px;
    float: left;
}
.number{
    background-image: url("../../image/5.png");
    margin-top: 5px;
}


.right{
    margin-left: 50px;
}

.righttop{
    height: 20px;
    margin-bottom: 5px;
}
.bottom{
    margin-top: 15px;
    color: gray;
}

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-14 交作业

m迷糊小z

还行,颜色不够自然

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
</head>
<style>
	body{
    font-family:"宋体";
    font-size:13px;
    color:DimGray;
    width:48%;
    }

	.head{
      border-bottom:solid silver 2px;     
      padding-bottom:10px;
      margin-bottom:15px;
      height: 20px;
    }
    .bottom{
      border-bottom:solid silver 1px;     
      padding-bottom:10px;
      margin-top:15px;
      height: 20px;
    }
	.floatLeft{
    	float: left;
    }
	.floatRight{
    	float: right;
    }
	#d1{
		background-image:url(5.png);
        margin-top:15px;
	}

	#a{
		color: DeepSkyBlue;
		text-decoration: none
	}
	#b{
		font: bold 14px 黑体;
		color: DarkSlateBlue;
		text-decoration: none
	}

</style>


<body>
	<div class="head">
		<div class="floatLeft">
			<span><img src="1.png"></span>
			<span style="margin-left:10px ">最新动态</span>
		</div>
		<div class="floatRight">		
			<span style="margin-right:10px "><img src="2.png"></span>
			<span>设置</span>
		</div>
	</div>

	<div class="floatLeft">		
			<img src="4.png">
			<div id="d1">6551</div>
	</div>
	<div style="margin-left: 50px">		
		<span class="floatLeft">热门回答,来自 机械 <a id="a" href="#nowhere">关注话题</a></span>
		<span class="floatRight"><img src="3.png"></span><br/>
		<a id="b" href="#nowhere">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
		<p style="font: 14px"><b>Vincent Fu</b>, Materials Science, PhD</p>			
	</div>
	
	<div style="margin-left: 50px">
		<span class="floatLeft"><img  src="6.png" /img></span>
		<div style="line-height:180%; margin-left:215px">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a id="a" href="">显示全部 </a> 
		<br>
        &nbsp; 
        </div>
	</div>
	<div class="bottom"> 
		<div style="margin-left: 50">
		<img src="7.png"> 
		<span>关注问题</span> 
		<img src="8.png"> 
		<span>867条评论</span>
	    <img src="9.png"> 
		<span>作者保留权利</span>
		</div> 
     </div>
  </div>



</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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 第一次交作业

磕磕碰碰，做了很久，总算做出来了。最主要的问题在于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硬撸出来的，看来我不适合搞前端

HonoSV

字体、间距、字号这些细节都没做调整代码也写得非常不优雅

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration:none;
			}
			#d1{
				
				width: 700px;
			}
			#d2{				
				float: left;
				width: 7%;
				height: 230px;
				/*border: 1px dotted red;*/
			}
			#d3{
				float: right;
				width: 91%;
				height: 230px;
				/*border: 1px solid green;*/
			}
			#d11{
				float:left;
				width: 50%;
				font-weight:bold ;
				
			}
			#d12{
				float: right;
				width:50% ;
				text-align: right;		
			}
			#d21{
				margin: 1px auto;
				text-align: center;
			}
			#d22{
				background-color: lightslategrey;
				text-align: center;
				margin: auto 4px;
				font-size: small;				
			}
			#d31{
				float: left;
			}
			#d32{
				float: right;
				text-align: right;
				margin: 2px auto;
			}
			#d33{
				margin: 0px auto 8px auto;
			}
			#d34{
				margin: 0px auto 6px auto;
			}
			#d35{
				float: left;
				margin: auto 6px auto auto;
			}
			#d37{
				margin: 10px auto auto auto;
				font-size: smaller;
				color: lightgrey
			}
		</style>
		
	</head>
	<body>
		<div id="d1">
			<div id="d11"><img src="img/lx1/1.png"/> 最新动态</div>
			<div id="d12"><img src="img/lx1/2.png"/> 设置</div>
			<br />
			<hr />
			<div id="d2">
				<div id="d21"><img src="img/lx1/4.png"/></div>
				<div id="d22">6551</div>
			</div>
			<div id="d3">
				<div id="d31">
					热门回答， 来自 机械 <a href="#nowhere"> 关注话题</a>
				</div>
				<div id="d32"><img src="img/lx1/3.png" /></div>
				<div style="clear: both;"></div>
				<div id="d33"><a href="#nowhere"><b>人类史上令人叹为观止的极限精度制造成功有哪些？</b></a></div>
				<div id="d34"><b>Vincent Fu,</b> Material Science, PhD</div>
				<div id="d35"><img src="img/lx1/6.png"/></div>
				<div id="d36">说到精度，就不得不提在材料学中最重要的一个方面：表征。要研究一种材料性能，我在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些肯黄阁坑饿啊饿啊，而为了知晓一种材料的纤维结构，科学家至少也要吓到纳米级（放大千倍），如果要获得更深...<a href="#nowhere">显示全部</a></div>
				<div style="clear: both;"></div>
				<div id="d37"><img src="img/lx1/7.png"> 关注问题  <img src="img/lx1/8.png"/> 867条评论  <img src="img/lx1/9.png"/> 作者保留权利</div>
			</div>
			<div style="clear: both;"></div>

		<hr />
		</div>
		

	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-08-25 id="left'什么意思？

2018-08-02 第一次交作业

最帅你健哥

交作业但是觉得div用得太多了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>answser1</title>
</head>
<style>
	.firstimag{
		float:left;
	}
	.rightimg{
		float:right;
		position: absolute;
		left:670px;
		top:7px;
		
	}
	.headimg{
		float:left;
		position: absolute;
		left: 7px;
		top:50px;
	}
	.headline{
		position:absolute;
		left:50px;
		top:50px;
	}
	.numpading{
		position:absolute;
		left: 7px;
		top: 100px;
		z-index: -1;
	}
	.likenumbers{
		position: absolute;
		left:7px;
		top: 100px;
		z-index: 1;
	}
	.insideman{
		position:absolute;
		left: 50px;
		top: 100px;
	}
	.mainimg{
		position: absolute;
		left: 50px;
		top: 150px;
		
	}
	.imgprogress{
		position: absolute;
		float:left;
		left: 300px;
		top:150px;
		width: 420px;
	}
	.bottom{
		position: absolute;
		left: 50px;
		top: 270px;
	}
	.headline2{
		position:absolute;
		left:auto;
		top:300px;
	}
	.close{
		position:absolute;
		left:670px;
		top:50px;
	}
</style>	
<body>
	<div class="firstimag">
		<img src="../../学习文件/全栈学习/img/1.png">
		最新动态<br>
		<hr width="700px" style="position: absolute;left: auto" >
	</div>
	<div class="rightimg">
		<img src="../../学习文件/全栈学习/img/2.png">
		设置<br>
		
	</div>	
	<div class="headimg">
		<img src="../../学习文件/全栈学习/img/4.png">
	</div>
	<div class="headline">热门回答，来自 机械 <a href="nowhere">关注话题</a><br>
	<div style="color:#0E38CC">人类史上令人叹为观止的极限精度制造成果有哪些？</div></div>
	<div class="numpading">
	<img src="../../学习文件/全栈学习/img/5.png">
	</div>
	<div class="likenumbers">6551</div>
	<div class="insideman">
	<b>Vincent Fu,</b>Materials Science,PHD</div>
	<div class="mainimg"><img src="../../学习文件/全栈学习/img/6.png"></div>
	<div class="imgprogress"> 说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究出一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深..<a href="nowhere">显示全部</a></div><br>
	<div class="bottom"><img src="../../学习文件/全栈学习/img/7.png">关注问题<img src="../../学习文件/全栈学习/img/8.png">867条评论<img src="../../学习文件/全栈学习/img/9.png">作者保留权利</div><br>
	
	<div class="headline2"><hr width="700px" style="position: absolute;left: auto" ></div>
	<div class="close"><img src="../../学习文件/全栈学习/img/3.png"></div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-08-02 给各种div起名真的好烦

Jn_xyp

做了大概一个小时...是不是应该尽量少用绝对定位？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FAKE ZHIHU</title>
</head>
<body>
<style>
    #card > div {
        padding: 10px;
    }

    #card {
        width: 650px;
        height: 230px;
        font-family: Microsoft YaHei, sans-serif;
        word-spacing: 3px;
    }

    #answer-info, #author-info, #answer-content, #answer-options {
        margin-bottom: 5px;
    }

    a {
        color: #336699;
        text-decoration: none;
    }

    img {
        vertical-align: middle;
    }

    #header div, #user-info, #answer-info {
        display: inline-block;
    }

    #setting, #close {
        float: right
    }

    #user-info {
        float: left;
        height: 100%;
        margin-right: 10px;
    }

    #answer-image {
        float: left;
        margin-right: 15px;
    }

    #answer-text, #show_all {
        font-size: 10pt;
        line-height: 150%;
    }

    #answer-options * {
        margin-right: 6px;
        color: gray;
        font-size: 14px;
    }

    #answer-options span {
        float: left;
    }

    #answer-options {
        margin-top: 30px;
    }

    #title span, #question-title, #author-name {
        font-weight: bold;
    }

    #list-item {
        border-top: 1px lightgray solid;
        border-bottom: 1px lightgray solid;
        height: 100%;
    }

    #like-count {
        background-image: url("res/img/5.png");
        width: 100%;
        text-align: center;
        line-height: 25px;
        margin-top: 7px;
        color: gray;
        font-size: 12px;
    }
</style>

<div id="card">
    <div id="header">
        <div id="title">
            <img src="res/img/1.png">
            <span>最新动态</span>
        </div>
        <div id="setting">
            <img src="res/img/2.png">
            <span>设置</span>
        </div>
    </div>

    <div id="list-item">

        <div id="user-info">
            <div id="user-avatar">
                <img src="res/img/4.png">
            </div>
            <div id="like-count">
                6551
            </div>
        </div>

        <div id="answer">
            <div id="answer-info">
                <div>热门回答，来自 机械 <a href="#">关注话题</a></div>
                <div><a id="question-title" href="#">人类历史上令人叹为观止的极限精度制造成果有哪些？</a></div>
            </div>
            <div id="close">
                <a href="#"><img src="res/img/3.png"></a>
            </div>
            <div id="author-info">
                <span id="author-name">Vincent Fu</span>
                <span>, </span>
                <span id="author-desc">Materials Science, PHD</span>
            </div>
            <div id="answer-content">
                <img id="answer-image" src="res/img/6.png">
                <div id="answer-text">
                    说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究出一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深..
                    <a id="show_all" href="#">显示全部</a>
                </div>
            </div>
            <div id="answer-options">
                <span><img src="res/img/7.png"><a href="#">关注问题</a></span>
                <span><img src="res/img/8.png"><a href="#">867条评论</a></span>
                <span><img src="res/img/9.png"><a href="#">作者保留权利</a></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-07-17 感觉我写的有点多……几乎每个地方都用DIV套住了

JGD

看看写的可不可以……

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link href="style/test1.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="d">
		
		<div id="dh">
			<img src="image/1.png"><p>最新动态</p>
			<div id=dhr>
				<img src="image/2.png">
				<p>设置</p>
			</div>
		</div>
		
		<div id="db">
			<div id="dbl">
				<img src="image/4.png">
				<div id="dblb">6551</div>
			</div>
			<div id="dbr">
				<div id="huati">
					<span>热门回答，来自 机械</span>
					<a href="#">关注话题</a>
				</div>
				<div id="title">人类史上令人叹为观止的极限精度制造成果有哪些？
				</div>
				<div id="jianjie">
				<strong>Vincent Fu,</strong>
				<span>Materials Science, PhD</span>
				</div>
				<div class="neirong">
					<img src="image/6.png">
					<div>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究出一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深. . <a href="#">显示全部</a></div>
				</div>
				<div style="clear:both"></div>
				<div id="dbrb">
					<img src="image/7.png">
					<a href="#">关注问题</a>
					<img src="image/8.png">
					<a href="#">867条评论</a>
					<img src="image/9.png">
					<a href="#">作者保留权利</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>



div{
	font-size:13px;
}

#d{
	width: 650px;
	height:800px;
}
#dh{
}

#dh p{
	display: inline;
	
	margin-left: 10px;
	color:#666666;
	font-weight: bold;
}

#dhr{
	float:right;
}
#dhr img{
	position: relative;
	top:1px;
}
#dhr p{
	margin-left: 5px;
	font-weight: normal;
}


#db{
	height:250px;
	border-top: 1px solid #C0C0C0;
	border-bottom:1px solid #DDDDDD; 
	margin-top: 10px;
	padding-top: 15px;
}

#dbl{
	width:50px;
	float:left;
}
#dblb{
	width:40px;
	background-color:#EFF6FA;
	color:#666666;
	text-align: center;
	margin-top: 7px;
	height:23px;
	line-height: 23px;
}

#dbr{
	overflow: hidden;
	}
#huati{
	font-size: 13px;
	color:#666666;
}
#huati a{
	text-decoration: none;
	color:#336699;
}
#title{
	color:#336699;
	font-weight: bold;
	margin-top:4px;
}
#jianjie{
	margin-top:10px;
}
.neirong{
	padding-top: 16px;
	
}
.neirong img{
	float:left;
}
.neirong div{
	float:right;
	width:377px;
	line-height: 23px;
}
.neirong div a{
	text-decoration: none;
	color:#336699;
}
#dbrb{
	margin-top:20px;
	}
#dbrb a{
	text-decoration: none;
	color:#A9A9A9;
	margin-right:5px;
	margin-left:2px;
}

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-06-18 不知道写的怎么样，还可以如何简便些

trap

不知道写的怎么样，分很多选择器感觉有点乱，还可以如何简便些。使用a:link的时候总是改变不了超链里的字体颜色和大小，不知道为什么，干脆就没用。老师大佬评价一下

<div class="top">
	<img src="1.png"/>
   	<a href="#"><strong><span>最新动态</span></strong></a>
	<a href="#" class="r"><span>设置</span></a>
	<img class="r" src="2.png"/>
</div>
<hr>
 	<img class="l" width="50" height="50" src="4.png">
  	<span>热门问答，来自</span> 
  	<span>机械</span>  	
  	<img class="r" src="3.png">
	<a href="#">关注话题</a>
<div id="abs">
	<a style="color:blue" href="#"><strong>人类史上令人叹为观止的极限精度制造成果有哪些?</strong></a>
	<br><br>
	<div class="sp">
		<span><b>Vincent Fu，</b></span>
		<span>Materials Science，Phd</span>
	</div>
</div>
	<img width="50" src="5.png"/>
	<p class="h1">6551</p>	

<div class="center">
	<img class="l" width="300" height="168" src="6.png">
	<span>说到精度，就不得不提在材料学中最重要的一个方面：表征。要
	研究一种材料性能，握在手里把玩是远远不够的，就算你拿出
	放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓
	一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），
	如果要获得更深...</span>
	<a href="#">显示全部</a>
</div>
<div class="bottom">
	<img src="7.png">
	<span>关注问题</span>
	
	<img src="8.png">
	<span>867条评论</span>

	<img src="9.png">
	<span>作者保留权力</span>
</div>
<hr>

<style>

	a{text-decoration:none;}
 	.top a{
		color:black;
		font-size:10px;
		font-family:宋体;
	}

 	img{margin-right:10px;}

  	.l{
   		 float:left;
  	}
 	 .r{
  		  float:right;
  	}
	#abs{
		margin-top:6px;
		font-size:80%;
  	}
	.sp{
		position:absolute;
		left:72px;
	}

	.h1{
		position:absolute;
		top:98px;
		left:15px;	
	}
	.center{
		height:180px;
           	width: 100%;
		margin-top:-10px;
		margin-left:70px;
	}
	.bottom{
		color:grey;
		font-size:5px;
		margin-left:70px;
	}
	.bottom img{ 
		margin-top:5px;
		margin-left:10px;
		margin-right:5px;
	}
</style>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-06-02 作业

李戈多

第一次交作业

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

<style>
  body{
    font-family:"宋体";
    font-size:13px;
    color:#666666;
    width:643px;
  }
  .right{
    float:right;
  }
  .top{
    border-bottom-style:solid;
    border-bottom-color:silver;
    border-bottom-width:1px;
    padding-bottom:10px;
    margin-bottom:15px;
  }
  .bottom{

    border-top-style:solid;
    border-top-color:silver;
    border-top-width:1px;
    padding-top:10px;
    margin-top:15px;

  }
  .TX{
    float:left;
  }
  .text{
    color:#333;
  }
  .left{
    float:left;
  }
  .xwj{
    float:right;
  }
  a{
    text-decoration:none;
    color:#336699;
  }

  </style>

<body>

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



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


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



  <div style="padding:10px">
    <span style="color:darkgray">
      <img src="7.png">
      关注问题
      <img src="8.png">
      867条评论
      <img src="9.png">
      作者保留权利</span>
  </div>
</div>

<div style="clear:left">

</div>

<div class="bottom">
</div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-04-24 做的不好大家将就看看，哈哈

2018-04-12 终于做了个样子

ticktack

做了两个小时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="prac1Style.css" />
</head>
<body>
<div id="all">
    <div class="caidanlan">
        <p class="left"><img src="img/1.png" id="Img1"/>  最新动态</p>
        <p class="right"><img src="img/2.png"/>  设置</p>
    </div>
    <div>
        <div id="UserImg" class="left"><img src="img/4.png"/></div>
        <div id="category"  >
            <div class="whiteSpace">热门回答，来自 机械 <a href="">关注话题</a>
<a href="">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
            </div>
        </div>
        <div id="6551" class="left" style="background-image: url(img/5.png)">6551</div>
        <div id="author" class="whiteSpace">    <strong>Vincent Fu</strong>,Materials Science,PhD</div>
         <div id="ansImg" class="left"><img src="img/6.png"/></div>
         <p id="answer">说到精度，就不得不提在材料学中最重要的一个方面：表征。
             要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，
             也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，
             科学家至少要下到纳米级（放大千倍），如果要获得更深... <a href="" class="whiteSpace">  显示全部</a></p>
        <div id="view" class="whiteSpace"><img src="img/7.png">  关注问题  <img src="img/8.png">  867条评论  <img src="img/9.png">  作者保留权利
        </div>
    </div>

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



#all{
    height: 300px;
    width: 500px;
    border-bottom:  gray solid 1px;
}
.caidanlan{
    border-bottom: gray solid 1px;
    padding: 10px;
    height: 40px;
    width: 100%;
}
#Img1{
    margin-right: 5px;
}
#UserImg{
  padding: 0px;
  clear: both;
  margin-top: 5px;
}
#category{
   height: 47px;
   width: 90%;
    float: right;
}
#6551{
    margin-top: 10px;
}
#author{
    clear: right;
}
#answer{
    position: relative;
    left: 70px;
    font-size: small;
}
#ansImg{
    position: relative;
    left: 55px;
    top: 8px;
}
#view{
    position: relative;
    left: 55px;
}
.right{
    float: right;
}
.left{
    float: left;
}
.whiteSpace{
    white-space: pre;
}
a{
    color: blue;
    text-decoration: none;
}

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-03-13 作业做的不对，求指点

Lin88_yang

我写了好几遍了，还是跟题目截图不一样，哎，跪求老师还有大神们指教

<body>
<style>
  .left{
      float:left;
  }
    .right{
        float:right;
    }
    .b{
        border:solid 2px lightgrey;
    }
    .b1{
        border:solid 1px lightgrey;
    }
    a{
        text-decoration:none;
    }
    .left1{
        float:left;
        width:38px;
        background-color:white;
    }
</style>
<div><span class="left"><img src="answer/1.png"> 最新动态</span> <span class="right"><img src="answer/2.png"> 设置</span>
</div>
<div class="b"></div>
<div>
    <span class="left"><img src="answer/3.png"></span>
    <span>
       热门回答，来自 机械 <a href="#" target="_blank">关注话题</a><br>
        人类史上令人叹为观止的极限精度制造成果有哪些？
    </span>
</div>
<div>
    <span class="left"><img src="answer/4.png"></span> <span>Vincent Fu, Materials Science,PhD</span>
</div>
<div>
    <span class="left1"></span> <span class="left"><img src="answer/6.png"></span> <span>说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="#" target="_blank">显示全部</a></span>
</div>
<div> <span>关注问题  867条评论  作者保留权利</span></div>
<div class="b1"></div>
</body>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-03-08 交作业

2018-02-24 交作业写的好乱全是DIV没事么...

篮子鱼

写了好久啊好菜啊

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

</head>
<style> 
body{
width:600px;
font-family:"宋体";
font-size:13px;


} 
a:link {color:336699}
a:visited {color:336699}
a:hover {color:red}
a:active {color:purple
}

a{
text-decoration: none;


}

.r{
float:right;

}
.l{
float:left;

}
.clearfloat{clear:both} 

#Line{ 
padding-top: 1px; 
color:red;
}
.divwidth{
width:50px;

}
.spacing
{ 
 position: relative;
left:50px;
top:-10px;

}
.width{
width:320px;
color:333333;
}
.margin{
margin-right:10px;
}
.font1{
font-size：16px;
font-weight:bold;
color:666666;
}
.font2{
font-size：16px;
font-weight:bold;

}
.font3{
font-weight:bold;
color:333333;
}
.font4{
color:a9a9a9;
}


#margin1{
margin-top:10px;
}

#margin2{
margin-top:-10px;

}
#whole
{
padding:10px;

}

#div2{
width:38px;
height:24px;
background-image:url(5.png);
text-align:center;
line-height:24px;
}
</style>

<body>
<div id="whole">
<div>
<div class="l">
<img src="1.png"/>
<span class="font1">最新动态</span>
</div>
<div class="r">
<img src="2.png"/>
<span style="color:666666">设置</span>
</div>
<div class="clearfloat" id="Line">
<hr/></div>
<div>
<div class="l divwidth">
<img src="4.png"/>
<br>
<p id="div2"> 6551</p>
</div>


<img src="3.png"/ class="r">
<span style="color:666666">热门回答，来自 机械</span>
<a href="#">关注话题</a>

<div class="font2" id="margin2"><p><a href="#" >人类史上令人叹为观止的极限精度制造成果有哪些？</a></p></div>
 <span class="font3">Vincent Fu,</span><span> Materials Science, PhD1 </span>

</div>

<div class="clearfloat"></div>

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

<div class="clearfloat"></div>
	
<div class="font4" id="margin1">
<img src="7.png"/>

<span>关注问题</span>

<img src="8.png"/>
<span>867条评论</span>

<img src="9.png"/>
<span >作者保留权利</span>


</div>
</div>

</div>

<hr/>


</div>

</body>





</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-01-29 这个div怎么不在左边

2018-01-29 怎么嵌套两个div这个布局就不对了

2018-01-18 怎么才能随浏览器的大小进行自适应？

2017-12-25 关于边框模型的问题

bichu

见图，我看了您写的答案，那个左边的小兔子的div，id上没有css，class上只有一个向左浮动，图片的大小是38*38，那为什么浏览器显示内容是宽度是45呢？

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS阶段性练习1</title>
</head>

<style>
body{
    font-family:"宋体";
    font-size:13px;
    color:#666666;
    width:643px;
}
.floatright{
	float:right;
}
.floatleft{
	float:left;
}
div.clearLeft{
	clear:left;
}
</style>

<body>
   <div class="topdiv">
	<img src="img/1.png">
	<span class="bold">最新动态</span>
	<span class="floatright" >设置</span>
	<img  class="floatright" src="img/2.png">
   </div>

  <div id="left" class="floatleft" style="margin-right:15px">
    <img src="img/4.png"/>
    <br>
    <br>
    <span>6551</span>
  </div>

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

    <div id="thirdDiv" >
		<img src="img/7.png">
		<span>关注问题</span>
		<img src="img/8.png">
		<span>867条评论</span>
	    <img src="img/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>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-12-21 交作业。。菜鸟一只做了两个小时

2017-12-15 交作业啦

2017-11-24 请老师检阅一哈

2017-11-24 不熟练花了3小时吧

2017-11-20 花了一小时写的希望能让老师满意

ToohoKing

多加了一条记录这样才能确保margin和padding用得合适 (机智)

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        a {
            text-decoration: none;
            color: #2885db;
        }

        .smallIcon {
            margin: 0px 3px;
        }

        h4 {
            margin: 5px 0px;
            font-size: 14px;
            color: #0562b4 !important;
        }

        div.pageContent {
            width: 642px;
            font-size: 13px;
        }

        div.upper {
            padding: 10px 0px 30px 0px;
            margin: 10px 0px;
            border-bottom: 1px solid lightgray;
        }

        div.upper span {
            float: left;
        }

        span.activities {
            width: 92%;
        }

        div.entries {
            margin: 15px 0px;
            padding: 5px 0px;
            border-bottom: 1px solid lightgray;
        }

        div.entryAvatar {
            float: left;
            margin: 0px 20px 0px 0px;
        }

        span.avatar {
            display: block;
            margin: 0px 0px 5px;
        }

        span.thumbUpCount {
            margin: 0px auto;
            padding: 1px 5px;
            background-image: url('5.png');
            color: #526bb6;
        }

        div.UserProfile {
            margin: 6px 0px;
        }

        .entryContent {
            overflow: hidden;
        }

        div.topicMeta {
            float: left;
            width: 96%;
        }

        img.illustration {
            float: left;
            margin: 0px 15px 0px 0px;
        }

        p.answer {
            color: #524d4d;
            margin: 0px;
            padding: 0px;
            line-height: 170%;
        }

        div.entryBottom {
            clear: both;
            margin: 20px 0px 15px 0px;
            color: #a2a2a2;
        }

        div.entryBottom span {
            margin: 0px 5px 0px 0px;
        }
    </style>
</head>

<body>
    <div class="pageContent">
        <div class="upper">
            <span class="activities">
                <img src="1.png" class='smallIcon'> 最新动态
            </span>
            <span>
                <img src="2.png" class='smallIcon'> 设置
            </span>
        </div>

        <div class="entries">
            <div class="entryAvatar">
                <span class='avatar'>
                    <img src="4.png">
                </span>
                <span class="thumbUpCount">6551</span>
            </div>

            <div class="entryContent">
                <div class="topicMeta">
                    <span class="category">热门回答</span>，来自
                    <span class="topic">机械</span>
                    <a href="#" class="followThis">关注话题</a>
                </div>
                <a href="#">
                    <img src="3.png" class="smallIcon">
                </a>

                <h4 class="title">
                    <a href="#" class='question'>人类历史上令人叹为观止的极限精度制造成果有哪些？</a>
                </h4>

                <div class="UserProfile">
                    <b class='userName'>Vincent Fu,</b>
                    <span class='signature'>Materrials Science,phD</span>
                </div>

                <img src="6.png" class="illustration">

                <p class="answer"> 说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼， 而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
                    <a href="#">显示全部</a>
                </p>


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

        <div class="entries">
            <div class="entryAvatar">
                <span class='avatar'>
                    <img src="4.png">
                </span>
                <span class="thumbUpCount">6551</span>
            </div>

            <div class="entryContent">
                <div class="topicMeta">
                    <span class="category">热门回答</span>，来自
                    <span class="topic">机械</span>
                    <a href="#" class="followThis">关注话题</a>
                </div>
                <a href="#">
                    <img src="3.png" class="smallIcon">
                </a>

                <h4 class="title">
                    <a href="#" class='question'>人类历史上令人叹为观止的极限精度制造成果有哪些？</a>
                </h4>

                <div class="UserProfile">
                    <b class='userName'>Vincent Fu,</b>
                    <span class='signature'>Materrials Science,phD</span>
                </div>

                <img src="6.png" class="illustration">

                <p class="answer"> 说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼， 而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
                    <a href="#">显示全部</a>
                </p>


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



    </div>
</body>

</html>

1 个答案

how2j
答案时间：2017-11-21

哇塞，不错不错，厉害厉害！

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-11-20 本菜鸟写的

ToohoKing

多加了一条记录这样才能确保margin和padding用得合适 (机智)

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        a {
            text-decoration: none;
            color: #2885db;
        }

        .smallIcon {
            margin: 0px 3px;
        }

        h4 {
            margin: 5px 0px;
            font-size: 14px;
            color: #0562b4 !important;
        }

        div.pageContent {
            width: 642px;
            font-size: 13px;
        }

        div.upper {
            padding: 10px 0px 30px 0px;
            margin: 10px 0px;
            border-bottom: 1px solid lightgray;
        }

        div.upper span {
            float: left;
        }

        span.activities {
            width: 92%;
        }

        div.entries {
            margin: 15px 0px;
            padding: 5px 0px;
            border-bottom: 1px solid lightgray;
        }

        div.entryAvatar {
            float: left;
            margin: 0px 20px 0px 0px;
        }

        span.avatar {
            display: block;
            margin: 0px 0px 5px;
        }

        span.thumbUpCount {
            margin: 0px auto;
            padding: 1px 5px;
            background-image: url('5.png');
            color: #526bb6;
        }

        div.UserProfile {
            margin: 6px 0px;
        }

        .entryContent {
            overflow: hidden;
        }

        img.illustration {
            float: left;
            margin: 0px 15px 0px 0px;
        }

        p.answer {
            color: #524d4d;
            margin: 0px;
            padding: 0px;
            line-height: 170%;
        }

        div.entryBottom {
            clear: both;
            margin: 20px 0px 15px 0px;
            color: #a2a2a2;
        }

        div.entryBottom span {
            margin: 0px 5px 0px 0px;
        }
    </style>
</head>

<body>
    <div class="pageContent">
        <div class="upper">
            <span class="activities">
                <img src="1.png" class='smallIcon'> 最新动态
            </span>
            <span>
                <img src="2.png" class='smallIcon'> 设置
            </span>
        </div>

        <div class="entries">
            <div class="entryAvatar">
                <span class='avatar'>
                    <img src="4.png">
                </span>
                <span class="thumbUpCount">6551</span>
            </div>

            <div class="entryContent">
                <span class="category">热门回答</span>，来自
                <span class="topic">机械</span>
                <a href="#" class="followThis">关注话题</a>

                <h4 class="title">
                    <a href="#" class='question'>人类历史上令人叹为观止的极限精度制造成果有哪些？</a>
                </h4>

                <div class="UserProfile">
                    <b class='userName'>Vincent Fu,</b>
                    <span class='signature'>Materrials Science,phD</span>
                </div>

                <img src="6.png" class="illustration">

                <p class="answer"> 说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼， 而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
                    <a href="#">显示全部</a>
                </p>


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

        <div class="entries">
            <div class="entryAvatar">
                <span class='avatar'>
                    <img src="4.png">
                </span>
                <span class="thumbUpCount">6551</span>
            </div>

            <div class="entryContent">
                <span class="category">热门回答</span>，来自
                <span class="topic">机械</span>
                <a href="#" class="followThis">关注话题</a>

                <h4 class="title">
                    <a href="#" class='question'>人类历史上令人叹为观止的极限精度制造成果有哪些？</a>
                </h4>

                <div class="UserProfile">
                    <b class='userName'>Vincent Fu,</b>
                    <span class='signature'>Materrials Science,phD</span>
                </div>

                <img src="6.png" class="illustration">

                <p class="answer"> 说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼， 而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
                    <a href="#">显示全部</a>
                </p>


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

    </div>
</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-09-17 为什么右边的部分是靠 width:367px撑起来的？

hzm7728588

我发现整个布局的关键就是设置内容的宽度，可是这个宽度是怎么计算出来的，有没有其他方法可以实现这种效果，而不是直接写死

<div class="floatleft text" style="line-height: 170%;margin-left: 15px;width:367px">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，
				而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="#">查看更多</a>
				<br> &nbsp;
			</div>

1 个答案

我会努力学JAVA的
答案时间：2018-09-27

俺也不太明白，这个367px怎么得到的，总得宽度643难道也是站长随便写的么？

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-09-09 写了一个小时请批改作业啊老师

2017-09-07 图片和文字不在同一水平

junxiaoge

图片和文字不在同一水平线上，有上下的层次感

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
    font-family:"ËÎÌå";
    font-size:13px;
    color:#666666;
    width:643px;
    }
div.topdiv{
      border-bottom-style:solid;
      border-bottom-color:silver;
      border-bottom-width:1px;
      padding-bottom:10px;
      margin-bottom:15px;
    }
    .floatright{
    	float:right;
    }
    .bold{
    font-weight:bold;
    }

	</style>

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

1 个答案

how2j
答案时间：2017-09-08

。。。。好吧

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-08-21 改变了body的宽度为800px后，为什么只有第一个div改变宽度，其他的不变啊。

2017-08-10 插入img，img默认显示位置不贴着边

2017-08-04 写了一晚上，感觉写的很乱，div套div

黑键

感觉很不熟练，遇到各种各样问题，，明天早上再写一遍好了。。。

<html>
<style>
body{
 font-family:"宋体";

font-size:13px;
    color:#666666;
    width:643px

}
    div#thirdDiv span{
        color:darkgray;
    }



 .bold{
display:inline-block;
    font-weight:bold;
    }

.topdiv{
 border-bottom-style:solid;

 border-bottom-color:silver;
border-bottom-width:1;

}


.floatright{
float:right;
}
div#right{
margin-left:60px;
}

 a{
text-decoration: none;
 color:#336699;
    }

#left{
  float:left;
}

</style>
<body>
<div class="topdiv">
<img src="1.png"/>
<span style=" display:inline-block; margin-bottom:10px"  class="bold">最新动态</span>
<span  class="floatright">设置</span>
<img  style="margin-right:5px" class="floatright" src="2.png"/>
</div>

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

</div>

 <div id="right" >
    	<span>热门回答，来自 机械</span> 
    <a href="#">关注话题</a>
    <img src="3.png" class="floatright"><br/>
   <a   style=" margin-top:8px"class="bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
  <p class="text"><strong>Vincent Fu</strong>, Materials Science, PhD</p>

 
 
<div ">
<img src="6.png"/>
 <div   class="floatright" style="line-height:170%;margin-left:15px;width:367px"">		
	
		说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... 	
<a href="">显示全部 </a> 


</div>



</div>


   <div id="thirdDiv" style=" margin-top:20px"> 
		<img src="7.png"> 
		<span>关注问题</span> 
		<img src="8.png"> 
		<span>867条评论</span>
	    <img src="9.png"> 
		<span>作者保留权利</span> 
     </div>





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


</body>
</html>

1 个答案

how2j
答案时间：2017-08-07

哎哟，效果不错嘛，做得跟真的一样

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-06-04 <div style="clear:left;"></div><br>加和不加的区别

status

最后的thiriddiv之前的<br>和&nbsp没弄明白是神马意思，所以自己写的时候是想thriddiv也float的，但是出了个问题，为神魔在thirddiv之前加上<div style="clear:left;"></div><br>这句就是正常的，而去掉这句时右边整个div的位置都不对了捏？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{
	font-family:"宋体";
	font-size:13px;
	width:643px;
	color:#666666;
}
a{
	text-decoration:none;
	color:#069;
}
.topdiv{
	border-bottom:1px solid #CCC;
	padding-bottom:10px;
	margin-bottom:10px;
}
.bold{
	font-weight:bold;
}
.floatleft{
	float:left;
}
.floatright{
	float:right;
}
.sp1{
	background-image:url(img/5.png);
	padding:5px;
}
.text{
	color:#999;
}
#thirddiv{
	color:#CCC;
	/*clear:left;*/
}
</style>
</head>

<body>

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

<div id="left" class="floatleft" style="margin-right:5px;">
<img src="img/4.png">
<br>
<br>
<span class="sp1">6551</span>
</div>

<div id="right" class="floatleft">

<div style="margin-bottom:10px;">
<span class="text">热门回答，来自 机械</span>
<a href="#">关注话题</a>
<img class="floatright" src="img/3.png">
</div>

<a class="bold" href="#">人类历史上令人叹为观止的极限精度制造成果有哪些？</a>
<p class="text"><strong>Vincent Fu,</strong>Materrials Science,phD</p>
<img class="floatleft" style="margin-right:15px;" src="img/6.png">

<div style="line-height:170%;width:367px;" class="floatleft">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... 
<a href="#">显示全部</a>
</div>

<div style="clear:left;"></div>
<br>

<div id="thirddiv" class="floatleft">
<img src="img/7.png">
<span>关注问题</span>
<img src="img/8.png">
<span>876条评论</span>
<img src="img/9.png">
<span>作者保留权利</span>
</div>

</div>

<div style="clear:left;"></div>

<div class="bottom" style="margin-top:15px;border-top:solid 1px #CCC;">
</div>

</body>
</html>

1 个答案

how2j
答案时间：2017-06-05

清除了浮动之后，后续的元素才能够顺序摆放，不然会试图围绕前面浮动的元素

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-06-02 对span元素设置margin-right为什么没有效果？

2017-06-01 关于代码的问题

2017-06-01 line-height=170%是什么意思

爱刷屏的萝卜头

这个用百分数，多行内容就可以居中显示了，为什么？居中那块没讲呀

4 个答案

爱刷屏的萝卜头
答案时间：2017-06-06

尴尬

how2j
答案时间：2017-06-06

行间距在CSS的基础部分： http://how2j.cn/k/css/css-text/241.html#step455

爱刷屏的萝卜头
答案时间：2017-06-06

我百度一下知道了，之前以为就是垂直居中，百度了一下原来是行距的意思。。站长你这个没讲哦

how2j
答案时间：2017-06-02

垂直居中用的是像素值，这里用百分比，一个道理嘛。。。。 http://how2j.cn/k/css/css-vertical-center/780.html 如果不习惯，也可以改成像素值呀

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-06-01 站长，你这个边距是用什么测的啊，还有颜色

2017-05-12 class的问题

奋斗的酱油

class="floatleft text" class="floatleft show1" 这两个后面为什么还要加text和show1 我尝试去掉发现并不会造成什么影响望老师解答！

 <div id="right" class="floatleft show1">
    <div style="margin-bottom:5px">
    	<span>热门回答，来自 机械</span> 
    <a href="#">关注话题</a>
    <img src="3.png" class="floatright">
    </div>
    <a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
    <p class="text"><strong>Vincent Fu</strong>, Materials Science, PhD</p>
    <img class="floatleft" src="6.png"/>
    <div  class="floatleft text" style="line-height:170%;margin-left:15px;width:367px"">

1 个答案

我会努力学JAVA的
答案时间：2018-09-27

站长的答案里面show1是用来测试位置的,text是颜色啊，你都不看style属性的么

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2017-04-13 内联元素能直接设置margin和padding吗？

2017-03-19 端技术-CSS-综合性练习1 -练习-综合练习1 的提问

small

为什么我的第一个下划线没有用

<!doctype html>
<html>
<head>
</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;
    }	  
</style>
<body>
  <div class="div.topdiv">
     <img style="margin-right:5px" src="images/answer/1.png">
     <span class="bold">最新动态</span>
     <span class="floatright">设置</span>
     <img  style="margin-right:5px" class="floatright"  src="images/answer/2.png">
  </div>
</body>
</html>

3 个答案

icoffee
答案时间：2019-04-08

在<style>里把div.topdiv改为div.div.topdiv

how2j
答案时间：2017-03-20

基于你的问题，我改了改，请自己比较区别，找出原因： http://how2j.cn/code/95

small
答案时间：2017-03-19

边框为啥没有

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2016-06-02 关于阶段练习的答案

Hulk	关于前端部分-CSS-综合性练习1 的提问楼主以后那个你敲得那个代码能不能制作成图片我们看着不一样的对照着自己打一下，感觉有点难哟。

3 个答案

锐锐大王
答案时间：2016-12-30

自己照着图码了个差不多的；后面看了答案，对比起来，自己的用来很多绝对定位-。-；看来需要简化；