这次给大家讲解一个菜鸟教程网站的制作过程,该网站是一个关于编程知识教学的相关网站,大家也可以进这个网站进行相关编程的学习,里面有各方面的全套教程.
先给大家展示一下最后网站实现的效果以及全部源代码:
<html>
<head>
<title>菜鸟教程-学的不仅是技术</title>
<style>
.div_head{
height:59px;
width:100%;
margin-top:17px;
margin-bottom:15px;
padding-left:10px;
padding-right:10px;
}
.div_row{
width:100%;
margin-left:16%;
margin-right:101px;
overflow:hidden;
max-width: 1260px;
min-width: 755px;
height:59px;
}
.div_logo{
height:59px;
width:61.6%;
float:left;
padding-right:1%;
}
input#sreach{
width:35.5%;
height:37px;
background-color:#fff;
line-height:34px;
margin-top:11px;;
border:1px;
border-radius:3px;
font-size:1.2em;
padding-left:10px;
padding-right:10px;
}
.div_title{
height:34px;
width:100%;
padding-left:10px;
padding-right:10px;
background-color:#96b97d;
font-size:1.2em;
}
.div_titlein{
height:34px;
width:65%;
margin-left:15%;
padding-left:20px;
margin-bottom:0%;
}
.div_menu1{
height:35px;
width:26.3906px;
float:left;
line-height:15px;
font-size:13px;
margin:0px;
padding: 10px 0 0 20px;
color:#fff;
}
.div_menu2{
height:35px;
width:52.7969px;
float:left;
line-height:15px;
font-size:13px;
margin:0px;
padding: 10px 0 0 20px;
color:#fff;
}
.div_menu3{
height:35px;
width:60px;
float:left;
line-height:15px;
font-size:13px;
margin:0px;
padding: 10px 0 0 20px;
color:#fff;
}
.div_body{
height:5196px;
width:100%;
margin-top:10px;
float:left;
}
.div_tab{
height:451px;
width:9%;
margin-left:16%;
float:left;
border:1px solid;
}
.div_home{
height:2000px;
width:53%;
margin-left:15px;
padding:12px 20px;
border:1px #eaeaea;
float:left;
background-color:#fff;
}
.div_meau4{
height:32px;
width:93%;
padding:4px;
border:1px;
font-size:1.1em;
line-height:1.9em;
border-bottom: 1px solid;
background-color:#f6f6f6;
}
.div_hometitle{
height:21px;
width:100%;
margin:12px 0;
font-size:21px;
font-weight:700;
border-bottom: 1px solid #eaeaea;
}
.div_codelist1{
height:352px;
width:100%;
}
.div_codelist2{
height:556px;
width:100%;
}
.div_codeblock{
height:80px;
width:274.078px;
float:left;
padding:6px 16px;
margin-bottom:10px;
margin-right:8px;
color: #bbb;
background-color: #f6f6f6;
}
.h_fontstyle1{
color:#64854c;
font-size: 14px;
text-align: left;
overflow: hidden;
margin-bottom:10px;
margin-top:10px;
line-height: 1.1;
white-space: nowrap;
}
.h_fontstyle2{
text-align: left;
font-size: 12px;
color: #666;
width:230px;
height:48px;
}
</style>
</head>
<body bgcolor="#f6f6f6" >
<div class="div_head">
<div class="div_row">
<div class="div_logo">
<img src="https://img-blog.csdnimg/2022010702592858172.png"/>
</div>
<input id="sreach" type="text" name="sreach" placeholder="搜索......"/>
</div>
</div>
<div class="div_title">
<div class="div_titlein">
<div class="div_menu1">首页</div>
<div class="div_menu2">菜鸟笔记</div>
<div class="div_menu2">菜鸟工具</div>
<div class="div_menu2">参考手册</div>
<div class="div_menu2">用户笔记</div>
<div class="div_menu3">测验/考试</div>
<div class="div_menu2">设计神器</div>
<div class="div_menu2">本地书签</div>
<div class="div_menu1">登录</div>
</div>
</div>
<div class="div_body">
<div class="div_tab">
<div class="div_meau4"><img src="https://img-blog.csdnimg/2022010702592842515.png" />全部教程</div>
<div class="div_meau4"style="background-color:#fff"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>HTML/CSS</div>
<div class="div_meau4"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>JavaScript</div>
<div class="div_meau4"style="background-color:#fff"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>服务端</div>
<div class="div_meau4"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>数据库</div>
<div class="div_meau4"style="background-color:#fff"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>移动端</div>
<div class="div_meau4"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>XML教程</div>
<div class="div_meau4"style="background-color:#fff"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>ASP.NET</div>
<div class="div_meau4"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>Web Service</div>
<div class="div_meau4"style="background-color:#fff"><img src="https://img-blog.csdnimg/2022010702592854923.png"/>开发工具</div>
<div class="div_meau4"><img src="https://img-blog.csdnimg/2022010702592854923.png" style="height:14px;width:14px;"/>网站建设</div>
</div>
<div class="div_home">
<div class="div_codelist1">
<div class="div_hometitle"><img src="https://img-blog.csdnimg/2022010702593018462.png" style="height:18px;width:18px;margin-right:2px;"/>HTML/CSS</div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 HTML】</h4><img src="https://img-blog.csdnimg/2022010702593164101.png"style="float:left;"/><strong class="h_fontstyle2">HTML,即超文本标记语言（Hyper Text Markup Language）</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 HTML5】</h4><img src="https://img-blog.csdnimg/2022010702593194400.png"style="float:left;"/><strong class="h_fontstyle2">HTML5 是下一代 HTML 标准</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 CSS】</h4><img src="https://img-blog.csdnimg/2022010702593121109.png"style="float:left;"/><strong class="h_fontstyle2">层叠样式表（Cascading StyleSheet）</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 CSS3】</h4><img src="https://img-blog.csdnimg/2022010702593181784.png"style="float:left;"/><strong class="h_fontstyle2">Bootstrap4 目前是 Bootstrap 的最新版本</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Bootstrap3】</h4><img src="https://img-blog.csdnimg/2022010702593229100.png"style="float:left;"/><strong class="h_fontstyle2">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Bootstrap4】</h4><img src="https://img-blog.csdnimg/2022010702593227679.png"style="float:left;"/><strong class="h_fontstyle2">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Font Awesome】</h4><img src="https://img-blog.csdnimg/2022010702593294815.png"style="float:left;"/><strong class="h_fontstyle2">Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Foundation】</h4><img src="https://img-blog.csdnimg/2022010702593229622.png"style="float:left;"/><strong class="h_fontstyle2">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong/></div>
</div>
<div class="div_codelist2">
</div>
</div>
</div>
</body>
</html>
- 接下来我们对代码为大家进行讲解:
<style...>
<style.../>中设置下面各个div板块所用的CSS属性,用class="****"将他们链接在一起.
接下来我们对
<body...>
<body.../> 中各个div板块所完成的功能进行讲解
首先是"div_head"这个板块确定的是如下图所示这一部分:
在"div_head"中包含"div_row"和"div_logo"中两部分,分别是该网页首页的图片,和搜索框,前者定义了img一个元素,用src链接一个base64资源,搜索框用form表单的imput元素来确定,如果对这方面不了解的可以参考我之前的博客有关于对form表单的详细介绍.
紧接着我们定义一个大div板块"div_title"在该div中包含首页,菜鸟笔记.....这些各个div;
最后我们再定义一个内容的板块"div_body"中包含"div_tab"和"div_home"两个div板块,他们的效果图如下:
其中"div_tab"部分定义了旁边的菜单栏,"div_home"定义了主要内容部分.
更多推荐
前端---HTML关于简易菜鸟教程网站首页制作
发布评论