CSS系列教材（二十九）- 练习

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

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

CSS系列教材（二十八）- 布局 - 块之间的空格

CSS系列教材（三十）- 练习 - 综合性练习2

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

问答区域

2022-08-04 我这个算是好理解一点的了吧，修修补补用了点时间

M_GX

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

加了注释，可以看一下相对应块的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习1</title>
</head>
<body>
<style>
    p{
        /*先写个本，方便后面改动*/
        font-size: 90%;
        font-family: 宋体;
        position: absolute;
        color: gray;
    }
    p.body{
        /*中间一长串文字的文本域大小*/
        width: 270px;
    }
    p.top{
        /*顶部和底部的文字格式*/
        font-size: 80%;
        color: gray;
        position: absolute;
    }
    img.top{
        /*最上面几张图的位置*/
        position: absolute;
        top: 15px;
    }
    img.bottom{
        /*最下面几张图的位置*/
        position: absolute;
        top: 271px;
    }
    span{
        /*主要为了写用户名*/
        position: absolute;
        background-image: url("CSSpic/5.png");
    }
    a.no_underline{
        /*设定超链的颜色和取消下划线*/
        text-decoration: none;
        color: deepskyblue;
    }
    div{
        /*用来划线*/
        position: absolute;
        width: 600px;
        height: 260px;
        border-bottom: 1px darkgray solid;
        border-top: 1px darkgray solid;
        top: 40px;
    }
</style>
<!--这里是头部-->
    <img  class="top" style="left: 30px" src="CSSpic/1.png">
    <p class="top" style="left: 50px;top: 0px;font-weight: bold">最新动态</p>
    <img class="top" style="left: 500px" src="CSSpic/2.png">
    <p class="top" style="left: 515px;top: 0px">设置</p>
    <img src="CSSpic/3.png" style="position: absolute;top: 55px;left: 530px">
<!--不知道咋划线就直接用块边框了-->
<div></div>
<!--左边的图和用户名-->
    <img src="CSSpic/4.png" style="position: absolute;top: 55px;left: 29px">
    <span style="position: absolute;top:100px;left: 32px">6551</span>
<!--右边的内容，这是头-->
    <p style="top: 40px;left: 90px">热门回答，来自 机械 <a class="no_underline" href="">关注话题</a> </p>
    <p style="color:deepskyblue;top:60px;left: 90px;font-weight: bold">人类史上令人叹为观止的极限精度制造成果有哪些？</p>
    <p style="color: #14151c;top: 85px;left: 90px"><strong>Vincent Fu，</strong>Materials Science，Phd</p>
<!--右边的内容，这是文字和图骗-->
    <img class="bottom" src="CSSpic/6.png" style="left: 90px;top: 140px">
    <p class="body" style="color: #262626;top: 125px;left:300px">说到精度,就不得不提在材料科学中最重要的一个方面：表征。
    要研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼
    ，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（方法千倍），如果要获得更深...<a class="no_underline" href="">显示全部</a> </p>
<!--这里是最下面的几个元素-->
    <img class="bottom" style="left: 50px" src="CSSpic/7.png">
    <p class="top" style="top: 255px;left: 65px;color: darkgray">关注问题</p>
    <img class="bottom" src="CSSpic/8.png"style="left: 140px" src="CSSpic/7.png">
    <p class="top" style="top: 255px;left: 155px;color: darkgray">867条评论</p>
    <img class="bottom" src="CSSpic/9.png"style="left: 220px" src="CSSpic/7.png">
    <p class="top" style="top: 255px;left: 235px;color: darkgray">作者保留权利</p>
</body>
</html>

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

2022-06-15 我的代码可能是最乱的了，不会排版啊

田萬

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

