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

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

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

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

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

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

问答区域

2021-04-16 布局好难，搞得头晕眼花

DDQ

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

布局用了好久，反反复复搞了好久，发现站长的代码基本不用id选择器，我用了很多个，直接搞得页面乱七八糟，然后去搜索了HTM/CSS规范看了一下，太费劲了，菜的离谱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width: 30%;
            font-family: 宋体;
            color: #2aabd2;
            font-size: 15px;
        }

        div.topdiv{
            height: 30px;
            border-bottom-style: solid ;
            border-bottom-width: 2px;
            border-bottom-color: blue;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .clearLeft{
            clear:left;
        }

        .floatleft{
            float: left;
        }

        .floatright{
            float: right;
        }

        .bold{
            font-weight: bold;
        }

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

    </style>
</head>
<body>
    <div class="topdiv">
        <img style="margin-right: 5px" src="image/1.png">
        <strong>最新动态</strong>
        <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="background-image: url(image/5.png); padding:5px">6551</span>
    </div>

    <div>
        <div style="border-bottom: 5px">
            <span>热门回答，来自  机械</span>
            <a href="#">关注话题</a>
            <img class="floatright" src="image/3.png"><br>
            <a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
            <p>
                <strong>Vincent Fu, </strong>Materials Science, PhD
            </p>
            <img  style="float: left;margin-left: 60px " src="image/6.png">
        </div>
        <div>
             <p style="line-height:170%;margin-left:15px;">
                    说到法国红酒看来的撒咖啡机爱丽丝的反抗军；爱上了的咖啡机
                    说到法国红酒看来的撒咖啡机爱丽丝的反抗军；爱上了的咖啡机
                    说到法国红酒看来的撒咖爱上了的。。。
             <a>显示全部</a>
             </p>
            <br>
        </div>
        <div style="float: left;margin-left: 60px ">
            <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>

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

2021-03-24 终于做完了

镜子里的笑脸

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

做了好久，终于做完了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB2312">
    <title>综合性练习1</title>
    <style>
        body{
            font-size:13px;
            font-family: "Adobe 宋体 Std L";
            width:80%;
            color:#666666;
        }
        div.d1{
            width:100%;
            height:100%;
            border-top-style: solid;
            border-bottom-style: solid;
            border-color: lightgrey;
            margin:15px 0px;
        }
        div.d2{
            width:40px;
            height:300px;
            float:left;
            margin:20px 20px 0px 0px;
        }
        div.d3{
            color: lightgray;
            margin:25px 0px 20px 0px;

        }
        .p1{
            background-image: url("img/5.png");
            padding: 5px;
        }

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

    </style>
</head>

<body>

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

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

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

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

2021-02-05 终于做出来了

chumyuenlaw

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

个人感觉最重要是要理解float的作用，在float这块摔了很多跟头。最好顺着思路来设计

<html>
	<style>
		body{
			font-family:"宋体";
			font-size:13px;
			color:#666666;
			width:643px;
		}
		a{
			text-decoration:none;
		}
		
		.left{
			float:left;
		}
		.right{
			float:right;
		}
		.clearBoth{
			clear:both;
		}
		.clearLeft{
			clear:left;
		}
		.imgLeft{
			margin-right:7px;
		}
		.imgRight{
			margin-right:2px;
		}
		.border{
			width:100%;
			padding-top:10px;
			margin-top:10px;
			border-top-style:solid;
			border-top-color:lightgray;
			border-top-width:2px;
		}
		.like{
			padding:4px;
		}
		.textSetting{
			line-height:170%;
			width:367px;
		}
		
		#blueColor{
			color:blue;
		}
		#fontBlackAndBold{
			color:black;
			font-weight:bold;
		}
		#fontBlueAndBold{
			color:blue;
			font-weight:bold;
		}
	</style>
	
	<body>
		<div class="left">
			<img class="imgLeft" src="1.png">   <a id="fontBlackAndBold" href="https://www.baidu.com">最新动态</a>
		</div>
		<div class="right" >
			<img class="imgRight" src="2.png">  <a id="lightGrayColor" href="https://www.baidu.com">设置</a>
		</div>
		<div class="clearBoth"></div>
		<div class="border"></div>
		
		<div class="left" style="margin-right:15px">
			<img src="4.png">
			<br/>
			<br/>
			<span class="like" style="background-image:url(5.png)">6551</span>
		</div>
		
		<div class="left" style="width:585px;">
			<div style="margin-bottom:5px">
				<span>热门回答，来自  机械</span>
				<a style="color:#336699" href="https://www.baidu.com">关注话题</a>
				<img class="right" src="3.png">
			</div>
			
			<a href="https://www.baidu.com" id="fontBlueAndBold">人类历史上令人叹为观止的极限精度制造成果有哪些？</a>
			<br/>
			<p><strong>Vincent Fu,</strong> Materials Science, PhD</p>
			
			<img style="margin-right:10px left" src="6.png">
			<div class="textSetting right">
				说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料特性，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
				<a href="https://www.baidu.com" id="blueColor">显示全部</a>
			</div>
			
			<div>
				<br/>
				<img src="7.png">
				<a href="https://www.baidu.com">关注问题</a>
				<img src="8.png">
				<a href="https://www.baidu.com">867条评论</a>
				<img src="9.png">
				<a href="https://www.baidu.com">作者保留权利</a>
			</div>
		</div>
		
		<div class="clearBoth"><br/></div>
		<div class="border"></div>
	</body>
