how2j.cn

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

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



步骤 1 :

练习-综合练习1

edit
练习-综合练习1


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


问答区域    
2020-01-16 交作业
夏落依




交作业
加载中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css练习</title>
</head>
<style>
.floatright{float:right}
.floatleft{float:left}
.bold{font-weight:bold}
#top{border-bottom-style:solid;
      border-bottom-color:silver;
      border-bottom-width:1px;
      padding-bottom:10px;
      margin-bottom:10px;
	  font-family:宋体;
	  font-size:12px;
	  color:#555;}
#left{float:left;
      margin-right:10px;}
body{
    font-family:"宋体";
    font-size:13px;
    color:#666666;
    width:643px;
    }
a{
    text-decoration: none;
	font-size:13px;
    }
#bottom{border-bottom-style:solid;
      border-bottom-color:#CCC;
      border-bottom-width:1px;
      padding-bottom:10px;
      margin-bottom:10px;
	  font-family:宋体;
	  font-size:12px;
	  color:darkgray;
	  }
</style>

<body>
<div id="top">
<img style="margin-right:5px" src="1.png"> 
<span class="bold">最新动态</span> 
<span  class="floatright">设置</span> 
<img  style="margin-right:5px" class="floatright" src="2.png"> 
</div>
<div id="mid">
<div id="left">
<img style="margin-right:5px;padding:0px 0px 10px 0px" src="4.png"> <br />
<span style="background-image:url(5.png);padding:6px;font-size:12px;color:#666;">6551</span>
</div>
<div id="right">
<span style="font-size:14px;color:#666;">热门回答,来自 机械</span>
<a href="">关注话题</a>
<a class="floatright" href=""><img src="3.png"> </a>
<br /><br />
<a class="bold" href="">人类史上令人叹为观止的极限精度制造成果有哪些?</a>
<p style="font-size:13px;"><strong>Vincent Fu</strong>,Materials Science,PhD</p>
<img class="floatleft" style="margin-left:60px;margin-right:20px" src="6.png"/>
<p style="font-size:13px; line-height:180%">说到精度,就不得不提在材料学中最重要的一个方面:表征。要项研究一种材料性能,握在手里把玩时远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深...<a href="">显示全部 </a> </p> 	
</div>
</div>
<div id="bottom">
<a href=""><img style="margin-left:60px;" src="7.png"></a>
<span>关注问题</span>
<a href=""><img src="8.png"> </a>
<span>867条评论</span>
<img src="9.png"> 
<span>作者保留权利</span> 
</div>
</body>
</html>

							





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





2020-01-10 小企业的前端Time-CSS 综合性练习1
小企业哒




样式用的太多显得有些繁杂
加载中
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>综合性练习1</title>
    </head>
    
    <body>
        <style>
            body{
                /*设置默认格式:14像素,灰色,占据空间的50%*/
                font-size:14px;
                color:Gray;
                width:50%;
            }

            div.border{
                /*设置边框属性:下边框1ps,实线,粉色*/
                border-bottom:1px solid Pink;
                padding-bottom:12px;
                margin-bottom:12px;
            }
            
            span.title{
                /*设置标题属性:16像素,加粗,绿色*/
                font:normal bold 16px "default";
                color:#B0D0A0;
            }
             
            .fl{
                /*向左浮动*/
                float:left;
            }
            
            .fr{
                /*向右浮动*/
                float:right;
            }
            	
            div.leftblock{
                /*设置头像测块属性:向左浮动,外边框向右10像素,高300像素*/
                float:left;
                margin-right:10px;
                height:300px;
            }
	
            div.background_image{
                /*设置头像侧下方背景,内边距5像素*/
                background-image:url(素材/HomeWork1/small_background.png);
                padding:5px;
            }
	
            a{
                /*设置超链属性:无下划线,蓝色,内边框向右10像素*/
                text-decoration:none;
                color:SkyBlue;
                padding-left:10px;
            }
	
            p.p1{
                /*设置文字属性:10像素,红色*/
                font:normal normal 10px "default";
                color:red;
            }
            p.p2{
                /*设置文字属性:加粗,14像素,蓝色*/
                font:normal bold 14px "default";
                color:LightSkyBlue;
            }
	
        </style>
        
        <div class="border">
            <span class="title">
                <img style="margin-right:10px" src="素材/HomeWork1/directory.png"/>最新动态
            </span>
	
            <span class="fr">
                <img style="margin-right:10px" src="素材/HomeWork1/setting.png"/>设置
            </span>
        </div>

        <div class="border">
            <div class="leftblock">
                <img class="fl" style="margin-bottom:10px" src="素材/HomeWork1/head_portrait.jpg"/><br/><br/><br/>
                <div class="background_image">52939</div>
            </div>

            <div>
                <img class="fr" src="素材/HomeWork1/exit.png"/>
                <p class="p1">热门回答,来自 动漫<a href=" ">关注话题</a>
                <p class="p2">柚子社(Yuzu-Soft)都有哪些好玩的作品?</p>
                <p class="p3"><strong>小企业</strong>, 绅士学科, 绅士学位</p>	
                <img class="fl" style="margin-right:10px" src="素材/HomeWork1/senrenbanka.jpg"/>

                <div>
                    <p>千恋*万花(柚子社制作的Galgame)</p>
                    <p>《千恋*万花》是由Yuzu-Soft (ゆずソフト)制作的一款美少女游戏,于2016年7月29日在日本本土发售,是柚子社的第9作,也是其十周年纪念作品。</p>
                    <p>公开同时也宣布将被改编成同名漫画,漫画版由季月えりか作画,于Media Factory 旗下的漫画杂志月刊Comic Alive连载。2018年12月21日...<a href=" ">显示全部</a></p>
                </div>  
            </div>
            
            <div class="p1" style="color:LightGray">
                <img src="素材/HomeWork1/attention.png"/>
                <span >关注问题</span>
                <img src="素材/HomeWork1/comments.png"/>
                <span>529条评论</span>
                <img src="素材/HomeWork1/point.png"/>
                <span>作者保留权利</span> 
            </div>
        </div>
    
    </body>
