重写一下主站主页

administrator 63 1

任务

最近想学点web正好又闲的没什么事,之前做过我们的主站,感觉不好看,所以这次我打算重做一下。

这个就是目前在用的:

重写一下主站主页

目标呢,就是这个(拿Photoshop做的一个稿子):

重写一下主站主页

工具&开发语言

工具的话就Dreamweaver吧,我觉得它颜值挺高的[小纠结]开发语言吧,做web少不了的html+css,暂时做静态的,就先不用PHP了吧,来一个前端框架,用bootstrap吧。

给你们看一下dream的高颜值:

重写一下主站主页

接下来啥都不说了,开干,照着设计图敲就是了[aru_1]

引入bootstrap

好办,照着bootstrap给出的例子引用他们的源码就好了:

重写一下主站主页

这样子就差不多了:

重写一下主站主页

你没有看错,复制粘贴大法,上[aru_14]

其他的核心js可以不用引用,我想偷懒不需要的功能可以不写的。

我还是解释一下为什么要复制粘贴这玩意吧,bootstrap是一个前端布局框架,最基本的是一套css代码,而在w3c技术规范中,允许我们可以外联一个远程的css文件,只要这个文件可以被直接打开就行,所以世界上有许多的公共框架等开源的CDN服务器,我们只要链上它们就可以直接运行上面的css,给这些为互联网建设默默付出的组织点个赞[aru_50]

外联接入自己的main.css & 用css实现渐变背景

我们的页面需要用自己的风格写,所以自定义样式是少不了的,所以我们就写一个main.css放到根目录下css文件夹里。

重写一下主站主页

OK,下面写一下背景吧,用css写渐变就行了,为了更好兼容,代码写了好几套,就是这样的了:

    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */

我们改一下,放进我们的main.css里面:

html{
	height: 100%;
}
body{
	height: 100%;
	background: -webkit-linear-gradient(#336699, #9933ff); /* Safari 5.1 - 6.0 */ 
	background: -o-linear-gradient(#336699, #9933ff); /* Opera 11.1 - 12.0 */ 
	background: -moz-linear-gradient(#336699, #9933ff); /* Firefox 3.6 - 15 */ 
	background: linear-gradient(#336699, #9933ff); /* 标准的语法(必须放在最后) */
}

可以看到我上来就给html一个100%高度,你知道是为什么吗?这是因为下面的body给了个100%的高度,但是按照百分比设置高度必须有一个前提,那就是父级元素有高度,所以html作为body的父级元素也要给出100%的高度。

好了,看下效果吧:

重写一下主站主页

接下来我们做一下框架布置,继续继续[doge]

构造基本框架

本来打算讲导航写法,但是解决这个问题之前把我们的页面框架做一下吧:

重写一下主站主页

看着这个图,解释一下里面那些红框黄框的都是啥意思:

温馨提示

这里写的都是bootstrap的栅格系统的css类。

红框:.container,是整个布局页面的外框容器。

黄框:.row,是页面每一行元素的一个单独的容器。

紫框:.col-xs-N,是行内容器,N代表这个容器占多少行,比如第一个行容器(上面的第一个黄色边框的框架)里面的行内容器是占满宽度的,而bootstrap的栅栏系统一共有12个行,所以N的值是12,下面还有个黄框的框架行,里面包含了两个独立的行内元素,各自占着一半的行宽度,那它的N就是6了,12/2=6嘛,小学生都知道的[小纠结]

内有惊喜!

好了,玩笑等活干完了再开,来,接着干活:

在html文档体里面的body里面直接写这些代码就OK了:

<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
			
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
			
			</div>
			<div class="col-md-6">
			
			</div>
		</div>
	</div>
</body>

写导航内容

导航里面就俩玩意,一个logo,另一个是三个外链,没啥说的,我再去复制一个现成的[斜眼笑]

虽说。。偷东西要趁晚上,但是我还是打算明天再更新偷,今天偷的有点累[aru_2]

好了,继续,把例子挖过来:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

这就是一个基本的导航例子,我们把它嵌入进页面,并做出一定的修改:

首先处理一下logo图片,我已经设计好了,命名为logo.png,然后放进根目录下面的img文件夹,接着上代码:

<a href="#"><img id="logo" alt="logo" src="./img/logo.png" alt="重写一下主站主页"></a>
<ul class="nav nav-pills">
	<li role="presentation"><a href="#">博客</a></li>
	<li role="presentation"><a href="#">论坛</a></li>
	<li role="presentation"><a href="#">云计算</a></li>
</ul>

这里导航跟logo就这么搞定了,结果....

重写一下主站主页

看我高清logo[aru_59]

这[aru_15]意料之中意外意外[aru_19]

其实这是因为这图片宽度是自动的但是高度沾满了全屏,之前设置了body的高度是100%的,所以我们只要给它高度等于导航栏高度就行了,bootstrap的导航栏默认高度是40px,记上就好了。

#logo{
	height: 40px;
}

然而:

重写一下主站主页

革命尚未成功啊[aru_15]

简单,追一句左浮动就OK了,代码:

.nav{
	float: right;
}

完美:

重写一下主站主页

接下来是左侧的提示性信息。

提示性信息编写

不说别的,上代码:

<div>
	<h1>光环网域</h1>
	<h2>未知的,永远值得探索,相信美好的事情总会发生。</h2>
	<h3>我们致力于分享开发知识,并提供PC程序、移动端APP开发、服务器租用以及调试、聊天机器人、网站设计开发等服务。</h3>
	<a>联系我们</a>
</div>

看下效果:

重写一下主站主页

行吧,丑的可以哈[aru_39]

上css美化吧...经过一轮紧张的调试,不仅加了很多样式,标签都换了几个[doge]代码:

<div id="info_tip_div">
	<h1 class="info_tip">光环网域</h1>
	<p id="info_text1" class="info_tip">未知的,永远值得探索,相信美好的事情总会发生。</p>
	<p id="info_text2" class="info_tip">我们致力于分享开发知识,并提供PC程序、移动端APP开发、服务器租用以及调试、聊天机器人、网站设计开发等服务。</p>
	<a id="info_tip_link" href="./"><div id="info_tip_btn" align="center">联系我们</div></a>
</div>
.info_tip{
	color: #FFFFFF;
}
#info_tip_div{
	margin-top: 150px;
}
#info_text1{
	font-size: 35px;
	font-weight: lighter;
}
#info_text2{
	font-size: 20px;
	font-weight: lighter;
}
#info_tip_btn{
	height: 35px;
	width:80px;
	color: #000000;
	background-color: #FFFFFF;
	border-radius: 5px;
	font-size: 14px;
	padding-top: 8px;
	font-family: "Microsoft YaHei UI";
	font-weight: bold;
}
#info_tip_link{
	color: #000000;
	text-decoration: none;
}

