初次编写网页的思路
下面是我根据视频学习的网页
该网页由多个页面组成，我就以其中的首页页面介绍：
首先在文件夹先建立一个文件用于存放需要用到的图片和对应的css文件，如图所示：
用link将css样式导入到HTML中：
<link rel="stylesheet" type="text/css" href="./homepage.css">
通过观察首页的布局，我们可以发现该页面由页眉，导航栏，导航栏下面的图片，正文，页脚，侧栏等组成。这些都可以看成不同的盒子。我将对每一部分进行介绍。
1.页眉占据了整个屏幕，颜色逐渐加深，联系电话是由一张图片构成，可以将这张图片看成另一个盒子通过浮动移动到右边。详细代码如下：
html部分：
<div id="Header">
<div id="header">
<img src="./images/homepage_03.png" id="img_header_photo">
</div>
</div>
css部分：
*{
padding: 0;
margin: 0;
font-size: 13px;
}
div{
overflow: hidden;
}
img{
border: 0;
}
a{
text-decoration: none;
color: black;
}
#Header{
width: 100%;
background-image: linear-gradient(to top,#dadada,#f7f7f7);
border-top:1px solid #eee;
}
#header{
width: 1350px;
margin: 0 auto;
height: 34px;
}
#img_header_photo{
float: right;
margin-right: 9px;
margin-top: 10px;
display:inline;
}
实现情况如下
2导航栏部分，可以将整个导航栏看成一个盒子，将它的id设为d_nav，方便对其css样式进行设置。用a标签引入我们的致美创意logo 图，id设置为logo,文字导航部分用导航标签nav设置，并设置id为n_nav，因为导航栏需要实现在个页面间的跳转，所以用a标签来实现页面跳转，设置一个class为a_nav,在导航栏相对应的页面下还有下划线，设置一个id为a_nav，导航之间有一个|所以使用span标签，设置class为,c_。在将鼠标移到导航栏的文字上时文字会加粗。
具体代码如下
<div id="d_nav">
<a href="#" id="logo"></a>
<nav id="n_nav">
<span>
<a href="../homepage/homepage.html" class="a_nav" id="a_nav">首页</a><span class="c_">|</span>
<a href="../about_us/aboutus.html" class="a_nav">关于至美</a><span class="c_">|</span>
<a href="../successful cases/achievement.html" class="a_nav">成功案例</a><span class="c_">|</span>
<a href="../news/news.html" class="a_nav">新闻动态</a><span class="c_">|</span>
<a href="#" class="a_nav">在线咨询</a><span class="c_">|</span>
<a href="#" class="a_nav">联系我们</a>
</span>
</nav>
</div>
css部分：
#d_nav{
width: 950px;
margin: 0 auto;
height: 100px;
}
#logo{
background: url(./images/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 40px;
width: 195px;
height: 41px;
display: inline;
}
#n_nav{
float: right;
margin-right: 65px;
margin-top: 50px;
}
#a_nav{
border-bottom: 3px solid black;
}
.a_nav{
width: 80px;
height: 30px;
margin: 0 10px;
float: left;
text-align: center;
display:inline;
font-size: 14px;
}
.a_nav:hover{
font-weight: bold;
}
.c_{
float: left;
display: inline;
}
实现情况如下
3.导航栏下面的图片通过将a标签背景设为该图片。具体代码如下
HTML部分：
<a href="#" id="a_imgbg"></a>
css部分：
#a_imgbg{
background: url(./images/homepage_10.png) no-repeat center top;
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
实现情况如下
4.正文部分由一个大的div构成其id设置为d_body，其中嵌套了其他不同的div。
第一部分的div占据了正文盒子的全部宽度设置其id为d_fun，其中由5个a标签构成设置其id为d_fun1到d_fun5，方便设置css样式。
第二部分与第一部分相似，但不同的地方是多了一个标题，这个部分是一个新的div将其id设置为d_exhibition_bord，图片下方中有文字将图片和文字放在一个div中将其id设为d_bord1到d_bord5。
第三部分与第二部分相似，不同的地方是没有图片，而是用文字描述用p标签对文字进行标注将其id设为d_aboutus_text。
第四部分与第二部分类似。
具体代码如下
html部分：
<div id="d_body">
<div id="d_fun">
<a href="#" id="d_fun1"></a>
<a href="#" id="d_fun2"></a>
<a href="#" id="d_fun3"></a>
<a href="#" id="d_fun4"></a>
<a href="#" id="d_fun5"></a>
</div>
<div id="d_exhibition">
<div>
<div class="d_head">EXHIBITION</div>
<hr class="hr_head" />
<span id="s_head">案例展示</span>
</div>
<div id="d_exhibition_bord">
<div class="d_bord" id="d_bord1">
<a href="#" class="a_bord_img1"></a>
<a href="#" class="a_bord_chinese">品牌设计</a>
<a href="#" class="a_bord_eng">brand design</a>
</div>
<div class="d_bord" id="d_bord2">
<a href="#" class="a_bord_img2"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese2" >平面设计</a>
<a href="#" class="a_bord_eng">web design</a>
</div>
<div class="d_bord" id="d_bord3">
<a href="#" class="a_bord_img3"></a>
<a href="#" class="a_bord_chinese">网页设计</a>
<a href="#" class="a_bord_eng">web design</a></a>
</div>
<div class="d_bord" id="d_bord4">
<a href="#" class="a_bord_img4"></a>
<a href="#" class="a_bord_chinese">电子商城</a>
<a href="#" class="a_bord_eng">electronic mall</a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_bord_img5"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese5">空间/建筑</a>
<a href="#" class="a_bord_eng">space/<br/>architecture</a>
</div>
</div>
</div>
<div id="d_aboutus">
<div>
<div class="d_head">ABOUT<span class="s_white">US</span></div>
<hr class="hr_head" />
<span id="s_head_about">关于我们</span>
</div>
<div id="d_aboutus_text">
<h3 id="h3_about_head">致美创意，因为专注</b>，所以专业</b></h3>
<p id="d_aboutus_text">
无论您是创业路上的文艺青年，店面商铺的老板、需要强化品牌的企业家、网店店主......<br/>
我们都能为您提供高端、低价的设计，我们以最有效、最快速的方式为您提供最合适的设计方案
</p>
</div>
</div>
<div id="d_process">
<div>
<div class="d_head">SERVICE<span class="s_white">PROCESS</span></div>
<hr class="hr_head" />
<span id="s_head_process">服务流程</span>
</div>
<div id="d_process_con">
<img src="./images/homepage_29.png" class="img_process">
<span class="s_process">项目洽谈，根据需求报价</span>
<img src="./images/homepage_40.png" class="img_right">
<img src="./images/homepage_31.png" class="img_process">
<span class="s_process">预付定金，开始设计</span>
<img src="./images/homepage_40.png" class="img_right">
<img src="./images/homepage_34.png" class="img_process">
<span class="s_process">修改定稿，完成设计</span>
<img src="./images/homepage_40.png" class="img_right">
<img src="./images/homepage_37.png" class="img_process">
<span class="s_process">签收付尾款</span>
</div>
</div>
</div>
css部分：
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;
}
#d_fun{
width: 100%;
height: 180px;
padding: 0 35px;
}
#d_fun1{
background: url(./images/homepage_13.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#d_fun2{
background: url(./images/homepage_15.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#d_fun3{
background: url(./images/homepage_17.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#d_fun4{
background: url(./images/homepage_19.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#d_fun5{
background: url(./images/homepage_21.png);
width: 108px;
height: 110px;
float: left;
display: inline;
}
#d_exhibition{
width: 100%;
height: 446px;
}
.d_head{
height: 32px;
background: #2d3237;
border-bottom: 1px solid #dadbdc;
text-align: center;
font-size: 24px;
text-shadow:1px -1px 1px #a31618;
color: #ff0000;
}
#s_head{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top: 212px;
left: 442px;
background: white;
color: black;
text-align: center;
}
.hr_head{
border-top: 2px solid #2d3237;
margin-top: 8px;
}
#d_exhibition_bord{
margin-top: 45px;
width: 100%;
}
.d_bord{
width: 172px;
height: 300px;
float: left;
display: inline;
margin-right: 20px
}
#d_bord1{
background: #2d3237;
}
#d_bord2{
background: #fc0000;
}
#d_bord3{
background: #2d3237;
}
#d_bord4{
background: #2d3237;
}
#d_bord5{
background: #fc0000;
margin-right: 0;
}
.a_bord_img1{
display: block;
background: url(./images/homepage_30_29.png);
width: 172px;
height: 230px;
}
.a_bord_img2{
display: block;
background: url(./images/homepage_30_31.png);
width: 172px;
height: 230px;
}
.a_bord_img3{
display: block;
background: url(./images/homepage_30_33.png);
width: 172px;
height: 230px;
}
.a_bord_img4{
display: block;
background: url(./images/homepage_30_35.png);
width: 172px;
height: 230px;
}
.a_bord_img5{
display: block;
background: url(./images/homepage_30_37.png);
width: 172px;
height: 230px;
}
.a_bord_chinese{
display: block;
margin-top: 14px;
margin-left: 27px;
font-size: 13px;
line-height: 19px;/*行间距*/
color: #fc0000;
}
.a_bord_eng{
color: white;
display: block;
margin-left: 27px;
font-size: 17px;
font-variant: small-caps;
line-height: 17px;
}
#a_bord_chinese2{
color: black;
}
#a_bord_chinese5{
color: black;
margin-top: 7px;
}
#d_aboutus{
height: 250px;
text-align: center;;
}
.s_white{
color: white;
font-size: 24px;
}
#s_head_about{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top: 659px;
left: 442px;
background: white;
color: black;
text-align: center;
}
#d_aboutus_text{
margin-top: 22px;
color: #666666;
}
#d_aboutus_text{
line-height: 27px;
}
#h3_about_head{
font-size: 18px;
line-height: 34px;
}
#d_process{
height: 245px;
}
#s_head_process{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
bottom: 198px;
left: 442px;
background: white;
color: black;
text-align: center;
}
#d_process_con{
margin:48px auto;
width: 750px;
height: 22px;
overflow: visible;
}
.img_process{
float: left;
margin-left: 14px;
display: inline;
margin-top: -5px;
}
.s_process{
float: left;
margin-left: 14px;
color: #666666;
display: inline;
font-size: 12px;
font-weight: bold;
}
.img_right{
float: left;
margin-left: 11px;
margin-top: 5px;
display: inline;
}
实现情况如下
5.页脚部分 占据整个页面的宽度，其中内容包括指向其他页面的跳转按钮，公司信息等。其中公司的版权符号是©表示
html部分
<div id="d_Bottom">
<div id="d_bottom">
<p>
<a href="#" class="a_bottom">首页</a>|
<a href="#" class="a_bottom">关于我们</a>|
<a href="#" class="a_bottom">成功案例</a>|
<a href="#" class="a_bottom">在线咨询</a><br/>
Copyright ©2014-12015 致美创意工作室<br/>
技术支持:<a href="#" class="a_bottom">凡客建站</a>|<a href="#" class="a_bottom">管理登录</a>
</p>
</div>
</div>
css部分
#d_Bottom{
background-color: #eaeaea;
border-top: 1px solid #d4d4d4;
}
#d_bottom{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
实现情况如下
6.侧栏使用绝对定位的将其固定在页面的一个位置
HTML部分
<a href="#" id="a_fixed">在线客服<img src="./images/homepage_0311_03.png"></a>
css部分
#a_fixed{
width: 13px;
height: 90px;
border-radius: 3px 0px 0px 3px;
position: fixed;
right: 0px;
top: 300px;
background-image: linear-gradient(to right,#e80e0d 20%,#b32324 80%);
color: white;
padding: 12px 5px 11px 7px;
line-height: 17px;
font-size: 11px;
display: block;
}
实现情况如下
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
