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

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

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

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

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

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

问答区域

2020-07-07 终于做出来了

2667227335f

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

看着还行

<html>
<head>
<meta type="text/html" charset="UTF-8">
	<style>
		div.v0{
		font-family:"宋体";
		border:solid 2px lightgray;
		width:650px;
		margin:0 auto;
		}
		div.v1{
		margin:0 auto;
		width:600px;
		height:30px;
		border-bottom:solid 2px lightgray;
		}
		
		span.s1,s2{
		float:left
		padding:5 0;
		}
		span.s3{
		float:right;
		padding:5 0;
		}
		span.s4{
		float:right;
		padding:10 0;
		}
		
		div.v2{
		position:relative;
		margin:0 auto;
		width:600px;
		height:80px;
		
		}
		span.s5{
		position:absolute;
		color:gray;
		}
		span.s6{
		position:absolute;
		left:200;
		color:lightblue;
		}
		span.s7{
		color: rgb(12, 130, 177)
		}
		span.s8{
		position:absolute;
		top:45;
		left:0;
		}
		span.s9{
		position:absolute;
		top:45;
		left:0;
		color:lightblue;
		}
		p.p1{
		position:absolute;
		top:30;
		left:50;
		}
		
		div.v3{
		position:relative;
		margin:0 auto;
		width:600px;
		height:140px;
		font-family:宋体;
		}
		div.v3_1{
		float:left;
		margin:0 20 0 0;
		}
		div.v3_2{
		line-height:150%;
		font-size:13px;
		overflow:hidden;
		
		
		}
		
			div.v4{
		position:relative;
		margin:0 auto;
		width:600px;
		height:50px;
		color:lightgray;
		text-align:center;
		}
		
	</style>
</head>
<body>
<div class="v0">

	<div class="v1">
		<span class="s1">
			<img src="1.png"/>
		</span>
		<span class="s2">&nbsp&nbsp&nbsp最新动态</span>
		<span class="s3">&nbsp&nbsp&nbsp设置</span>
		<span class="s4">
			<img src="2.png"/>
		</span>
	</div>
	
	<div clear="both"></div>
	
	<div class="v2">
		<span><img src="4.png"/></span>
		<span class="s5">热门回答，来自机械</span>
		<span class="s6">关注话题</span>
		<span class="s7">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
		<span class="s8"><img src="5.png"/></span>
		<span class="s9">6511</span>
		<p class="p1">Vincent	Fu,	<b>Materials  Science</b>, PhD</p>
	</div>
	
	<div class="v3">
		<div class="v3_1"><img src="6.png"/></div>
		<div class="v3_2">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="#" style="text-decoration:none">显示全部</a></div>
	</div>
	
	<div clear="both"></div>
	
	<div class="v4" >
		<span class="s10">
			<img src="7.png"/>关注问题&nbsp&nbsp&nbsp&nbsp
			<img src="8.png"/>867条评论&nbsp&nbsp&nbsp&nbsp
			<img src="9.png"/>作者保留权利
		</span>
	</div>
	
</div>

</body>
</html>

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

2020-07-03 为啥设置 "width:367px" 后，x 就会放到最右边，没有这个设置，就挨着左边的放？

bitbegin

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

为啥设置 "width:367px" 后，x 就会放到最右边，没有这个设置，就挨着左边的放？

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

2020-06-16 80%相似

就叫急支糖浆吧

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

成品80%相似

