简单页面设计思路_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;
}
实现情况如下
智能推荐
R读取.rds文件_r语言读取rds文件_努力干活还不粘人的小妖精的博客-程序员秘密
data <- readRDS("filename.rds")
共享栈基本操作(C语言)_共享栈出栈操作_曼切斯特的流氓的博客-程序员秘密
共享栈共享站可以让两个顺序栈共享一个一维数组空间基本操作判断栈为空:当top0==-1时,0号栈为空,top1==MaxSize时1号栈为空判断栈满:(top1-top0=1)时栈满添加元素:0号栈进栈时,top0先自增1,在赋值1号栈,先自减,在赋值出栈:与入栈相反实现代码#include <stdio.h>#include <stdlib.h>#include<stdbool.h>#define MaxSize 50 //
iOS 二维码扫描_ios微信扫码请求接口i和l混淆_JackRenDeveloper的博客-程序员秘密
iOS 二维码扫描以前就写过二维码扫描的文章，今天难得抽出来时间重新整理了一下，把所有用都的关于二维码的都写在这了，二维码问题，看了这一篇文章就什么都解决了原生二维码扫描个人是比较支持用原生二维码扫描的，这里也就仅仅以原生二维码扫面为范例。另也有二维码扫描库ZBarSDK(点这里)和 ZXingObjC(点这里) 。1.原生扫描用到的几个类@pr
java.lang.IllegalArgumentException: Illegal character in scheme at index 0_星宫社的博客-程序员秘密
有时候，通过httplicent发送url的时候，你会遇到懊恼的java.lang.IllegalArgumentException: Illegal character in scheme at index 0。你会看到 空格被转成了+号了。 When to encode space to plus (+) or %20 ...google 上有解释： URLEn
docker容器中redis设置密码_余_小凡的博客-程序员秘密
为现有的redis创建密码或修改密码的方法：1.查看redis容器id docker ps -a 2. 进入redis的容器 docker exec -it 容器ID bash 3.运行命令：redis-cli4.查看现有的redis密码：config get requirepass5.设置redis密码config set requirepass ****（****为你要设置的密码）6.若出现(error) NOAUTH Authenticati...
linux使用yum安装mongodb出现GPG key retrieval failed: [Errno 14] problem making ssl connection问题_大梦_几千秋的博客-程序员秘密
linux使用yum安装mongodb出现GPG key retrieval failed: [Errno 14] problem making ssl connection问题在配置yum安装文件的时候[mongodb-org-3.2]name=MongoDB Repositorybaseurl=https://repo.mongodb.org/yum/redhat/$releasev...
随便推点
JavaScript执行上下文与执行上下文栈_js执行上下文_LUOandHUANG的博客-程序员秘密
JavaScript执行上下文与执行上下文栈变量提升与函数提升1、变量声明提升通过var定义（声明）的变量，在定义语句之前就可以访问到 值为：undefined2、函数声明提升通过function声明的函数，在之前就可以直接调用 值为：函数定义（对象） 代码说明：var a = 4 function fn () { console.log(a) ...
使用ssh公钥实现免密码登录_测试工程师_的博客-程序员秘密
使用ssh公钥实现免密码登录 ssh 无密码登录要使用公钥与私钥。Linux下可以用用ssh-keygen生成公钥/私钥对，下面我以CentOS为例。有机器A(192.168.1.155)，B(192.168.1.181)。现想A通过ssh免密码登录到B。首先以root账户登陆为例。1.在A机下生成公钥/私钥对。[[email protected] ~]# ssh-keygen -t ...
【IntelliJ IDEA】idea上提交代码到GitHub，已经提交了 但是GitHub上却没有的解决办法..._weixin_33973600的博客-程序员秘密
摘要： 今天提交idea上的代码到GitHub，提交过程已经完成， 在版本控制的Log中可以看到，已经将这一部分都提交更新了 在版本控制的Local Changes中已经看不到提交过的代码了 但是GitHub上并没有找到提交的代码 怎么办呢？ 是因为刚刚走的过程中，其实还是没有走完，只是将I...今天提交idea上的代码到GitHub，提交过程已经完成，在版本控制的Log中可以看...
计算机丢失cxcore100.dll,cxcore100.dll_神自污渍的博客-程序员秘密
cxcore100.dll官方版cxcore100.dll官方版是款电脑中系统文件夹中的重要文件。cxcore100.dll缺少，会出现软件或者游戏运行不起来，可能会提示文件加载失败信息，从而导致windows系统无法正常工作。cxcore100.dll的存在对维护计算机系统的稳定具有重要作用。华军软件园提供cxcore100.dll软件的下载服务，下载cxcore100.dll软件其他版本，请到...
android 7多窗口怎么进,Android 7.0多窗口支持_谢幺的博客-程序员秘密
Android 7.0正式版在近期开始进行了推送，该版本中最大的一个特色就是支持在设备上展示多窗口供用户查看各个应用。如何切换到多窗口模式 多窗口模式有两种：分屏模式和自由形状模式。分屏模式分屏模式 进入分屏模式的操作：在overview屏幕下，长按Activity标题，然后可以拖动该 Activity 至屏幕突出显示的区域。进入分屏模式 在分屏模式下，手指可以拖动分界线，放大其...
C#自定义控件编程轻松入门（1）_河西石头的博客-程序员秘密
C#控件编写的第一课，最容易的入门方式，从一个空白控件开始，逐步掌握自定义控件的编写过程。