手把手教如何写简单前端页面

最新推荐文章于 2025-07-23 02:48:16 发布

原创最新推荐文章于 2025-07-23 02:48:16 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #源代码管理

很多学了基础前端的小伙伴们都不知道怎么去写一个PC端看的网页，在这里给大家做一个简单的页面，仅供小伙伴们参考，话不多说，放代码

在html里放入代码：

<html>
    <head>
				<meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div class="container"> 
            <div class="header">
                <div class="logo">
                    
                </div>
                <ul>
                    <li><a href="#">健康在线</a></li>
                    <li><a href="#">APP下载</a></li>
                    <li><a href="#">在线教程</a></li>
                    <li><a href="#">bios设置</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">健康论坛</a></li>
                </ul>
            </div>
            <div class="banner">
                <img src="img/banner.jpg">
            </div>
            <div class="part1">
                <div class="main">
                    <div class="main-header">
                        
                    </div>
                    <ul class="list">
                        <li><img src="img/part1-1.jpg"></li>
                        <li><img src="img/part1-2.jpg"></li>
                        <li><img src="img/part1-3.jpg"></li>
                        <li><img src="img/part1-4.jpg"></li>
                    </ul>
					<ul class="more">
						<li><a><strong>查看更多</strong></a></li>
					</ul>
                </div>
            </div>
            <div class="part2">
                <div class="part2-header">
                </div>
            </div>
            <div class="part3">
                <div class="content">
                    <div class="content-img"><img src="img/part3-1.jpg"></div>
                    <div class="content-img"><img src="img/part3-2.jpg"></div>
                    <div class="content-img"><img src="img/part3-3.jpg"></div>
                    <div class="title">
                        <ul>
                            <li><a href="#">u深度v3.1U盘启动盘制作工具uefi版下载</a></li>
                            <li><a href="#">u深度U盘启动盘制作工具v3.1装机版下载</a></li>
                            <li><a href="#">u深度win7pe工具箱v3.0正式版下载</a></li>
                            <li><a href="#">u深度win8pe工具箱v3.0正式版下载</a></li>
                            <li><a href="#">u深度win03pe工具箱v3.0正式版下载</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">U深度使用winnt工具修改登录密码教程</a></li>
                            <li><a href="#">U深度pe系统调节分辨率的方法</a></li>
                            <li><a href="#">u深度装机版简易计算器使用教程</a></li>
                            <li><a href="#">u深度使用gdisk工具快速分区教程</a></li>
                            <li><a href="#">u深度v3.1uefi版制作U盘启动盘教程</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">U深度启动盘添加pe工具视频教程</a></li>
                            <li><a href="#">U深度使用bootice修复引导视频教程</a></li>
                            <li><a href="#">u盘启动盘系统自带磁盘管理工具视频教程</a></li>
                            <li><a href="#">u盘启动分区工具进行搜索丢失分区视频教程</a></li>
                            <li><a href="#">u深度bootice工具格式化扇区视频教程</a></li>
                        </ul>
                    </div>
					
                </div>
            </div>
            <div class="part4">
                <div class="part4-header">
                </div>
                <div class="content">
                    <div class="content-img"><img src="img/part4-1.jpg"></div>
                    <div class="content-img"><img src="img/part4-2.jpg"></div>
                    <div class="content-img"><img src="img/part4-3.jpg"></div>
					<div class="title2">
					    <ul>
					        <li><a href="#">神舟精盾K460N设置一键U盘启动方法</a></li>
					        <li><a href="#">长城T46笔记本一键U盘启动方法</a></li>
					        <li><a href="#">技嘉P15笔记本设置一键U盘启动的方法</a></li>
					        <li><a href="#">msi微星笔记本GS70设置一键U盘启动的方法</a></li>
					        <li><a href="#">三星450R5J一键U盘启动设置方法</a></li>
					    </ul>
					    <ul>
					        <li><a href="#">电脑一键u盘启动快捷键使用教程</a></li>
					        <li><a href="#">Bios恢复出厂设置操作方法</a></li>
					        <li><a href="#">富士通笔记本使用u深度一键u盘启动视频教程</a></li>
					        <li><a href="#">方正笔记本使用u深度一键u盘启动视频教程</a></li>
					        <li><a href="#">win8改win7安装前怎么设置bios</a></li>
					    </ul>
					    <ul>
					        <li><a href="#">U深度U盘启动盘安装win10技术预览版教程</a></li>
					        <li><a href="#">使用windows安装器安装原版win8系统</a></li>
					        <li><a href="#">使用U深度启动盘手动ghost安装系统教程</a></li>
					        <li><a href="#">u盘启动盘进行xp换vista系统教程</a></li>
					        <li><a href="#">u盘启动盘实现vista换win7系统教程</a></li>
					    </ul>
					</div>
                </div>
            </div>
            <div class="part4-footer">
            </div>
            <div class="part5">
                <div class="link">
                    <div class="link-img">
                    </div>
                    <div class="link-text">
                        <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>
                            <li><a href="#">灰鸽子下载</a></li>
                            <li><a href="#">ghost系统基地</a></li>
                            <li><a href="#">就下载</a></li>
                            <li><a href="#"><a href="#">win7系统下载</a></li>
                            <li><a href="#">系统下载基地</a></li>
                            <li><a href="#">软件下载</a></li>
                            <li><a href="#">win7系统下载</a></li>
                            <li><a href="#">单机游戏下载</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="footer-logo"></div>
                <div class="footer-content">
                    <div class="footer-text">
                        <div class="footer-line">
                            <ul>
                                <li><a href="#">APP下载</a></li>
                                <li><a href="#">APP下载</a></li>
                                <li><a href="#">APP winpe下载</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">APP教程</a></li>
                                <li><a href="#">APP使用教程</a></li>
                                <li><a href="#">APP视频教程</a></li>
                                <li><a href="#">APP视频教程</a></li>
                                <li><a href="#">一键u盘启动</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">bios设置</a></li>
                                <li><a href="#">APP使用教程</a></li>
                                <li><a href="#">APP视频教程</a></li>
                                <li><a href="#">APP视频教程</a></li>
                                <li><a href="#">一键u盘启动</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">常见问题</a></li>
                                <li><a href="#">APP下载</a></li>
                                <li><a href="#">APP下载</a></li>
                                <li><a href="#">APP winpe下载</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            
        </div>
        
    </body>