</html>

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

2021-01-12 弄了一点上去

哥是菜鸟

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

把图片上弄进去应该就差不多了吧，稍微调下图片大小，效果有些偏查，没全部弄出来，自己写的代码好烂，可维护性感觉达到0，讲究参考下就好

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习一</title>
</head>
<body>
  <style>
    .div0{
      border:1px dotted LightSkyBlue;
      width: 800px;
      height:400px;
    }
    .div1{
       border:1px dotted LightSkyBlue;
       border-bottom:1px solid LightSkyBlue;
       position:absolute;
       width: 700px;
       height:30px;
       margin-top:35px;
       margin-left:10px;
    }
    .div11{
       float:left;
       margin-left:0 ;
    }
     .div12{
       float:right;
       margin-right::0;
    }
    .div2{
      border:1px dotted LightSkyBlue;
      width: 700px;
      margin-top:65px;
      margin-left:10px;
      height:335px;
    }
    .div21{
      border:1px dotted LightSkyBlue;
      height:50px;
    }
    .div211{
      border:1px dotted LightSkyBlue;
      float:left;
      margin-left::10px;
      margin-right:10px;
    }
     .div3{
       width: 700px;
       margin-left::10px;
    }
    .div31{
       float:left; 
       margin-right:10px;
    } 
    .div4{
       margin-right:10px;
       margin-top:20px;
       height:120px;
    }
     .div41{
       border:1px dotted LightSkyBlue;
       height:120px;
       width:200px;
       float:left; 
       margin-left:47px;
    }
    .div42{
       border:1px dotted LightSkyBlue;
       height:120px;
    }
    .div5{
        border-bottom:1px solid LightSkyBlue;
        height:50px;
        margin-left:47px;
        margin-top:30px;
    }
  </style>
<div class="div0">
    <div class="div1" >
        <div class="div11">
             <img src />文件图
             <b>最新动态</b>
         </div>
         <div class="div12">
              <img src=""/>
              <span>图标</span>
              <span>设置</span> 
          </div>
     </div>
    <div class="div2">
        <div class="div21">
            <div class="div211">头像</div>
            <div class="div212">
                 <div>   
                    <sapn>热门回答来自</sapn>
                    <sapn>机械</sapn>
                    <sapn><b><a>关注话题</a></b></sapn>
                </div>
               <div>   
                  <sapn><b><a>人类史上令人叹为观止的极限精度制造成果有哪些？</a></b></sapn>
                </div>
            </div>
          </div>
          <div class="div3">
              <div class="div31">6551</div>
              <div class="div32"><b>vincent Fu,</b> Materials Science, PhD</div> 
          </div>
          <div class="div4">
                <div class="div41">图片</div>
                <div calss="div42">
                <sapn>说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在                  手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知                  晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深<b><a                                herf="#">... 显示全部</a></b>
                 </sapn>
                </div>
          </div>
          <div class="div5">
              <span>加号</span>
              <span>关注问题</span>
              <span>符</span>
              <span>867条评论</span>
              <span>.</span>
               <span>作者保留权利</span>
         </div>
  </div>
</div>
</body>
</html>

1 个答案

哥是菜鸟
答案时间：2021-01-12

边条线有些没清楚，方便观察下结构

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

2020-12-30 需要多思考，布局

JIPING

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

终于写出来了，还是得多思考啊！很多地方的布局思路还是改了很多遍才调好！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS综合练习1</title>
</head>
<style>
    body{
        margin: 0 20px;
         font-size: 13px;
         /* font-family:Georgia, 'Times New Roman', Times, serif; */
        /* width: 600px;
        margin: auto; */
        
    }
    nav{
         
        line-height: 36px; 
        /* vertical-align: middle; */
        border-bottom: lightgray solid 1px;
        /* margin-bottom: 15px; */
    }
    nav img{
        vertical-align:middle;
        margin-right: 6px;
        /* margin:3px 6px; */
        margin-bottom: 2px;
    }
    .settings{
        color:rgb(92, 92, 92);
        float: right;
        
    }
    .topic{
        overflow:hidden;
        margin-top: 15px;
        /* background-color: #eee; */
        /* height: 30px; */
        border-bottom: lightgray solid 1px;
        padding-bottom: 24px;
        
    }
    aside{
        /* display: inline-block; */
         
        width: 10%;
        float: left;
    }
    .userpic{
        margin-bottom: 12px;
    }
    aside span{ 
        
        border-radius: 3px;
        background-color: rgb(237, 244, 250);
        padding: 4px 6px;
        margin-top: 12px;

    }
    article{ 

        width: 90%;
        float: right;;
    }
    article img{
        float: left;
        margin-right: 12px;
    }
    article p{
        line-height: 1.8;
    }
    .title {
        margin: 02px 0;
    }
    
    .tags img{
        float: right;
        margin-right: 8px;
    }

    a {
        color: steelblue;
        text-decoration: none;
    }
     
    .more:before{
        content:"...";
        color: black;
    }
    .interaction a{ 
        color:lightgray;
        margin-right: 24px;
    }
    .interaction img{
        float:none;
        margin-right: 6px;

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

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

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

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

提问之前请登陆

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

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

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

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

上传截图