我的代码可能是最乱的了吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	   <style type="text/css">
	   	body{
			width: 500px;

		}
		.center{
			display: block;
			float: right;
		}
		.aaa{
			background-color: aliceblue;
            margin: 5px;
		}
		.tupian{
			float: left;
			
		}
		.f{
			
			position: absolute;
			top: 150px;
			left: 100px;
		}
		a{
			text-decoration: none;
		}
		.foot{
			position: absolute;
			top: 280px;
			left: 100px;
		}
		.foot span{
			font-size: 14px;
			font-family:楷体;
			color: #A9A9A9;
		}
	   </style>
	</head>
	<body>
		<div class="header">
        <img src="img/1.png" >&nbsp;<span>最新动态 </span> 
		<a href="" class="center" style="text-decoration: none;"><img src="img/2.png">&nbsp;<span style="color: black;">设置</span></a>
		  
		</div>
		<hr >
		<img src="img/4.png" style="float: left; margin: 2px; padding:10px 15px;" >
		<span style="font-size: 10px; font-family: 宋体; color: #808080; ">热门回答，来自&nbsp;机械&nbsp;</span><a href="" style="text-decoration: none; color:royalblue;font-size: 10px; font-family: 宋体;">关注话题</a><img src="img/3.png" style="float: right;" >
<br>
	     <span style="font-size: 13px; font-family: 宋体; font-weight: bold; color: dodgerblue;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
	    <br><br>
		&nbsp;&nbsp;&nbsp;<span class="aaa">6551</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b style="font-family: 宋体;">Vincent Fu,</b><span>Materials Science,PhD</span>
	     <div class="f"><img src="img/6.png" class="tupian"><span style="float: right; width: 200px; margin:0px 15px; font-size: 14px;" >说到精度，就不得不提在材料学中最重要的一个方面
		 :表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜看，也只能看到表面的坑坑洼洼...&nbsp;&nbsp;&nbsp;<a href="" style="font-size: 13px; color: dodgerblue; font-fimaly:宋体;">显示全部</a></span>
</div>
       <div class="foot">
		   <img src="img/7.png" >&nbsp;<span>关注问题	</span>&nbsp;<img src="img/8.png" >&nbsp;<span>867条评论</span>&nbsp;<img src="img/9.png" >&nbsp;<span>作者保留权利</span>
	   </div>
	</body>
</html>

1 个答案

monika-zqq
答案时间：2022-06-17

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    background-color: aliceblue;
    font-family: '宋体', sans-serif;
    font-size: 15px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }
  .container {
    background-color: white;
    width: 60vw;
    border-radius: 6px;
    padding: 20px 30px 40px;
    display: flex;
    flex-direction: column;
  }

  .top {
    height: 6vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-bottom: 6px;
  }
  .underline {
    border-bottom: 1px solid gainsboro;
  }
  .top p span {
    padding-left: 3px;
  }
  .content {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
  }

  .left-img img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 5px;
  }
  .left-img span {
    background-color: #d9edf7;
    padding: 2px 6px;
    border-radius: 3px;
  }
  .right-toptic {
    font-size: 14px;
    padding-left: 20px;
  }

  .topic {
    margin-bottom: 6px;
  }

  .topic a {
    color: #337ab7;
  }
  .topic img {
    float: right;
    margin-right: 15px;
  }
  .title {
    color: #337ab7;
  }

  .left-img-detail img {
    float: left;
  }
  .right-detail {
    margin-left: 220px;
    line-height: 23px;
  }
  .right-detail a {
    color: #337ab7;
    text-decoration: none;
  }
  .interact {
    display: flex;
    color: gray;
  }
  .interact a {
    color: gray;
    text-decoration: none;
  }
  .interact img, .interact span {
    margin-right: 5px;
  }
