how2j.cn

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

工具版本兼容问题
用到的图片在右侧



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


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


问答区域    
2022-08-04 我这个算是好理解一点的了吧,修修补补用了点时间
M_GX




加了注释,可以看一下相对应块的作用
<!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 我的代码可能是最乱的了,不会排版啊
田萬




我的代码可能是最乱的了吧
加载中
<!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



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-03-20 还是要活学活用啊
2022-03-19 comprehensive exercise
2022-03-14 搞了一上午 前端好难


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-综合性练习1 的提问

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

上传截图