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

下载区
文件名	文件大小
img.rar	41k
answer.rar	42k
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

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

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

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

问答区域

2024-07-24 CSS 布局综合练习1

虚心求学

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

文件路径和组成: 类别路径 html 文件：根目录\.html CSS 文件：根目录\CSS\style.css img 文件：根目录\img\

------------------------ css文件 ----------------------------

div.blogItem{
    margin-top:80px;
    margin-left:80px;
    width: 47%;
    border-bottom:1px solid #eee;
}
div.top{
    font-family:宋体;
    height : 30;
    margin-bottom:15px;
    border-bottom:1px solid #c0c0c0;
    font-size:12px;
}
div.topL{
    font-weight:bold;
    float:left;
    top:40;
    left:40;
}
div.topR{
    float:right;
    top:40;
    right:15%;
}
div.topR img{	
    float:left;
    margin-right:5px;	
}
div.topL img{	
    margin-right:12px;	
}
div.head{
    margin-right:15;
    float:left;
    width:38px;
    height:38px;
}
div.exit{
    margin-right:10px;
    float:right;
}
a{
    color:#369;
    text-decoration:none;
}
p.label{
    font-family:微软雅黑;
    font-size : 13px; 
    margin-top:-1;
    margin-bottom:-1px;
}
p.title{
    font-family:微软雅黑;
    font-weight:bold;
    font-size : 14px;
    margin-top : 3;
    letter-spacing:0.4;
}

div.count{
    font-size : 10px;
    padding:5px;
    position:relative;
    height:20;
    width:45px;
    float:left;
}
div.absCount{
    position:absolute;
    left : 0;
    top:0;
}
font.num{
    font-family:宋体;
    font-size:12.5px;
    position:relative;
    color:#777;
    padding-down:1;
}
p.author{
    font-size : 12px;
}
div.picture{
    clear:left;
    margin-left:50px;
    margin-right:15px;
    float : left;
}
div.content{
    font-size : 13px;
    font-family:宋体; 
    line-height : 165%;
}
div.extend{
    clear:left;
    margin-top:25px;
    margin-left:45px;
    color:#a9a9a9;
    font-size:13px;
    margin-bottom:25px;
}
div.extend img{
    margin-left:3px;
    margin-right:5px;
}

<!--------------------- html 文件 ------------------------->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<link rel = "stylesheet" type = "text/css" href = "./css/style.css"/>


<div class = "blogitem">

    <div class = top>
       <div class="topL"><img src = "./img/1.png"/><span>最新动态<span></div>
       <div class="topR"><img src = "./img/2.png"/>设置</div>
    </div>

    <div class = "head">
        <img src = "./img/4.png">
    </div>
    <div class = "exit">
        <img src = "./img/3.png"/>
    </div>

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

    <div class = "count">
        <div class = "absCount">
            <img class = "cbg" src = "./img/5.png"/>
        </div>
        <font class = "num">6551</font>
    </div>
    <p class = "author"><strong>Vincent Fu</strong>,&nbsp;&nbsp;Materials Science,&nbsp;&nbsp;PhD</p>

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

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

</div>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<link rel = "stylesheet" type = "text/css" href = "./css/style.css"/>


<div class = "blogitem2">

    <div class = top>
       
    </div>

    <div class = "head">
        <img width="38px" height = "38px" src = "./img/cjjsj.jpg">
    </div>
    <div class = "exit">
        <img src = "./img/3.png"/>
    </div>

    <div class="headline">
        <p class = "label">较早回答，来自&nbsp;&nbsp;科幻&nbsp;&nbsp;
        <p class = "title"><a class="careLink" href="#nowhere">当今最先进的超级计算机拥有什么样的算力？</a></p>
    </div>

    <div class = "count">
        <div class = "absCount">
            <img class = "cbg" src = "./img/5.png"/>
        </div>
        <font class = "num">Each</font>
    </div>
    <p class = "author"><strong>Capnent Lio</strong>,&nbsp;&nbsp;<strong>Dr.Kesion Join</strong>,&nbsp;&nbsp;Global Science,&nbsp;&nbsp;GBS</p>

    <div class = "picture">
        <img src = "./img/cjjsj.jpg" width = "200px" height = "112px"/>
    </div>
    <div class = "content">
        人类历史上，第一台电子计算机——ENIAC（中文名:埃尼阿克）诞生于