看个效果:

重写一下主站主页

完美,接下来做左侧的几个图标

左侧图标的绘制

这一块我第一次搞这个异形宫格,弄起来了一堆BUG就没有信心边写边录了,所以我现在做完了再给大家看看代码:

<div id="tb">
	<div class="row">
		<div align="center" class="tb_N col-md-3" id="tb_1">
			<img class="tb_tp_1" alt="blog" src="./img/blog.png" alt="重写一下主站主页">
			<p class="tb_txt_1">光环博客</p>
		</div>
		<div align="center" class="tb_N col-md-3" id="tb_2">
			<img class="tb_tp_2" alt="blog" src="./img/geek.png" alt="重写一下主站主页">
			<p class="tb_txt_2">光环极客</p>
		</div>
	</div>
	<div class="row">
		<div align="center" class="tb_N col-md-3" id="tb_3">
			<img class="tb_tp_2" alt="blog" src="./img/cloudComputer.png" alt="重写一下主站主页">
			<p class="tb_txt_2">光棱云计算</p>
		</div>
		<div align="center" class="tb_N col-md-3" id="tb_4">
			<img class="tb_tp_1" alt="blog" src="./img/other.png" alt="重写一下主站主页">
			<p  class="tb_txt_1">待开发</p>
		</div>
	</div>

 

.tb_N{
	height: 178px;
	width: 146px;
	background-color:#FFFFFF;
	margin: 5px;
	border-radius: 5px;
}
#tb{
	margin-left: 200px;
	margin-top: 80px;
}
#tb_1{
	width: 130px;
	height: 150px;
	margin-left: 22px;
	margin-top: 32px;
}
#tb_4{
	width: 130px;
	height: 150px;
}
.tb_tp_1{
	width: 80px;
	margin-top: 20px;
}
.tb_txt_1{
	font-size: 18px;
	margin-top: 15px;
	font-weight: bold;
}
.tb_tp_2{
	width: 100px;
	margin-top: 22px;
}
.tb_txt_2{
	font-size: 22px;
	margin-top: 14px;
	font-weight: bold;
}

搞定,看看效果:

重写一下主站主页

处理细节

看起来已经很ok了,但是我们注意到logo跟浏览器顶部没有距离,微微修一下就ok了。

 

发表评论 取消回复
表情 图片 链接 代码

  1. 光环
    光环 Lv 1

    没人吗?

分享