本练习作业。代码中有两个问题,谢谢。

本练习作业。代码中有两个问题,谢谢。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

.header{

width: 100%;

height: 100px;

background-color: black;

font-size: 0;

position: fixed;

top: 0;

z-index: 9999;

}

.logo{

float: left;

}

.nav ul{

float: right;

width: 400px;

height: 100px;

}

.nav ul li{

float: left;


}

.nav ul li a{

text-decoration: none;

color:white;

line-height: 100px;

padding: 20px;

}


.container{

padding-top: 100px;

width: 100%;

height: 600px;

background-color: gray;

clear: both;

}


.left{

width: 30%;

height: 600px;

float: left;

margin-left: 180px;

padding-top: 40px; 

}


.middle{

width: 20%;

height: 600px;

float: left;

padding-top: 40px; 

}

.line{

width: 2px;

height: 600px;

background-color: orange;

float: left;

}

.right{

width: 29%;

height: 600px;

float: left;

margin-left: 80px;

padding-top: 40px; 


}


dt,p{ 

 font-size: 22px;    

 font-weight: bold; 

 margin-bottom: 20px;

}

dd{

padding-top: 20px;

}


span{

color: pink;


}

.username,.password,.login{

margin-top: 20px;

width: 250px;

height: 25px; /*1.表单中框框里面的提示文,如何改变其字体大小? 2. 登录按钮的长度和宽度为何跟上面两个的宽度长度不一样?看效果图感觉还有莫名的灰色框,为何呢?*/

}


.login{


background-color: orange;

color: white;

font-weight: bold;


}




.footer{

width: 100%;

height: 50px;

background-color: black;

position: fixed;

bottom: 0;

}

.footer ul{


height: 50px;


text-align: center;

}

.footer ul li{


display: inline;


line-height: 50px;

padding: 10px;


}

.footer ul li a{

text-decoration: none;

color: white;

font-size: 14px;

}


</style>

</head>

<body>

<div class="header">

<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>

<div class="nav">

<ul>

<li><a href="">课程</a></li>

<li><a href="">职业路径</a></li>

<li><a href="">实战</a></li>

<li><a href="">猿问</a></li>

<li><a href="">手记</a></li>

</ul>

</div>


</div>

<div class="container">

<div class="left">

<dl>

<dt>课程推荐</dt>

<dd><span class="pink">职业路径</span>HTML5与CSS3实现动态网页</dd>

<dd><span class="pink">职业路径</span>零基础入门Android课程</dd>

<dd><span class="pink">职业路径</span>ios基础语法与常用插件</dd>

<dd><span class="pink">职业路径</span>PHP入门开发</dd>

<dd><span class="pink">职业路径</span>Java入门开发</dd>

</dl>

</div>

<div class="middle">

<dl>

<dt>相关课程</dt>

<dd><div class="course">HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;Jquery&nbsp;&nbsp;Javascript&nbsp;</dd>

<dd><div class="course">HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;Jquery</dd>

<dd><div class="course">移动端基础&nbsp;&nbsp;移动端APP开发</dd>

</dl>

</div>

<div class="line"></div>

<div class="right">

<form>

<p>登录</p>

<input class="username" type="text" name="username" placeholder="请输入登录邮箱/手机号"><br/>

<input class="password" type="password" name="psw" placeholder="6-16位密码,区分大小写,不能用空格"></br>

<input class="login" type="submit" name="button" value="登录">

</form>

</div>

</div>


<div class="footer">

<ul>

<li><a href="#">网站首页</a></li>

     <li><a href="#">企业合作</a></li>

     <li><a href="#">人才招聘</a></li>

     <li><a href="#">联系我们</a></li>

     <li><a href="#">常见问题</a></li>

     <li><a href="#">友情链接</a></li>

</ul>

</div>


</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕星星 2019-04-10 13:52:20

你好,如果是在chrome浏览器下测试的,字体显示最小应该是12px,火狐浏览器可以显示更小的字体。

提示信息不能显示两行,如果想要输入框短一些,调整宽度就好:

http://img1.sycdn.imooc.com//climg/5cad844800012fe303930279.jpg

自己可以再测试下,如果不能解决问题,可以将你修改之后的代码粘贴上来,老师帮助你测试下。

好帮手慕星星 2019-04-10 11:15:42

你好,代码整体实现效果是可以的,页面中的问题:

1、输入框中的提示文字可以使用::placeholder来解决,参考:

http://img1.sycdn.imooc.com//climg/5cad5e0d0001829d03910138.jpg

2、按钮默认是有边框的,可以使用border属性去掉,参考:

http://img1.sycdn.imooc.com//climg/5cad5e5e0001a11003300140.jpg

输入框默认边框是2px,所以按钮的宽度要设置为254px。

3、顶部右侧的文字没有看到:

http://img1.sycdn.imooc.com//climg/5cad5e9500010ae519050116.jpg

是header中设置font-size为0的原因,可以在a标签中添加上字体大小,例如:

http://img1.sycdn.imooc.com//climg/5cad5ed80001509f03800174.jpg

祝学习愉快!

  • 提问者 情人节礼物 #1
    谢谢回复。操作之后,为何placeholder里面的文字最小只能显示16px? 我希望输入框能短点,或者里面的提示文字能两行显示。
    2019-04-10 13:17:22
提问者 情人节礼物 2019-04-09 23:03:15

帮忙看看本作业有没需要完善的地方?谢谢

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师