诞生于1946年2月14日，人类诞生至今大约500万年就产生了计算机科学，
现如今超级计算机、量子计算机、生物计算机等先进的计算机诞生...
        <a href="#nowhere">显示全部</a>
    </div>

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

</div>

<!--------------------- 资源 文件 ------------------------->

相对根目录：
CSS   ./CSS/style.css
IMG   ./img/1.png

2 个答案

虚心求学
答案时间：2024-07-24

当某行的 div 使用 float left 时，后续的普通元素会从最左侧开始尝试占用该行，但是发现最左侧的坑被浮动的 div 占用了，于是只能让出这一块向右边移动，但是如果剩下的空间不足了，后续的普通元素会不断换行（不停尝试占用下一行），直到空间足够为止。然而 div 则默认不会让坑！如果已经定义了一个往左浮动的 div ，后续再定义的一个 div （如果不设置浮动的话），默认会把该行全部占满（width：100%）；如果想要后续加入的 div 自适应剩下的空间（让出前一个浮动元素占用的位置），则需要将后续加入的 div 定义为 float：left，否则还是会占满整行。这道题目有一块内容较多的正文部分，站长定义为 div 同时浮动很好地实现了文本和图片的位置关系（文字浮于图片右侧）。但我还发现一种方法，可以不定义浮动，同样也可以实现这种位置关系，而且后续可以自动换行（div float 之后不会自动换行，后续元素想换行需要额外添加一个<br/>标签），不使用 div 实现的思路如下：改用 p 标签来定义一个段落元素，里面放正文内容，而 p 默认是会自动换行的，而且是自适应文本大小的，同时加入 p 时，会主动让出左侧被浮动元素所占用的空间，实现文字浮于图片右侧的位置关系。参考站长的答案并修改后的代码如下：

代码超过 5行，点击查看

//----------------------css 文件----------------------//

body{
	font-family:宋体;
	font-size:13px;
	font-color:#666;
	width:643px
}
.topdiv{
	padding-bottom:10px;
	margin-bottom:15px;
	border-bottom:1px solid silver;	
}

/* 左浮动 */
.fleft{
	float:left;
}

/* 右浮动 */
.fright{
	float:right;
}

.bold{
	font-weight:bold;
}

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

/*正文主体部分*/
.content{
	line-height:170%;
	width:369px;
	overflow:hidden;
}

.bottomdiv{
	color : darkgray;
	margin-top:23px;
}

<!-------------------- html 文件 --------------------->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
         <link rel = "stylesheet" type = "text/css" href = "style.css"/>
  
     <body>
         <!-- 工具条/菜单栏 -->
         <div class = "topdiv" style="margin-bottom:">
             <img style = "margin-right:5px" src="1.png"/>
             <span class="bold">最新动态</span>
             <span class="fright">设置</span>
             <img class="fright" style = "margin-right:5px" src="2.png"/>
         </div>
         <div id="left" class = "fleft" style="margin-right:15px">
             <img src="4.png" /><br/><br/>
             <span style="padding:5px;background-image:url(5.png)">6551</span>
         </div>

          <!-- 回答内容主体 -->
          <div id="right" class = "fleft" style="margin-bottom:23px">
              <div class="category" style="margin-bottom:5px">
                  <span>热门回答，来自 机械 </span>
                  <a href="#nowhere">关注话题</a>
                  <img class="fright" src="3.png"/>
              </div>

              <a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a><br/>
              <p class="author"><strong>Vincent Fu</strong>, Materials Science, PhD</p>
              <img class = "fleft" src="6.png" style="margin-right:15px;"/>
              <!-- div默认是会占100%父容器的宽度，因此需要设置为float，使其不占左边图片的空间 -->
              <!-- 如果不想设置float或者不想使用div，换成p标签同样也可以实现 -->
              <p class = "content">	说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... <a href="#nowhere">显示全部</a></p>
             
              <div class="bottomdiv">
                  <img src="7.png"/>
                  <span>  关注问题  </span>
                  <img src="8.png"/>
                  <span>  867条评论  </span>
                  <img src="9.png"/>
                  <span>  作者保留权利  </span>
              </div> 
          </div>
          <div class="enddiv" style="clear:left;border-bottom:1px solid #eee"></div>

     </body>