</style>
<body>
  <div class="container">
    <div class="top underline">
      <p>
        <img src="img/1.png" alt="">
        <strong>最新动态</strong>
      </p>
     <p>
      <img src="img/2.png" alt="">
      <span>设置</span>
     </p>
    </div>
    <div class="content underline">
      <div class="left-img">
        <img src="img/4.png" alt="">
        <span>6551</span>
      </div>
      <div class="right-toptic">
        <div class="topic">
          <span>热门回答，来自机械</span>
          <a>关注话题</a>
          <a href=""><img src="img/3.png" alt=""></a>
        </div>
        <a class="title">
          <strong>人类史上令人叹为观止的极限精度制造成果有哪些？</strong>
        </a>
        <p class="issues">
          <strong>Vincent Fu</strong>, MaterialsScience, PhD
        </p>
        <div class="detail">
          <div class="left-img-detail">
            <img src="img/6.png" alt="">
          </div>
          <div class="right-detail">
            <p>说到精度，就不得不提在材料学中最重要的一个方面：表征。
              要想研究一种材料性能，握在手里把玩是远远不够的，就算你
              拿出放大镜近了看，也只能看到表面的一些坑坑洼洼，而为了
              知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千
              倍），如果要获得更深...<a href="nowhere">显示全部</a>
            </p>
          </div>
        </div>
        <div class="interact">
          <span><a href=""><img src="img/7.png" alt="">关注问题</a></span>
          <span><a href=""><img src="img/8.png" alt="">72条评论</a></span>
          <span><img src="img/9.png" alt=""></span>
          <span>作者保留权利</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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

2022-03-20 还是要活学活用啊

Dfantuan

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

没参考答案，自己一点点根据上面看的东西写出来，然后看看答案，自己写的好复杂。多练习练习吧！

<!DOCTYPE html>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
          body{
               font-family: "宋体";
               font-size: 10px;
               color: black;
               width: 600px;
          }
          .blod{
               font-weight: bold;
          }
          div.a{
               border-bottom: 1px solid silver;
               padding-bottom: 10px;
               margin-bottom: 15px;
          }
          .right{
               float: right;
          }
          span.bt{
              position: absolute;
              top: 10%;
              left: 8%;
          }
          div.end{
               font-family: "新宋体";
               font-style: 12px;
               color: rgb(161, 161, 161);
               position: absolute;
               top: 28%;
               border-bottom: 1px solid gray;
               width: 600px;
               padding:0px 1px 20px;

          }
     </style>

</head>
<body>
     <div class="a">
          <img src="./img/1.png" alt="">
          <span class="blod">最新动态</span>
          <span class="right" >设置</span>
          <img class="right" style="margin-right: 5px;" src="./img/2.png" alt="">
     </div>
     <div>
          <img style="float: right;margin-right: 10px;" src="./img/3.png" alt="">
          <img style="float: left;padding:0px 20px 15px 0px;" src="./img/4.png" alt="">
          <span>热门回答，来自 机械 </span>
          <a href="" style="text-decoration: none;color: blue;">关注话题</a>
          <span style="display: block;padding-top:6px;font-weight: bold;font-size: 10px;color: chocolate;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
          <span style="position: relative;font-weight: bold;position: absolute;top: 10%;">Vincent Fu,</span>
          <span class="bt">Materials Science, PhD</span>
          <span style="background-color: rgba(223, 218, 218, 0.842);position: absolute;left: 0.6%;top: 10.5%;padding:3px;color: rgb(117, 92, 61);">4524</span>
     </div>
     <div style="position: relative;top: 25px;">
          <img style="float: left;" src="./img/6.png" alt="">
          <p style="display: block;position: relative;left: 15px;width: 90%;" >说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
          <a style="overflow: hidden;text-decoration: none;" href="">显示全部</a>
          </p>
     </div>
     <div class="end">
          <img style="margin-left:10%;" src="./img/7.png" alt="">
          <span>关注问题</span>
          <img src="./img/8.png" alt="">
          <span>264条评论</span>
          <img src="./img/9.png" alt="">
          <span>作者保留权利</span>
     </div>
</body>
</html>

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

2022-03-19 comprehensive exercise

莫諾

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

综合练习1

