2-11练习,求解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五月十六日</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.daohanglan{
width:100%;
height:100px;
position:fixed;
background:black;
}
.pic{
width:auto;
height:100px;
float:left;
}
.yemianzhuti{
padding-top:100px;
}
div ul{
list-style:none;
}
.list{
width:70px;
height:100px;
text-align:center;
line-height:100px;
float:right;
color:white;
}
.yemianzhuti{
min-height:1000px;
width:100%;
background:#afeeee;
}
.left{
width:30%;
height:1000px;
float:left;
position: relative;
}
.middle{
width:25%;
height:1000px;
/*border:5% solid orange;*/
float:left;
position: relative;
}
.right{
width:40%;
height:1000px;
float:right;
position: relative;
}
.kecheng{
font-family: sans-serif;
font-size:2em;
line-height:3em;
}
p{
line-height: 3em;
}
.kechengtuijian{
position: absolute;
left:20%;
top:20%;
}
.xiangguankecheng{
position: absolute;
left: 20%;
top:20%;
}
input{
width: 300px;
height:24px;
}
/*.tijiao{
color:red;
}*/
.biaodan{
position:absolute;
left:20%;
top: 20%
}
.biaodan p{
font-size:2em;
}
.yejiao{
width:100%;
height:100px;
background:black;
position:relative;
left:0;
bottom:0;
}
td{
width:300px;
height:100px;
line-height:100px;
text-align:center;
color:white;}
span{
display:block;
width:65px;
height:1em;
line-height: 1em;
background:orange;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div class="daohanglan">
<!-- 慕课网图片 -->
<div class="pic"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>
<!-- 导航项 -->
<div class="daohangxiang">
<ul>
<li class="list">手记</li>
<li class="list">猿问</li>
<li class="list">实战</li>
<li class="list">职业路径</li>
<li class="list">课程</li>
</ul>
</div>
</div>
<!-- 页面主体 -->
<div class="yemianzhuti">
<!-- 左侧 -->
<div class="left">
<div class="kechengtuijian">
<p class="kecheng">课程推荐</p>
<p><span>职业路径</span> HTML与css3实现动态页面</p>
<p><span>职业路径</span> HTML与css3实现动态页面</p>
<p><span>职业路径</span> HTML与css3实现动态页面</p>
<p><span>职业路径</span> HTML与css3实现动态页面</p>
<p><span>职业路径</span> HTML与css3实现动态页面</p>
</div>
</div>
<!-- 中间 -->
<div class="middle">
<div class="xiangguankecheng">
<p class="kecheng">相关课程</p>
<p>HTML css javascript</p>
<p>HTML css javascript</p>
<p>HTML css javascript</p>
</div>
</div>
<!-- 右侧 -->
<div class="right">
<div class="biaodan">
<p>登录</p>
<form>
<input type="text" name="yonghuming" placeholder="请输入用户名">
<input type="password" name="mima" placeholder="请输入6~12位密码">
<div class="tijiao"><input type="button" name="tijiao" value="提交" ></div>
</form>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="yejiao">
<table >
<tr>
<td></td>
<td>网页首页</td>
<td>企业合作</td>
<td>联系我们</td>
<td>友情链接</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
你好,3个问题
1:如何使的导航栏上的文字间距一样呢?
2:右边的表单,如何使按钮变成红色呢?我使用css background属性设置颜色不能实现效果。
3:如何使中间和右边设置一条橘色边框呢?我 设置中间的div{border-right:5% solid orange}未实现效果。
请赐教,谢谢。
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程



恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星