<html>
<head>
<meta charset="UTF-8">
</head>
<style>
body{
font-family:"宋体";
font-size:10px;
color:#666666;
width:800px;
}
div.topdiv{
border-bottom-style:solid;
border-bottom-color:silver;
border-bottom-width:1px;
padding-bottom:10px;
margin-bottom:15px;
}
.floatright{
float:right;
}
.floatleft{
float:left;
}
div.clearLeft{
clear:left;
}
div#1222 span{
color:darkgray;
}
a{
text-decoration:none;
}
div.jddw{
position: absolute;
left:280px;
top:100px;
}
div.dibu{
position: absolute;
left:65px;
top:240px;
}
</style>
<body>
<div class="topdiv">
<img style="margin-right:5px" src="1.png">
<span><strong>最新动态</strong></span>
<span class="floatright">设置</span>
<img style="margin-right:5px" class="floatright" src="2.png">
</div>
<div class="floatleft" style="margin-right:15px">
<img src="4.png">
</br>
</br>
<span style="background-image:url(5.png);padding:5px;margin-left:3px">6551</span>
</div>
<div class="floatleft">
<span>热门回答，来自 机械 <a href="#">关注话题</a></span>
</div>
<img style="margin-right:5px" class="floatright" src="3.png">
</br>
<div class="#floatleft" style="margin-top:5px;color:#336699"><strong>人类史上令人叹为观止的极限精度制造成果有哪些？</strong></div>
<div style="margin-top:10px">
<a><strong>Vincent Fu,</strong> Materials Science,PhD</a>
</div>
</br>
<img margin-right:5px" src="6.png">
<div class="jddw" style="line-height:250%;width:275px">
说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a href="#">显示全部</a>
</div>
<div class="1222 dibu">
<img src="7.png">
<span>关注问题</span>
<img src="8.png">
<span>867条评论</span>
<img src="9.png">
<span>作者保留权利</span>
</div>
<div class="clearLeft">
</div>
<div style="margin-top:50px;border-top-style:solid;border-top-width:1px;border-top-color:#ddd"> 
</div>
</body>
</html>

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

2020-06-04 随便练练

HeleneWoods

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

90%还原度，基本上HTML框架搞定了就是往里面添加内容了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #news {
            width: 600px;
            margin: 20px;
        }
        
        #head {
            border-bottom: 1px solid #CCC;
            color: rgb(110, 110, 110);
            padding: 10px 0;
            overflow: hidden;
            font-size: 13px;
        }
        
        #left {
            font-weight: bold;
            float: left;
        }
        
        #left img {
            margin-right: 5px;
        }
        
        #right {
            float: right;
        }
        
        #body {
            padding-top: 15px;
            border-bottom: 1px solid #CCC;
        }
        
        #user {
            float: left;
            margin-right: 15px;
        }
        
        #num {
            background-image: url('5.png');
            font-size: 13px;
            padding: 5px;
            color: rgb(124, 122, 122);
            margin-top: 8px;
        }
        
        #img1 {
            float: right;
        }
        
        #content {
            font-size: 13px;
            color: rgb(110, 110, 110);
            overflow: hidden;
        }
        
        #title {
            font-weight: bold;
            color: rgb(12, 130, 177);
            padding: 5px 0;
        }
        
        #author {
            margin: 10px 0;
            font-size: 15px;
            color: rgb(80, 79, 79);
        }
        
        #article img {
            float: left;
            margin-right: 13px;
        }
        
        #article {
            color: rgb(80, 79, 79);
            font-size: 12px;
            line-height: 22px;
        }
        
        #infor {
            clear: both;
            color: rgb(184, 184, 184);
            font-size: 13px;
            margin: 25px 0;
        }
        
        #infor img {
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div id="news">
        <div id="head">
            <div id="left">
                <img src="1.png"> 最新动态
            </div>
            <div id="right">
                <img src="2.png"> 设置
            </div>
        </div>
        <div id="body">
            <div id="user">
                <div id="photo"><img src="4.png"></div>
                <div id="num">6551</div>
            </div>
            <div id="content">
                <img id="img1" src="3.png">
                <div id="sub">热门回答，来自 机械
                    <font color="rgb(12, 130, 177)">关注话题</font>
                </div>
                <div id="title">
                    人类史上令人叹为观止的极限精度制造成果有哪些？
                </div>
                <div id="author"><span style="font-weight: bold;">Vincent  Fu,</span> Materials Science, PhD</div>
                <div id="article">
                    <img src="6.png">
                    <p>说到精度，就不得不提在科学中最重要的一个方面：表征。要项研究一种材料性能，提在手里把玩远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深…
                        <font color="rgb(12, 130, 177)">显示全部</font>
                    </p>
                </div>
                <div id="infor">
                    <span id="follow">
                        <img src="7.png">关注问题
                    </span>
                    <span id="comment">
                        <img src="8.png">867条评论
                    </span>
                    <span id="rights">
                        <img src="9.png">作者保留权利
                    </span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

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

2020-05-29 细活儿

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

提问之前请登陆

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

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

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

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

上传截图