css网页布局基础3-3编程练习老师检查一下

首页课程实战体系课手记专栏慕课教程

来源：3-3 编程练习

慕码人044551

2020-06-08 19:58:46

<!DOCTYPE html>

<head>

<title>Document</title>

*{margin: 0;padding: 0;}

body{min-width: 700px;}

.top,.footer{width: 100%;height: 100px;background:black;float: left;}

.tup1{float: left;} .ziti{float: right;margin-right: 30px;}

ul{list-style: none;}

span{background: red;}

.ziti ul li{

display: inline-block;

font-size: 20px;

margin-top: 15px;

padding: 20px;

color: white;}

.oo1{margin: 22px;}

.oo1 li{padding-top:20px;}

.container{padding: 0 220px 0 300px;}

.midder{width: 100%;background: blue;}

.midder1{margin-top: 50px;margin-left: 50px;padding-left: 100px;padding-top: 30px;}

.left{width: 300px;

background:greenyellow;

margin-left: -100%;

left: -300px;}

.right{width: 220px;

background: sandybrown;

margin-left:-220px;

right: -220px;}

.right1{margin-top: 20px;margin-left:20px ;}

.right1 .tnt{width: 182px;background: red;height: 30px;border: none;}

input{height: 30px;width: 180px;font-size: 8px;text-align: center;}

.midder,.left,.right{

position: relative;

float: left;

min-height: 625px;}

.footer1{text-align: center;margin-top: 30px;}

.footer1 ul li{display: inline-block;

color: white;

padding: 0 20px;

font-size: 20px;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

<ul>

<li><span>职业介绍</span>html5与css3实现业态顾问</li>

</ul>

</div>

<br>

</div>

<ul>

</ul>

</div>

</body>

</html>

写回答

1回答

好帮手慕粉

2020-06-09

同学你好，关于同学的问题回答如下：

1、网页头部的logo图超出了父容器：

这是因为图片是内联样式，底部自带默认间隙，可以设置为块级元素清除：

2、头部右侧的导航项没有实现垂直居中：

不建议同学通过间距的方式实现，因为这样计算是很麻烦的，而且不能计算准确。建议同学通过行高等于高度实现：

3、网页主体部分的右侧，表单部分的内容没有显示完全：

同学可以适当的将宽度调整的大一点，让里面的占位符显示完全。

4、页脚部分，没有去除a标签的默认样式，有下划线，且没有实现垂直居中显示：

修改参考：

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

0 学习 · 40143 问题

查看课程

相似问题

老师，我的问题是“CSS基础布局”中的3-3b编程练习。

回答 1

老师麻烦帮我检查下 css网页布局基础2-14

回答 1

老师，我的问题是“CSS网页布局基础”中的3-3编程练习。

回答 1

老师，我的问题是CSS网页布局基础中的2-10编程练习。

回答 1

这个基础课没有flex布局内容吗

回答 2

打开慕课网App查看更多内容