</html>

虚心求学
答案时间：2024-07-24

本题代码

代码超过 5行，点击查看

------------------------ css文件 ----------------------------
 
div.blogItem{
    margin-top:80px;
    margin-left:80px;
    width: 47%;
    border-bottom:1px solid #eee;
}
div.top{
    font-family:宋体;
    height : 30;
    margin-bottom:15px;
    border-bottom:1px solid #c0c0c0;
    font-size:12px;
}
div.topL{
    font-weight:bold;
    float:left;
    top:40;
    left:40;
}
div.topR{
    float:right;
    top:40;
    right:15%;
}
div.topR img{   
    float:left;
    margin-right:5px;   
}
div.topL img{   
    margin-right:12px;  
}
div.head{
    margin-right:15;
    float:left;
    width:38px;
    height:38px;
}
div.exit{
    margin-right:10px;
    float:right;
}
a{
    color:#369;
    text-decoration:none;
}
p.label{
    font-family:微软雅黑;
    font-size : 13px; 
    margin-top:-1;
    margin-bottom:-1px;
}
p.title{
    font-family:微软雅黑;
    font-weight:bold;
    font-size : 14px;
    margin-top : 3;
    letter-spacing:0.4;
}
 
div.count{
    font-size : 10px;
    padding:5px;
    position:relative;
    height:20;
    width:45px;
    float:left;
}
div.absCount{
    position:absolute;
    left : 0;
    top:0;
}
font.num{
    font-family:宋体;
    font-size:12.5px;
    position:relative;
    color:#777;
    padding-down:1;
}
p.author{
    font-size : 12px;
}
div.picture{
    clear:left;
    margin-left:50px;
    margin-right:15px;
    float : left;
}
div.content{
    font-size : 13px;
    font-family:宋体; 
    line-height : 165%;
}
div.extend{
    clear:left;
    margin-top:25px;
    margin-left:45px;
    color:#a9a9a9;
    font-size:13px;
    margin-bottom:25px;
}
div.extend img{
    margin-left:3px;
    margin-right:5px;
}
 
<!--------------------- html 文件 ------------------------->
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<link rel = "stylesheet" type = "text/css" href = "./css/style.css"/>
 
 
<div class = "blogitem">
 
    <div class = top>
       <div class="topL"><img src = "./img/1.png"/><span>最新动态<span></div>
       <div class="topR"><img src = "./img/2.png"/>设置</div>
    </div>
 
    <div class = "head">
        <img src = "./img/4.png">
    </div>
    <div class = "exit">
        <img src = "./img/3.png"/>
    </div>
 
    <div class="headline">
        <p class = "label">热门回答，来自&nbsp;&nbsp;机械&nbsp;&nbsp;
        <a class="careLink" href="#nowhere">关注话题</a></p>
        <p class = "title"><a class="careLink" href="#nowhere">人类史上令人叹为观止的极限精度制造成果有哪些？</a></p>
    </div>
 
    <div class = "count">
        <div class = "absCount">
            <img class = "cbg" src = "./img/5.png"/>
        </div>
        <font class = "num">6551</font>
    </div>
    <p class = "author"><strong>Vincent Fu</strong>,&nbsp;&nbsp;Materials Science,&nbsp;&nbsp;PhD</p>
 
    <div class = "picture">
        <img src = "./img/6.png"/>
    </div>
    <div class = "content">
         说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料的性能，
         握在手里把玩是远远不够的，就算拿放大镜离近了看，也只能看到表面的一些坑坑洼洼，
         而为了知晓一种材料的纤维结构，科学家至少要到纳米级（放大千倍），如果要获得更深...
        <a href="#nowhere">显示全部</a>
    </div>
 
    <div class = "endline">
        <div class="extend">
            <span><img src = "./img/7.png"/>关注问题</span>
            <span><img src = "./img/8.png"/>867条评论</span>
            <span><img src = "./img/9.png"/>作者保留权利</span>
        </div>
    </div>
 