<style>
	.left{
		width: 200px;
		float: left;
	}
	.right1{
		width: 50px;
		float: right;
	}
	div.p1{
		width: 680px;
		float: left;
		margin: 2px 16px;
	}
	.right2{
		overflow:hidden;
		float: right;
	}
	.center{
		margin: 0 200px;
	}
	div.block1{
		width: 800px;
		margin: 10px;
	}
	div.uder1{
		width: 800px;
		margin: 10px;
		border-bottom: 2px solid lightgray;
	}
	div.uder2{
		width: 800px;
		margin: 20px;
		border-bottom: 2px solid lightgray;
	}
	div.block2{
		width: 800px;
		margin: 10px;
	}
	a.no_underline1,a.no_underline2,a.no_underline3{text-decoration: none}
	{text-decoration: none}
	img.f1,div.f2,img.f3{float: left}
	div.p2{
		margin:2px 52px;
	}
	div.p3{
		margin:2px 5px 5px 52px;
	}
	div.p31{
		margin:2px 0px 5px 218px;
	}
	div.p4{
		width: 680px;
		margin:2px 0px 5px 50px;
	}
	.left11{
		width: 100px;
		float: left;
		margin: 2px 15px;
	}
	.right11{
		width: 405px;
		float: right;
		margin: 2px 15px;
	}
	.center11{
		width: 140px;
		margin: 2px 15px 0px 110px;
	}
	font#wei{font-weight: normal}
</style>
<div class="block1">
	<div class="left"><img src="1.png" />  <font id="wei" size="-2" color="lightgray" margin-left="60px"><b>最新动态</b></font></div>
	<div class="right1"><img src="2.png" /> <font id="wei" size="-2"><b>设置</b></font></div>
	<div class="center"></div>
</div>
<div style="clear:both"></div>
<div class="uder1"></div>
<div class="block2">
	<div>
		<img class="f1" src="4.png" />
		<div class="p1"><font id="wei" size="-2">热门回答，来自 机械</font> <a class="no_underline1" href=""><font id="wei" size="-2">关注话题</font></a></div>
		<div class="right2"><img src="3.png" /></div>
		<div class="p2"><a class="no_underline2" href=""><font id="wei" size="-2">人类史上令人叹为观止的极限精度制造成果有哪些？</font></a></div>
	</div>
	<div>
		<div class="f2" style="position: relative; width: 50px; height: 19px;">
			<img src="5.png" width="40" height="19" />
			<span style="position: absolute; top: 0; left: 1;"><font id="wei" size="-2">6551</font></span>
		</div>
		<div class="p3"><font id="wei" size="-2"><b>Vincent Fu,</b> Materials Science, PhD</font>
			<div>
				<img class="f3" src="6.png" />
				<div class="p31"><font id="wei" size="-2">		说到精度，就不得不提在材料学中最重要的一个方面:表征。要研究一项材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼哇，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级(放大千倍)，如果要获得更深...  <a class="no_underline3" href="">显示全部</a></font></div>
			</div>
		</div>
	</div>
</div>
</br></br></br></br>
<div class="p4">
	<div class="left11"><img src="7.png" /> <font id="wei"color="lightgray" margin-left="15px" size="-2"><b>关注问题<b></font></div>
	<div class="right11"><img src="9.png" /> <font id="wei"color="lightgray" margin-left="15px" size="-2"><b>作者保留权利<b></font></div>
	<div class="center11"><img src="8.png" /> <font id="wei"color="lightgray" margin-left="15px" size="-2"><b>867条评论<b></font></div>	
</div>

<div class="uder2"></div>

1 个答案

田萬
答案时间：2022-06-15

代码超过 5行，点击查看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	   <style type="text/css">
	   	body{
			width: 500px;

		}
		.center{
			display: block;
			float: right;
		}
		.aaa{
			background-color: aliceblue;
            margin: 5px;
		}
		.tupian{
			float: left;
			
		}
		.f{
			
			position: absolute;
			top: 150px;
			left: 100px;
		}
		a{
			text-decoration: none;
		}
		.foot{
			position: absolute;
			top: 280px;
			left: 100px;
		}
		.foot span{
			font-size: 14px;
			font-family:楷体;
			color: #A9A9A9;
		}
	   </style>
	</head>
	<body>
		<div class="header">
        <img src="img/1.png" >&nbsp;<span>最新动态 </span> 
		<a href="" class="center" style="text-decoration: none;"><img src="img/2.png">&nbsp;<span style="color: black;">设置</span></a>
		  
		</div>
		<hr >
		<img src="img/4.png" style="float: left; margin: 2px; padding:10px 15px;" >
		<span style="font-size: 10px; font-family: 宋体; color: #808080; ">热门回答，来自&nbsp;机械&nbsp;</span><a href="" style="text-decoration: none; color:royalblue;font-size: 10px; font-family: 宋体;">关注话题</a><img src="img/3.png" style="float: right;" >