</html>

							





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





2019-11-25 这个line-height:170%是怎么算出来的,
2019-11-24 答案里padding-bottom:10px; 为什么是10px; 我用PS 量了尺寸,但不是10px呀?
2019-11-14 作业
2019-10-22 提交作业
2019-10-18 作业
2019-10-17 交作业
2019-10-16 交作业
2019-09-27 交作业
2019-09-23 交作业
2019-09-17 交作业
2019-09-02 什么时候用id 什么时候用class?
2019-08-26 练习-综合练习1
2019-08-01 查看答案后有个地方很不解
2019-07-28 交作业
2019-07-25 交作业
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-23 ZZ交作业 CSS-综合性练习1
2019-07-22 。。。。
2019-07-15 综合练习1
2019-06-08 写作业
2019-06-04 交作业
2019-05-29 提交作业,有点粗糙,还是交了吧
2019-05-27 交作业
2019-05-27 交作业
2019-04-23 来交一次作业
2019-04-21 提问
2019-04-18 代码详解(自己看的)
2019-03-23 交作业
2019-03-14 第一次交作业,好紧张
2019-02-28 建的CSS写的 基本上全是用的相对定位布局 不知道怎么写将就把
2019-02-25 我知道知乎这个剑桥材料学博士。。。
2019-02-18 交作业啦
2019-01-24 大概也就这个意思 调着太麻烦 这也不对那也不对
2018-12-24 交作业
2018-12-13 作业
2018-12-04 交作业
2018-11-28 感觉CSS代码太乱了,而且取class名很头痛
2018-11-26 交作业!
2018-11-20 为什么和答案差不多,但是确实这样的结果?
2018-11-15 交作业
2018-11-14 交作业
2018-10-01 交作业
2018-09-19 第一次交作业
2018-09-03 交作业
2018-08-26 全用div硬撸出来的,看来我不适合搞前端
2018-08-25 id="left'什么意思?
2018-08-02 第一次交作业
2018-08-02 给各种div起名真的好烦
2018-07-17 感觉我写的有点多……几乎每个地方都用DIV套住了
2018-06-18 不知道写的怎么样,还可以如何简便些
2018-06-02 作业
2018-04-24 做的不好大家将就看看,哈哈
2018-04-12 终于做了个样子
2018-03-13 作业做的不对,求指点
2018-03-08 交作业
2018-02-24 交作业 写的好乱 全是DIV没事么...
2018-01-29 这个div怎么不在左边
2018-01-29 这个div怎么不在左边
2018-01-29 怎么嵌套两个div这个布局就不对了
2018-01-18 怎么才能随浏览器的大小进行自适应?
2017-12-25 关于边框模型的问题
2017-12-21 交作业。。 菜鸟一只 做了两个小时
2017-12-15 交作业啦
2017-12-15 交作业啦
2017-11-24 请老师检阅一哈
2017-11-24 不熟练花了3小时吧
2017-11-20 花了一小时写的 希望能让老师满意
2017-11-20 本菜鸟写的
2017-09-17 为什么右边的部分是靠 width:367px撑起来的?
2017-09-09 写了一个小时 请批改作业啊老师
2017-09-07 图片和文字不在同一水平
2017-08-21 改变了body的宽度为800px后,为什么只有第一个div改变宽度,其他的不变啊。
2017-08-10 插入img,img默认显示位置不贴着边
2017-08-04 写了一晚上,感觉写的很乱,div套div
2017-06-04 <div style="clear:left;"></div><br>加和不加的区别
2017-06-02 对span元素设置margin-right为什么没有效果?
2017-06-01 关于代码的问题
2017-06-01 line-height=170%是什么意思
2017-06-01 站长,你这个边距是用什么测的啊,还有颜色
2017-05-12 class的问题
2017-04-13 内联元素能直接设置margin和padding吗?
2017-03-19 端技术-CSS-综合性练习1 -练习-综合练习1 的提问
2016-06-02 关于阶段练习的答案




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

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

上传截图