</div>

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

2022-12-06 这样应该还好

54Mozu

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

新写的一个

<!DOCTYPE html>
<head>
    <title>综合练习1</title>
    <link rel="stylesheet" href="zongh1.css" type="text/css">
</head>
<body>
    <div id="l1">
        <img src="img/1.png" id="p1">
        <span id="l11">  最新动态</span> 
        <span id="l12">设置</span>
        <img src="img/2.png" id="p2">
    </div>
    <div class="content">
        <div class="I">
            <div id="l21" style="float: left;">
                <img src="img/4.png" id="p4" >
                <br>
                <div id="l211">
                    <span id="l211" style="background-image:url(img/5.png);padding: 2px;">
                        6551
                    </span>
                </div>
            </div>

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


    </div>
    


    
</body>



下面是css内容
img#p1{
    position: fixed;
    left: 8px;
    top: 8px;
}
span#l11{
    position: fixed;
    left: 38px;
    top: 8px;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
}
img#p2{
    position: fixed;
    right: 48px;
    top: 8px;
}
span#l12{
    position: fixed;
    right: 8px;
    top: 3px;
}
div#l1{
    display: block;
    width: 100%;
    border-bottom: gainsboro 2px solid;
    position: fixed;
    top: 32px;
    color: gray;
    float: left;
}
div.content{
    position: relative;
    top: 50px;
    width: 100%;

}
div.I{
    margin-top: 10px;
    border-bottom: gainsboro 2px solid;
}
img#p3{
    float: right;
    margin-right: 30px;
}
img#p4{
    /* float: left;*/  
    margin-bottom: 10px;
}
div#l22{
    margin-left: 60px;
    margin-bottom: 30px;
}
span#l21{
   /* margin-left: 20px;*/    
   color: gray;
}
a#l21{
    margin-left: 15px;
    text-decoration: none;
    color: cornflowerblue;
}
a#l22{
    display: block;
   /* margin-left: 58px;*/
    margin-bottom: 10px;
    text-decoration: none;
    color: cornflowerblue;
    font-weight: bold;

}

img#p6{
    margin-top: 15px;
    margin-right: 15px;
    float: left;
}
div#l221{
    margin-top: 15px;
    width: 650px;
}
a#l221{
    text-decoration: none;
    color: cornflowerblue;
}
div#l23{
    margin-left: 60px;
    margin-bottom: 20px;
}
img#p7{
    margin-left: 5px;
    margin-right: 5px;
}
img#p8{
    margin-left: 5px;
    margin-right: 5px;
}
img#p9{
    margin-left: 5px;
    margin-right: 5px;
}
span#l231{
    /* margin-left: 20px;*/    
    color:gainsboro;
 }

2 个答案

CharlieLong
答案时间：2023-10-26