<br>
	     <span style="font-size: 13px; font-family: 宋体; font-weight: bold; color: dodgerblue;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
	    <br><br>
		&nbsp;&nbsp;&nbsp;<span class="aaa">6551</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b style="font-family: 宋体;">Vincent Fu,</b><span>Materials Science,PhD</span>
	     <div class="f"><img src="img/6.png" class="tupian"><span style="float: right; width: 200px; margin:0px 15px; font-size: 14px;" >说到精度，就不得不提在材料学中最重要的一个方面
		 :表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜看，也只能看到表面的坑坑洼洼...&nbsp;&nbsp;&nbsp;<a href="" style="font-size: 13px; color: dodgerblue; font-fimaly:宋体;">显示全部</a></span>
</div>
       <div class="foot">
		   <img src="img/7.png" >&nbsp;<span>关注问题	</span>&nbsp;<img src="img/8.png" >&nbsp;<span>867条评论</span>&nbsp;<img src="img/9.png" >&nbsp;<span>作者保留权利</span>
	   </div>
	</body>
</html>

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

2022-03-14 搞了一上午前端好难

logiczqr

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

答案

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
        body {
            width: 650px;
        }

        .s1 {
            font-weight: bold;
            font-family: "宋体";
            font-size: 13px;
            margin-left: 10px;
        }

        .d2 {
            float: right;
        }

        .s2 {
            font-family: "宋体";
            font-size: 13px;
        }

        .d1 {
            width: 650px;
            border-bottom: 1px solid gray;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .p1 {
            background-image: url("img/5.png");
            /* width: 0px;
                height: 0px; */
            font-size: 13px;
            font-family: "宋体";
            padding: 5px 5px;
        }

        .d3 {
            width: 38px;
            float: left;
            margin-right: 20px;
        }

        .i1 {
            float: right;
        }

        .s3 {
            font-size: 13px;
            font-family: "宋体";
            color: gray;
        }

        .s4 {
            font-size: 13px;
            font-weight: bold;
            color: blue;
        }

        .p2 {
            font-size: 13px;
            font-family: "宋体";
        }

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

        .s5 {
            font-size: 13px;
            font-family: "宋体";

        }

        .i2 {
            float: left;
            margin-right: 10px;
        }

        .d4 {
            margin-bottom: 30px;
        }
        .d5{
            border-bottom: 1px solid lightgray;
            padding-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <img src="img/1.png">
        <span class="s1">最新动态</span>
        <div class="d2">
            <img src="img/2.png">
            <span class="s2">设置</span>
        </div>
    </div>
    <div class="d5">
        <div class="d3">
            <img src="img/4.png">
            <p class="p1">6551</p>
        </div>
        <div>
            <span class="s3">
                热门回答，来自&nbsp;机械&nbsp;
                <a>关注话题</a>
            </span>
            <img class="i1" src="img/3.png">
        </div>
        <span class="s4">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
        <p class="p2"><strong>Vincent Fu,</strong> Materials Science, PhD</p>
        <div class="d4">
            <img class="i2" src="img/6.png">
            <span class="s5">
                说道精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，
                也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a>显示全部</a>
            </span>
        </div>
        <div style="clear: left;"></div>
        <img style="margin-left: 58px;" src="img/7.png">
        <span class="s3">关注问题</span>
        <img src="img/8.png">
        <span class="s3">867条评论</span>
        <img src="img/9.png">
        <span class="s3">作者保留权利</span>

    </div>
</body>

</html>

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

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 57 条以前的提问，请点击查看

提问之前请登陆

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

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

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图