155
2023-12-26 14:34一般来说网页需要按照1024分辨率为最低标准来设计和布局，即宽度小于等于1024px，但在当下宽屏、响应式盛行，并不需要去严格按照某一尺寸去写页面，我们可以将1920×1080px做为主流屏幕分辨率来适配，网页宽度在950~1400px左右均可，高度不限制...
看到这个提问，一定是个新新新手，万事开头难，你现在还处在不知道怎么开头的时期，我写了一个简单的网页框架希望能帮到你，你可以以此为基础，参考网页个版块的布局以及你想了解的尺寸设置（看代码中的css），也可以在此基础上填充自己的主题和内容。前端页面的毕业设计要尽可能的融入学到的前端知识点，常规的页面都要有页头、导航栏或可下拉导航栏、轮播图、新闻或其他内容填充、多栏布局、底部footer这些版块构成...（示例如下图）
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.top {
height: 120px;
width: 1200px;
margin-right: auto;
margin-left: auto;
font-family: "微软雅黑";
font-size: 37px;
line-height: 120px;
color: #666;
text-indent: 35px;
background-color: #f2f2f2;
font-weight: bold;
}
.bar {
background-color: #cccccc;
height: 52px;
width: 1200px;
margin-right: auto;
margin-left: auto;
}
.bar .menu {
float: left;
height: 53px;
width: 150px;
font-family: "微软雅黑";
font-size: 16px;
line-height: 53px;
font-weight: bold;
color: #000;
text-align: center;
margin-left: 3px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #dedede;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #F60;
}
a:active {
text-decoration: none;
}
.content-all {
height: 652px;
width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
font-family: "微软雅黑";
font-size: 16px;
}
.footer {
background-color: #CCC;
height: 50px;
width: 1200px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
font-family: "微软雅黑";
font-size: 16px;
line-height: 50px;
color: #000;
text-align: center;
}
.content-all .left {
height: 650px;
width: 260px;
border: 1px solid #d2d2d2;
float: left;
background-color: #dbdbdb;
}
.content-all .middle {
height: 650px;
width: 573px;
border: 1px solid #d2d2d2;
float: left;
margin-left: 50px;
background-color: #FFF;
}
.content-all .right {
height: 650px;
width: 260px;
border: 1px solid #d2d2d2;
float: left;
margin-left: 50px;
background-color: #e8e8e8;
}
.banquan {
height: 36px;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f2f2f2;
background-image: url(http://cdn.psdhtml.cn/lxidw7.svg);
background-color: #FFF;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="top">此处为标题栏</div>
<div class="bar">
<div class="menu"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?20220119">首页</a></div>
<div class="menu"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?20220119">推荐</a></div>
<div class="menu"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?20220119">新闻</a></div>
<div class="menu"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?20220119">图库</a></div>
<div class="menu"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?20220119">关于</a></div>
<div class="menu"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?20220119">更多</a></div>
</div>
<div class="content-all">
<div class="left"> 三列布局-左侧</div>
<div class="middle"> 三列布局-中部</div>
<div class="right"> 三列布局-右侧</div>
</div>
<div class="footer">版权信息栏</div>
<div class="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/lxidw7.svg" width="1000"></a></div>
</body>
</html>
还有一个之前写的首页（含源码）也可以参考下：
html+css怎么做网页?❤️ 我往期做的很多网页设计作业成品，版式和源码等也都可以在下方我的专栏拿去参考借鉴~
网页作业设计与源码共享顶一下
(0)
0%
踩一下
(0)
0%
- 相关评论
- 我要评论
-