综合练习答案

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>豆瓣</title>
</head>
<style>
  div.frame{width: 680px;height: 280px;position:relative;left: 20px;top:20px;}
  div.continer1,div.continer2{border-bottom: solid 1px rgb(208,208,208)}
  div.continer1{padding-top: 5px}
  div.continer2{height:240px;margin-top: 10px;}
  div.continer2_left{float: left;height:100%;display: table-cell;}
  div.continer2_right{height: 100%;display: table-cell;padding-left: 10px}
  img{position: relative;top:1px;cursor:pointer}
  .font_general{font-family: 'Heiti SC';font-size: 14px;color: rgb(104,104,104)}
  .font_a{font-family: 'Heiti SC';font-size: 14px;color: rgb(83,116,159);margin: 0 5px;cursor: pointer}
  .continer2_right_bottom{margin: 4px 0}
  div.continer2_right_bottom span{margin: 0 5px;font-size: 13px;color: rgb(155, 155, 155)}
</style>
<body>
<div class="frame">
  <div class="continer1" style="height: 30px">
    <span><img src="img_Douban/1.png"></span>
    <span style="margin: 0 10px;font-family: 'Heiti SC';font-weight: bold;font-size: 15px;color: rgb(104,104,104)">最新动态</span>
    <span class="font_general" style="float: right"><img src="img_Douban/2.png" style="margin:0  5px;">设置</span>
  </div>
  <div class="continer2">
    <div class="continer2_left">
      <div >
        <img src="img_Douban/4.png">
      </div>
      <div style="background-image: url(img_Douban/5.png);text-align: center;font-size: 14px;color: rgb(104,104,104)">
        6551
      </div>
    </div>
    <div  class="continer2_right">
      <div><span class="font_general">热门回答，来自 机械</span><span class="font_a">关注话题</span><span style="float: right"><img src="img_Douban/3.png"></span></div>
      <div><span style="font-family: 'Heiti SC';font-size: 14px;color: rgb(83,116,159);font-weight: bold;">人类史上令人叹为观止的极限精度制造成果有哪些？</span></div>
      <div style="margin: 10px;"><span style="text-transform: capitalize;font-weight: bold;font-size: 14px">vincent fu, </span><span style="text-transform: capitalize;font-size: 14px">materials science, phd</span></div>
      <div style="float: left;display: table-cell;">
        <img src="img_Douban/6.png" >
      </div>
      <div style="display: table-cell;padding: 0px 10px">
          <span style="font: 14px 'fangsong';">说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...</span>
          <span class="font_a">显示全部</span>
      </div>
    </div>
      <div class="continer2_right_bottom" >
        <img src="img_Douban/7.png"><span class="font_general">关注问题</span>
        <img src="img_Douban/8.png"><span class="font_general">867条评论</span>
        <img src="img_Douban/9.png"><span class="font_general">作者保留权利</span>
      </div>
    </div>
  </div>
</div>
</body>
</html>

LUO萝北
答案时间：2023-05-30

代码超过 5行，点击查看

