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

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

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

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

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

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

问答区域

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>

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

2020-12-17 不容易啊

梦想的彼岸

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

我发现浮动设置了height影响挺大的

<!DOCTYPE html>
<html lang="en" xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>综合练习1</title>
</head>
<body>
<style>
    #main{
        width: 650px;
        height: 400px;
        border: 2px dashed lightgray;
        padding-top: 20px;
        padding-left: 30px;
    }
    div{
        width: 600px;
    }
    #tople{
        float: left;
        font: bold 10px 宋体;
    }
    #topri{
        float: right;
        font:lighter 10px 宋体;
    }
    .imgle{
        float: left;
        margin-right: 5px ;
    }
    .imgri{
        float: left;
        margin-right: 5px ;
    }
    #line{
        border-bottom: 2px solid lightgray;
    }
    #botle{
        width: 40px;
        height: 300px;
        float: left;
        margin-right: 10px;
    }
    #botle p{
        background-color: lightsteelblue;
    }
    #fon1{
        font: lighter 8px 宋体;
        margin-right: 5px;
    }
    #d1{
        /*position: relative;*/
        /*left:180px;*/
        /*top: 0;*/
        width: 600px;

    }
    #fon2{
        font:  8px 宋体;
        color: #336699;
    }
    #fon3{
        font:  bold 10px 宋体;
        color: #336699;
        margin-top: 5px;
    }
    #d2{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #fon4{
        font:bold 12px 微软雅黑;
        word-spacing: 2px;
    }
    #fon5{
        font: 12px "Times New Roman";
        word-spacing: 2px;
    }
    #d3{
        width: 200px;
        height:120px;
        float: left;
        margin-right: 10px;
    }
    .left{
        float: left;
        margin-right: 8px;
    }
    #fon6{
        font: 10px 黑体;
        margin-left: 5px;
        text-align: left;
        margin-right: 5px;
       line-height: 200%;
    }
    #fon7{
        font: 10px 黑体;
        color: #336699;
    }
    .bott{
        width: 600px;
        font: lighter 8px 宋体;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #l2{
        border-bottom: 2px solid lightgray;
    }
    a{
        text-decoration: none;
    }
</style>
<div id="main">
<div>
    <p id="tople"><img class="imgle" src="../picture/css_1/1.png"/><a href="">最新动态</a> </p>
    <p id="topri"><img  class="imgri" src="../picture/css_1/2.png"/><a href="">设置</a> </p>
    <p id="line" style="clear: both"></p>
</div>
<div id="botle">
<img src="../picture/css_1/4.png">
    <p>6551</p>
</div>
<div style="width: 600px">
    <a href=""><img style="float: right" src="../picture/css_1/3.png"></a>
    <div id="d1"><span id="fon1">热门回答，来自 机械</span><span id="fon2"><a href="">关注话题</a> </span></div>
    <div id="fon3"><a href=""> 人类史上令人叹为观止的极限精度制造成果有哪些？</a></div>
    <div id="d2"><span id="fon4">Vincent Fu,</span><span id="fon5">Materials Science, PhD</span> </div>
    <div id="d3"><img  class="left" src="../picture/css_1/6.png"></div>
    <p id="fon6">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，
        就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，
        科学家至少要下到纳米级（放大千倍），如果要获得更深...<span id="fon7"><a href="">显示全部</a></span> </p>
    <span class="bott">
        <p class="left"><a href=""><img class="left" src="../picture/css_1/7.png"/></a>关注问题</p>
        <p class="left"><a href=""><img class="left" src="../picture/css_1/8.png"/></a>867条评论</p>
        <p class="left"><a href=""><img class="left" src="../picture/css_1/9.png"/></a>作者保留权利</p>
    </span>
    <div style="clear: both "></div>
    <div id="l2"></div>
</div>
</div>
</body>
</html>

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

2020-09-16 class="show1"为什么加个1，整个边框颜色都不见了

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

提问之前请登陆

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

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

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

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

上传截图