</html>

上门这一段就是前端的页面代码，接下来要对前端页面代码进行css规划，将他们各归其位。

CSS代码：

body{ margin:0; padding:10px;} 
html{
    padding: 0px;
    margin: 0px;
}
body{
    padding: 0px;
    margin: 0px;
}
.container{
    width: 1600px;
}
.header{
    height: 93px;
    
}
.header .logo{
    height: 93px;
    width: 200px;
    margin-left: 320px;
    margin-right: 200px;
    float: left;
    background: url(../img/LOGO.jpg) no-repeat center center;
}

.header ul{
    float:left;
    height: 93px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.header ul li{
    float:left;
    width:108px;
    line-height: 93px;
    text-align: center;
    vertical-align: middle;
    
}
.header ul li:first-child{
    float:left;
    width:108px;
    line-height: 93px;
    text-align: center;
    vertical-align: middle;
    color:#1D4568;
    background-color: #D9E6EC;
    border-top-style:solid;
    border-top-width: 3px;
    border-top-color: black;
    
}
a:link,a:visited{text-decoration: none;color:black;}
a:hover{text-decoration: none;color: red;}

.part1{
    width: 100%;
    height: 600px;
}
.part1 .main{
    width: 1150px;
    height: 550px;
    margin: 0 auto;
}
.part1 .main .main-header{
    height: 200px;
    background: url(../img/main-header.jpg) no-repeat center center;
}
.part1 .main .list{
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    list-style: none;
}
.part1 .main .list li{
    float: left;
    margin: 0px 50;
}
.part1 .main .more li{
	float:left;
	color: white;
	padding-left: 70px;
	margin-top: -87px;
}
.part2{
    height: 190px;
    width: 100%;
    background-color: #1D4568;
}
.part2 .part2-header{
    height: 200px;
    background: url(../img/part2-header.jpg) no-repeat center center;
}
.part3{
    height: 507px;
    background:url(../img/part3-bg.jpg) repeat center center;
}
.part3 .content{
    margin-left: 300px;
    padding-top: 60px;
    overflow: hidden;
    position: relative;
}
.part3 .content .title{
    position: absolute;
    top:250px;
}
.part3 .content .title ul{
    float: left;
    list-style-type: none;
    padding-left: 10px;
    margin-right: 47px;
}
.part3 .content .content-img{
    float:left;
    margin-right: 25px;
}
.part4{
    height: 705px;
    background:url(../img/part4-bg.jpg) repeat center center;
}
.part4 .part4-header{
    height: 220px;
    background: url(../img/part4-header.jpg) no-repeat center center;
}

.part4 .content{
    margin-left: 300px;
    padding-top: 30px;
    overflow: hidden;
	position: relative;
}
.part4 .content .content-img{
    float:left;
    margin-right: 25px;
}
.part4-footer{
    height: 100px;
    background: url(../img/part4-footer.jpg) no-repeat center center;
}
.part4 .content .title2{
    top: 220px;
	position: absolute;
}
.part4 .content .title2 ul{
    float: left;
    list-style-type: none;
    padding-left: 2px;
    margin-right: 25px;
}
.part5{
    height: 600px;
    background: url(../img/part5.jpg) no-repeat center center;
}
.part5 .link{
    width: 980px;
    height: 100px;
    margin: 0 auto;
    padding-top: 70px;
}
.part5 .link .link-img{
    width:120px;
    height: 94px;
    background: url(../img/part5-img.jpg) no-repeat center center;
    float: left;
}
.part5 .link .link-text{
    float: left;
    height: 94px;
    width: 800px;
}
.part5 .link .link-text ul{
    list-style: none;
    margin-top: 0px;
    font-size: 13px;
}
.part5 .link .link-text ul li{
    float:left;
    margin-right: 10px;
    margin-top:5px;
    margin-bottom: 20px
}
.footer{
    height: 242px;
    background-color: #1D4568;
    position: relative;
}
.footer .footer-content{
    height: 240px;
    margin-left: 670px;
    
}
.footer .footer-content .footer-text{
    height: 200px;
    width: 600px;
    border-top:2px solid white;
    position: absolute;
    margin-top: 20px;
    padding-left: 30px;
}
.footer .footer-content .footer-text ul{
    float:left;
    color: white;
    list-style: none;
    padding-left: 0px;
    margin-right: 44px;
}
.footer-logo{
    position: absolute;
    bottom: 0px;
    height: 292px;
    width: 302px;
    background: url(../img/footer-logo.jpg) no-repeat center center;
    margin-left: 300px;
}

一定要记住根据地址放入图片的位置，最好图片是跟文件在同一个目录下。

以上代码仅供参考喔

让我们来看看成品效果吧