前端设置画布的高度_什么我用的body 对页面高度设置没有效果

最新推荐文章于 2022-05-13 10:15:17 发布

原创最新推荐文章于 2022-05-13 10:15:17 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端设置画布的高度

本文通过示例代码介绍了如何使用CSS设置页面高度，包括body元素的高度设置，以及在实际应用中遇到的问题和解决方案。同时展示了网页布局结构，如顶部导航、内容区域和底部边框的设计。

这个是css代码

margin: 0px;

padding: 0px;

}

body{ width:100%;

height: 1000px;

background-color: #000000;

}

.top{

width: 100%;

height: 60px;

position: fixed;

margin: 0 auto;

background-color:#e7eceb;

color: white;

}

.top ul{

list-style: none;

}

.top ul li{

line-height: 60px;

text-align: center;

position: relative;

float: right; }

a{padding: 0 10px;

text-decoration: none;color: black;display: block;}

.top ul li a:hover{

color: white;background-color:black;

}

.top ul li ul{

position: absolute;left: 0;top: 40px;display: none;

}

.top ul li ul li{background-color: white;

line-height: 60px;

text-align: center;

}

.top ul li ul li a:hover{

background-color: #06f;

}

.top ul li ul li{

width: ;

}

.top ul li ul li{float: none;margin-top: 4px;}

.top ul li:hover ul{display: block;}

.centent{

width:100%;

height: 600px;

color: black;

}

.left1 img{margin-top: 65px;

width: 100%;

height: 600px;

}

.middle{

width: 100%;

height: 250px;

margin-top: 70px;

}

.left2-1{

width: 75%;

height: 320px;

float: left;

}

.left2-1 h4{

text-align: center;

}

.left2-1 p{margin-left:50px;

text-indent: 20px;

max-width: 500px;

line-height: 30px;

}

.left2-2{height: 320px;

width: 25%;

float: left;

}

.left2-2 img{

width: 100%;

}

.img-left3-1{

clear: both;

}

.img-left3-1 img{

width: 45%;

height: 400px;

float: left;

}

.text-left3-2 h4{

text-align: center;

}

.text-left3-2 p{

margin-left: 100px;

height: 400px;

width: 55%;

text-indent: 20px;

line-height: 30px;

max-width: 500px;

float: left;

}

.text-left4-1{

width: 55%;

height: 400px;

clear: both;

float: left;

}

.img-left4-2{

float: left;

width: 45%;

height: 300px;

}

.img-left4-2 img{

width: 100%;

height: 400px;

float: left;

}

.text-left4-1 h4{

text-align: center;

}

.text-left4-1 p{

margin-left: 50px;

text-indent: 20px;

line-height: 30px;

max-width: 500px;

}

.bottom {margin: 890px auto;

width: 90%;

height:1000px;

clear: both;

border-width: 1px 0 0 0 ;

border-style:dashed;

background-color: gray;

border-color: darkgray;

}

.bottom-centent{text-align:center;

margin-top: 50px;

}

.bottom-centent img{

padding: 20px;

}

.bottom-centent .text{width:80%;

height: 500px;

background-color: #000000;

margin: 0 auto;

}

下面是HTML代码：

个人博客

个人简介

朱卓，男，来自与湖北省咸宁市，2017年毕业于湖北商贸学院机电一体化专业。在大学生涯期间，让我的组织能力，管理能力应变能力大大的提升，使我具备良好的心理素质让我在竞争中有更大的优势。热爱学习热爱技术，遇到技术的问题，喜欢钻研。喜欢解决问题后给我带来的快乐。

教育经历

在大学期间学习了c语言程序设计和计算机软件基础，学习了HTML5和css.JavaScript等前端设计语言。

项目经历

利用所学的计算机知识，和前端设计语言，设计出自己的个人博客。

技能介绍

熟悉html和css盒子模型，会用div布局，了解javascript构造函数和面向对象的特性和事件调用。对后端c语言有一定的了解。每天都在不断完善和加强自己，不断的加强自己的基础知识，不断的去学习新的知识。