<!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>Document</title>
    <style>
        .top{
            position: fixed;
            width: 400px;
            top: 10px;
            left: 10px;
            border-bottom: 1px solid black;
        }
        #span1{
            float:right;
        }
        .gray{
            color: gray;
        }
        #span2{
            background-color: rgb(202, 201, 201);
            border-radius: 10%; 
            font-size: 0.9em;
        }
        #pic3{
            float:right;
        }
        #table1{
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="top">
        <img src="img/1.png" alt="" id="pic1">
        <b><span>最新动态</span></b>
        <b><span id="span1"><img src="img/2.png" alt="" id="pic2">设置</span></b>
    </div>
    <div style="clear:both"></div>
    <hr>
    <table id="table1">
        <tr>
            <td rowspan="2">
                <img src="img/4.png" alt="" id="pic1">
            </td>
            <td>
                <span class="gray">热门回答，来自 机械 <a href="#">关注话题</a></span>
                <img src="img/3.png" alt="" id="pic3">
            </td>
        </tr>
        <tr>
            <td>
                <a href="#"><span>人类历史上令人叹为观止的极限精度制造成果有哪些？</span></a>
            </td>
        </tr>
        <tr>
            <td>
                <span id="span2" class="gray">6551</span>
            </td>
            <td>
                <span><b><span>Vincent Fu,</span></b>b>Msterials Sciencxe, PhD</span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <table>
                    <tr>
                        <td>
                            <img src="img/6.png" alt="" id="pic1">
                        </td>
                        <td>
                            <span>在上面的示例中，第一行的第二个单元格会跨越两列，<br>
                                合并成一个单元格。合并行（垂直合并）：使用 rowspan <br>
                                属性来指定要合并的行数。该属性应用于需要合并的单元<br>
                                格，其值为合并的行数。</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img src="img/7.png" alt="" id=>
                <span class="gray">关注问题</span>
                <img src="img/8.png" alt="" id=>
                <span class="gray">867条评论</span>
                <img src="img/9.png" alt="" id=>
                <span class="gray">作者保留权利</span>
                    
            </td>
        </tr>
    </table>
</body>
</html>

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

2022-11-22 写成这样，算是屎山吗？TAT

dongdayo

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

body里写了134行，对比各位作业后，人傻了。。

<body>
    <style>
        .first{
            padding: 25px 0;
            width:100%;
            height: 25px;
            vertical-align: middle;
        }
        .first_left{
            width:200px;
            float:left;
            padding:0px 0px 0px 20px;
            font-weight:bold;
            font-size:15px;
        }
        .first_right{
            width:50px;
            float:right;
            font-size:10px;
            overflow:hidden;
        }
        .second{
            height:300px;
            width:100%;
            position:absolute;
            border-bottom:2px solid lightgray;
            border-top:2px solid lightgray;
        }
        .second_head{
            float:left;
            width:50px;
            margin:20px 20px 0 20px;
        }
        #follower_number{
            line-height:2;
            background-image:url(img/5.png);
            font-size:14px;
            text-align:center;
            margin:5px 0 0 0;
            color:black;
        }
        .second_title{
            margin:20px 0 0;
            line-height:1.7;
        }
        .second_close{
            width:21px;
            float:right;
            overflow:hidden;
            margin:20px;
        }
        #location{
            font-size:10px;
        }
        .content_preview{
            width:80%;
            padding:0 90px 30px;
        }
        .picture_preview{
            width:200px;
            float:left;
        }
        .text_preview{
            overflow:hidden;
            line-height:1.5;
            padding-left:10px;
        }
        a{
            color:rgb(0, 200, 255);
            text-decoration:none;
        }
        a:visited{
            color:rgb(#6baadd);
        }
        .foot{
            margin:20px;
            position: absolute;
            left:50px;
            bottom:0px;
            color:lightgray;
        }
        .down_a{
            color:lightgray;
            float:bottom;
        }
    </style>

    <div class="first">
        <div class="first_left">
            <img src="img/1.png">
            <span>最新动态</span>
        </div>

        <div  class="first_right">
            <img src="img/2.png">
            <span>设置</span>
        </div>
    </div>
    <div class="second">
        <div class="second_head">
            <a href="" ><img src="img/4.png" width="50px" height="50px"></a>
            <a href=""><div id="follower_number">6565</div></a>
        </div>

        <div class="second_close">
            <img src="img/3.png">
        </div>

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

        <div id="location">
            <p><strong>Vincent Fu,</strong>Materials Science,PhD</p>
        </div>

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

        <div class="foot">
            <a href="" class="down_a"><img src="img/7.png"><span> 关注问题&nbsp&nbsp</span></a>
            <a href="" class="down_a"><img src="img/8.png"><span> 867条评论&nbsp</span></a>
            <span> · 作者保留权利</span>
        </div>
    </div>
</body>

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

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>

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

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

提问之前请登陆

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

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

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

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

上传截图