html评论页-css综合练习1答案对比

最新推荐文章于 2024-07-25 10:18:55 发布

银色彗星

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量199

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43486209/article/details/106016246

版权

下面我将自己的答案称为答案1，将站长的答案称为答案2.

html主体

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
body{}
.bold{}
div#div1{}
</style>
<body>
</body>
</html>

style

< style > < /style >之间的内容可以修改组成body的元素的属性，比如字体的大小、粗细，块的大小、背景色，边框的外边距和内边距等等。
答案1的style:

<style>
div#main{
top:20px;
position:relative;
width:800px;
height:240px;
border-top-style:solid;
border-top-color:gray;
border-top-width:3px;
border-bottom-style:solid;
border-bottom-color:gray;
border-bottom-width:3px;
}
div#sl1{
 width:100px;
 height:14px;
 float:left;
 display:inline-block;
}
div#sl2{
 width:100px;
 height:14px;
 position:absolute;
 left:730px;
 display:inline-block;
}

div#p4{
 width:38px;
 height:38px;
 float:left;
 display:inline-block;
left:10px;
top:10px;
position:absolute;
}

div#p5{
 width:38px;
 height:24px;
 float:left;
 display:inline-block;
left:10px;
top:48px;
position:absolute;
}
div#p6{
width:200px;
 height:112px;
 display:inline-block;
left:58px;
top:80px;
position:absolute;
}
div#p4r{
height:60px;
width:500px;
position:absolute;
left:58px;
top:10px;
}
div#pbottom{
height:30px;
width:500px;
position:absolute;
left:58px;
top:210px;
}
div#p1{
   width:500px;
   height:18px;
}
div#comb1{
width:160px;
height:18px;
 display:inline-block;
}
div#comb2{
width:120px;
height:18px;
font-color:blue;
 display:inline-block;
}
div#line1{
width:500px;
   height:18px;
position:absolute;
top:46px;
}
div#line2{
width:500px;
 height:112px;
 display:inline-block;
left:258px;
top:80px;
position:absolute;
}
</style>

效果图：在这里插入图片描述
可以看到，我编写了许多不同尺寸的div(图中只指出了一部分),将一个个不同尺寸的div块组合成主体。但是这样未免过于繁琐，不利于日后的阅读和修改。

分析单独的div,“sl1"和"sl2”

为了实现下面的效果：在这里插入图片描述
我在style中编写了两个div:

div#sl1{
 width:100px;/*指定块的宽度*/
 height:14px;/*指定块的长度*/
 float:left;/*指定相对于主窗体的浮动方式：左边*/
 display:inline-block;/*因为块默认的display方式为block,连续使用两个div便会自动换行，故修改为inline-block，这样即可以并排使用，又可以修改div的尺寸。*/
}
div#sl2{
 width:100px;
 height:14px;
 position:absolute;/*定位方式:绝对定位*/
 left:730px;/*指定块"sl2"定位在"sl1"的左边730px处。*/
 display:inline-block;
}

并在body中应用这两个div;

<div id="sl1">/*可以看到，使用id指定div的名称，便可以使用被修改的div*/
<img src="file://d:/java前端/css练习1/img/1.png"/>最新动态/*此处插入的为最新动态左边的图片。*/
</div>
<div id="sl2"><img src="file://d:/java前端/css练习1/img/2.png"/>设置</div>

答案二的style

<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;
    }

    div1{
    border:1px solid green;
    }

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

    div#thirdDiv span{
        color:darkgray;
    }

    div.clearLeft{
	clear:left;
    }

</style>

站长将浮动方式float：left保存到名为".floatleft"的class中，对clear、font-weight等也作此处理，便于后面元素单独调用这些功能，而不用一一写入元素的style中。
比如: 在这里插入图片描述

   <div class="topdiv"> 
	<img style="margin-right:5px" src="1.png"> 
	<span class="bold">最新动态</span> 
	<span  class="floatright" >设置</span> /*通过指定span的class="floatright"，单独对span使用了浮动方式float。*/
	<img  style="margin-right:5px" class="floatright" src="2.png"> 
   </div>

只使用了一个div就实现了上述效果，"最新动态"和"设置"栏，都放在了内联元素span中，并且指定span的class,就避免了重复使用和修改div属性点的繁琐。

答案1中的图片右侧的div与答案二的对比

答案1的:
在这里插入图片描述
答案2的:

答案1div过于靠近图片，文字也没有填充满图片右侧
这是答案二的div的代码

  <img class="floatleft" src="6.png"/>
  /*当图片不浮动时，文字就会换行出现在下面,所以要设置图片为floatleft。
  当图片浮动时，文字围绕着图片 ，而把文字(或者包含文字的div）都设置为floatleft,就可以达到图片和文字并列的效果*/
    <div  class="floatleft text" style="line-height:170%;margin-left:15px;width:367px"">		
     /*这里float和text并用,起到同时调整浮动方式和颜色的作用。style="",用于设置边框的属性，line-height是文本行间距，其中margin-left指的是div的边框左外边距。	*/
		说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... 	
	
	<a href="">显示全部 </a> 
	<br>
      &nbsp; 
    </div>

注：
不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果

body

< body >·····< /body >之间的内容为网页的主体，可以看成一个块，在这里存放html的各种元素和主要内容。
通过在style中编写body的风格，可以更改块的大小和字体、背景颜色等：
答案1中的style中没有修改body，而看答案二中的style中:

<style>
body{
    font-family:"宋体";
    font-size:13px;
    color:#666666;
    width:643px;
    }

答案1的字体:
在这里插入图片描述
答案2的字体:
可以看到修改了body的html显示的字体和字体大小有明显不同。

银色彗星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html评论页-css综合练习1答案对比

下面我将自己的答案称为答案1，将站长的答案称为答案2.html主体在这里插入代码片##
复制链接

扫一扫