简单页面设计思路_weixin_46060794的博客-程序员秘密
初次编写网页的思路
下面是我根据视频学习的网页
该网页由多个页面组成，我就以其中的首页页面介绍：
首先在文件夹先建立一个文件用于存放需要用到的图片和对应的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;
}
实现情况如下
智能推荐
FPGA编程语言--VHDL OR Verilog？_fpga用什么语言编程_李家之宝树的博客-程序员秘密
硬件新手疑问1：大家都在争硬件开发是选择单片机，DSP,ARM还是FPGA呢？以我个人经验，我也是在硬件方面做了几年的老油条了，大学时玩过单片机，也就是大家常说的C51，C52，单片机驱动个流水灯还行，但是研究生阶段遇到的很多问题，单片机就有心无力了。至于ARM，DSP or FPGA，由于研一做无人机做了DSP的项目，鄙人觉得DSP入手比较难，但是DSP主攻方向是算法研究的，用于算法处理，绝对是...
《快速访问Github设置》_HarkerYX的博客-程序员秘密
1、网站查询 Github 的 IP 地址https://github.com.ipaddress.com/2、 修改本机 hosts 文件windows系统：C:\Windows\System32\drivers\etc Mac 系统 等类linux系统：/etc/hosts 添加如下：（这里给出比较全的，添加进自己的文件中就行）140.82.112.4 www.github.com199.232.69.194 github.global.ssl.fastly.net1...
vsftp的简单使用_文龙z的博客-程序员秘密
一、vsftp以及安装服务端软件：vsftpd客户端软件：ftp端口号：20、21或指定范围内其他随机端口配置文件：vim /etc/vsftpd/vsftpd.conf# 安装yum install vsftpd ftp# 开机自启systemctl enable vsftpd# 启动systemctl start vsftpd# 查看端口开放情况netstat -antp二、工作模式，默认是主动port模式①主动模式(prot):FTP.
ubuntu desktop 登录root账户_weixin_30861459的博客-程序员秘密
有一些操作，登录root账户比较方便，但是ubuntu桌面版默认不允许这样，需要更改root账户的默认密码才可以登录，解决方法是按以下顺序输入：sudo passwd<你现在的用户的密码><root用户的新密码><root用户的新密码>之后就设置成功了，可以用su来登录。转载于:https://www.cnblogs.com/cielosun/p/...
contiki学习笔记（五）ctimer和etimer_etimer_set_天将明bright的博客-程序员秘密
四、callback timer 回调计时器(ctimer)Callback timerContiki systemThe ctimer module provides a timer mechanism（机制） that calls a specified C function when a ctimer expires. More…Filesfile ctimer.cCallbac...
Springmvc入门程序附代码详解 注意细节的配置，处理404等错误_咪了个喵的博客-程序员秘密
1.创建一个web工程注意层级目录，特别是在创建时候一步到位WebRoot\WEB-INF\classes2.导入jar包3.配置web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance http://java.s...
随便推点
关于 VSAN_weixin_33946020的博客-程序员秘密
原文：http://chucksblog.emc.com/chucks_blog/2013/08/considering-vsan.html注明：本文内容基于 VMware VSAN beta 版本撰写，请访问http://www.vmware.com/products/virtual-san/获得有关正式版本的更新信息。 对于我们这些存储行业的人来说，VMwor...
写给大数据开发初学者的话_乐姐的博客-程序员秘密
导读：第一章：初识Hadoop第二章：更高效的WordCount第三章：把别处的数据搞到Hadoop上第四章：把Hadoop上的数据搞到别处去第五章：快一点吧，我的SQL第六章：一夫多妻制第七章：越来越多的分析任务第八章：我的数据要实时第九章：我的数据要对外第十章：牛逼高大上的机器学习经常有初学者在博客和QQ问我，自己想往大数据方向发展，该学哪些技术，学习...
JAVA--线程池_Lia_的博客-程序员秘密
线程池线程池的优点二级目录三级目录线程池的优点（1）可以减少线程的创建、销毁次数，降低资源消耗。（2）防止服务器过载（3）提高响应速度（4）提高线程的可管理性二级目录三级目录...
linux平台学x86汇编（五）：使用gdb调试汇编程序_shallnet的博客-程序员秘密
【版权声明：尊重原创，转载请保留出处：blog.csdn.net/shallnet，文章仅供学习交流，请勿用于商业用途】 正如C语言一样，编写所有语言程序一样会出现一些一些错误，发生错误时，我们可以使用调试器一步一步运行程序以监视数据是如何被处理的。本节使用GNU调试器检查上一节hello程序，监视处理过程中寄存器和内存的值的变化。要调试汇编语言程序，在编译时，需要使用-gs
ios 定位经纬度获取位置信息,地理位置编码与反编码_朝霞弱碱的博客-程序员秘密
工作中遇到关于地图定位的问题，就随手写了这个demo，希望给大家一些参考
破解IEDEA的步骤_lm_1751794778的博客-程序员秘密
1、先下载Jetbrains-agent.jar压缩包并解压，把它放到一个你认为合适（你能找到的地方，下面会用到）的文件夹内（这个路径最好不要含有中文！！！！！）。我是放在：D:\IDEA\jetbrains-agent.jar2、启动下载的IDEA，如果上来需要注册，选择：试用（Evaluate for free）进入IDEA,(总之先进如到IDEA的主界面再说)，点击IDE菜单：“Hel...